setrip/features/trip/components/join-trip-button.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { joinTripAction, cancelJoinAction } from "@/features/trip/actions";
import { markParticipantPaidAction } from "@/features/booking/actions";

interface JoinTripButtonProps {
  tripId: string;
  isLoggedIn: boolean;
  isOrganizer: boolean;
  isJoined: boolean;
  /** Status partisipasi user saat isJoined (bukan organizer) */
  participationStatus?: "PENDING" | "CONFIRMED" | null;
  /** Status pembayaran manual (peserta) */
  participantPayment?: {
    markedPaidAt: string | Date | null;
    paymentConfirmedAt: string | Date | null;
  } | null;
  isFull: boolean;
  tripStatus: string;
  /** Tanggal berangkat trip sudah lewat */
  isDeparturePast?: boolean;
}

export function JoinTripButton({
  tripId,
  isLoggedIn,
  isOrganizer,
  isJoined,
  participationStatus,
  participantPayment,
  isFull,
  tripStatus,
  isDeparturePast,
}: JoinTripButtonProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  if (!isLoggedIn) {
    return (
      <Link
        href="/login"
        className="block w-full rounded-xl bg-primary-600 py-3 text-center text-sm font-bold text-white shadow-lg shadow-primary-600/20 hover:bg-primary-700"
      >
        Login untuk Join Trip
      </Link>
    );
  }

  if (isOrganizer) {
    return (
      <div className="rounded-xl bg-secondary-50 py-3 text-center text-sm font-medium text-secondary-700">
        Kamu adalah organizer trip ini
      </div>
    );
  }

  if (isJoined && isDeparturePast) {
    return (
      <div className="rounded-xl bg-neutral-100 px-3 py-3 text-center text-sm font-medium leading-relaxed text-neutral-600">
        Kamu terdaftar di trip ini. Setelah tanggal berangkat lewat,{" "}
        <span className="font-semibold text-neutral-700">pembatalan ditutup</span>
        . Jika trip sudah selesai, isi ulasan di bagian bawah halaman.
      </div>
    );
  }

  if (isDeparturePast && !isJoined) {
    return (
      <div className="rounded-xl bg-neutral-100 py-3 text-center text-sm font-medium text-neutral-500">
        Trip sudah lewat tanggal berangkat
      </div>
    );
  }

  if (tripStatus !== "OPEN" && !isJoined) {
    return (
      <div className="rounded-xl bg-neutral-100 py-3 text-center text-sm font-medium text-neutral-500">
        Trip tidak tersedia untuk pendaftaran
      </div>
    );
  }

  async function handleJoin() {
    setLoading(true);
    setError("");
    const result = await joinTripAction(tripId);
    setLoading(false);
    if (result.error) {
      setError(result.error);
    } else {
      router.refresh();
    }
  }

  async function handleCancel() {
    setLoading(true);
    setError("");
    const result = await cancelJoinAction(tripId);
    setLoading(false);
    if (result.error) {
      setError(result.error);
    } else {
      router.refresh();
    }
  }

  async function handleMarkPaid() {
    setLoading(true);
    setError("");
    const result = await markParticipantPaidAction(tripId);
    setLoading(false);
    if (result.error) {
      setError(result.error);
    } else {
      router.refresh();
    }
  }

  const pay = participantPayment;
  const showMarkPaid =
    isJoined &&
    pay &&
    !pay.paymentConfirmedAt &&
    !pay.markedPaidAt &&
    !isDeparturePast;
  const waitingPaymentConfirm =
    isJoined && pay && pay.markedPaidAt && !pay.paymentConfirmedAt;
  const paymentDone = isJoined && pay && pay.paymentConfirmedAt;

  return (
    <div>
      {error && (
        <div className="mb-3 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-red-600">
          {error}
        </div>
      )}
      {isJoined && participationStatus === "PENDING" && (
        <div className="mb-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium leading-relaxed text-amber-900">
          Permintaan ikut trip kamu{" "}
          <span className="font-semibold">menunggu persetujuan organizer</span>.
          Kamu bisa membatalkan kapan saja sebelum disetujui.
        </div>
      )}
      {isJoined && participationStatus === "CONFIRMED" && (
        <div className="mb-3 rounded-xl border border-secondary-200 bg-secondary-50 px-4 py-3 text-sm font-medium text-secondary-900">
          Kamu sudah{" "}
          <span className="font-semibold">terkonfirmasi</span> sebagai peserta
          trip ini.
        </div>
      )}
      {waitingPaymentConfirm && (
        <div className="mb-3 rounded-xl border border-primary-200 bg-primary-50 px-4 py-3 text-sm font-medium leading-relaxed text-primary-950">
          Kamu sudah menandai <span className="font-semibold">sudah bayar</span>.
          Tunggu organizer mengonfirmasi pembayaran.
        </div>
      )}
      {paymentDone && (
        <div className="mb-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-900">
          Pembayaran kamu sudah{" "}
          <span className="font-semibold">dikonfirmasi organizer</span>.
        </div>
      )}
      {showMarkPaid && (
        <button
          type="button"
          onClick={handleMarkPaid}
          disabled={loading}
          className="mb-3 w-full rounded-xl border-2 border-primary-500 bg-white py-3 text-sm font-bold text-primary-700 transition-colors hover:bg-primary-50 disabled:opacity-50"
        >
          {loading ? "Memproses..." : "Saya sudah bayar"}
        </button>
      )}
      {isJoined ? (
        <button
          onClick={handleCancel}
          disabled={loading}
          className="w-full rounded-xl border-2 border-red-200 py-3 text-sm font-bold text-red-600 transition-colors hover:bg-red-50 disabled:opacity-50"
        >
          {loading ? "Memproses..." : "Batal Ikut"}
        </button>
      ) : (
        <button
          onClick={handleJoin}
          disabled={loading || isFull}
          className="w-full rounded-xl bg-primary-600 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/20 transition-colors hover:bg-primary-700 disabled:opacity-50"
        >
          {loading
            ? "Memproses..."
            : isFull
            ? "Trip Sudah Penuh"
            : "Join Trip Sekarang"}
        </button>
      )}
    </div>
  );
}