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

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { cancelTripAction } from "@/features/trip/actions";

interface CancelTripButtonProps {
  tripId: string;
  /** Jumlah peserta dengan booking PAID — preview impact. */
  paidParticipantCount: number;
}

export function CancelTripButton({
  tripId,
  paidParticipantCount,
}: CancelTripButtonProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [confirmText, setConfirmText] = useState("");
  const [result, setResult] = useState<
    | { refundCount: number; cancelledCount: number; skippedCount: number }
    | null
  >(null);

  async function handleConfirm() {
    setLoading(true);
    setError("");
    const res = await cancelTripAction(tripId);
    setLoading(false);
    if ("error" in res) {
      setError(res.error ?? "Terjadi kesalahan");
      return;
    }
    setResult({
      refundCount: res.refundCount,
      cancelledCount: res.cancelledCount,
      skippedCount: res.skippedCount,
    });
    router.refresh();
  }

  if (result) {
    return (
      <div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
        <p className="font-semibold">Trip dibatalkan.</p>
        <ul className="mt-2 list-inside list-disc space-y-0.5 text-xs">
          <li>{result.refundCount} refund dibuat (menunggu admin transfer)</li>
          <li>
            {result.cancelledCount} booking belum-bayar di-cancel langsung
          </li>
          {result.skippedCount > 0 && (
            <li>
              {result.skippedCount} booking di-skip (sudah punya refund aktif —
              admin akan handle manual)
            </li>
          )}
        </ul>
      </div>
    );
  }

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        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"
      >
        Batalkan Trip
      </button>
    );
  }

  const requireConfirm = paidParticipantCount > 0;
  const canSubmit = !requireConfirm || confirmText.trim() === "BATAL";

  return (
    <div className="space-y-3 rounded-2xl border-2 border-red-200 bg-red-50 p-4 text-sm">
      <div>
        <p className="font-bold text-red-900">Yakin batalkan trip ini?</p>
        <p className="mt-1 text-xs text-red-800/80">
          Aksi ini <span className="font-semibold">tidak bisa di-undo</span>.
          Trip akan ditandai CLOSED dan semua peserta dibatalkan.
          {paidParticipantCount > 0 && (
            <>
              {" "}Sistem akan otomatis membuat{" "}
              <span className="font-bold">
                {paidParticipantCount} refund
              </span>{" "}
              full amount untuk peserta yang sudah membayar — admin SeTrip akan
              memproses transfer.
            </>
          )}
        </p>
      </div>

      {requireConfirm && (
        <label className="block">
          <span className="text-xs font-semibold uppercase tracking-wide text-red-700">
            Ketik <span className="font-mono">BATAL</span> untuk konfirmasi
          </span>
          <input
            value={confirmText}
            onChange={(e) => setConfirmText(e.target.value)}
            placeholder="BATAL"
            className="mt-1 w-full rounded-xl border border-red-300 bg-white px-3 py-2 font-mono text-sm focus:border-red-500 focus:outline-none"
          />
        </label>
      )}

      {error && (
        <div className="rounded-lg bg-white px-3 py-2 text-xs font-medium text-red-700">
          {error}
        </div>
      )}

      <div className="flex flex-wrap gap-2">
        <button
          type="button"
          onClick={handleConfirm}
          disabled={loading || !canSubmit}
          className="rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700 disabled:opacity-50"
        >
          {loading ? "Memproses…" : "Ya, Batalkan Trip"}
        </button>
        <button
          type="button"
          onClick={() => {
            setOpen(false);
            setConfirmText("");
            setError("");
          }}
          disabled={loading}
          className="rounded-xl border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100 disabled:opacity-50"
        >
          Batal
        </button>
      </div>
    </div>
  );
}