import { PricingSummary } from "@/components/checkout/pricing-summary";
import type { KolaboraEvent, TicketPhase, TicketType } from "@/types/event";
import { type CheckoutState, maskKtp } from "./types";

export function StepConfirmation({
  event,
  ticketType,
  ticketPhase,
  state,
  onEditQuantity,
  onEditHolders,
  onTermsChange,
  onBack,
  onNext,
  isSubmitting,
  error,
}: {
  event: KolaboraEvent;
  ticketType: TicketType;
  ticketPhase: TicketPhase;
  state: CheckoutState;
  onEditQuantity: () => void;
  onEditHolders: () => void;
  onTermsChange: (accepted: boolean) => void;
  onBack: () => void;
  onNext: () => void;
  isSubmitting: boolean;
  error: string | null;
}) {
  const termsAccepted = state.termsAcceptedAt !== null;

  return (
    <div className="mx-auto max-w-3xl px-6 py-8">
      <section className="rounded-2xl bg-neutral-100 p-6">
        <div className="flex items-center justify-between">
          <p className="font-signaturee text-lg font-semibold text-signaturee-red">Order</p>
          <button type="button" onClick={onEditQuantity} className="text-sm font-medium text-signaturee-orange">
            Edit
          </button>
        </div>
        <p className="mt-2 text-sm text-neutral-700">{event.title}</p>
        <p className="text-sm text-neutral-600">
          {ticketType.name} &mdash; {ticketPhase.name} &times; {state.quantity}
        </p>
      </section>

      <section className="mt-4 rounded-2xl bg-neutral-100 p-6">
        <div className="flex items-center justify-between">
          <p className="font-signaturee text-lg font-semibold text-signaturee-red">Personal Details</p>
          <button type="button" onClick={onEditHolders} className="text-sm font-medium text-signaturee-orange">
            Edit
          </button>
        </div>
        <div className="mt-3 flex flex-col gap-3">
          {state.holders.map((holder, i) => {
            const peoplePerTicket = ticketType.people_per_ticket;
            const label =
              peoplePerTicket > 1
                ? `Ticket ${Math.floor(i / peoplePerTicket) + 1} — Participant ${(i % peoplePerTicket) + 1}`
                : `Personal Details ${i + 1}`;

            return (
              <div key={i} className="rounded-xl bg-white p-4 text-sm">
                <p className="font-medium">{label}</p>
                <p className="text-neutral-600">{holder.name}</p>
                <p className="text-neutral-600">{holder.email}</p>
                <p className="text-neutral-600">{holder.phone}</p>
                <p className="text-neutral-600">{maskKtp(holder.ktp)}</p>
                <p className="text-neutral-600">{holder.age} years old</p>
              </div>
            );
          })}
        </div>
      </section>

      <section className="mt-4 rounded-2xl bg-neutral-100 p-6">
        {state.quote && (
          <PricingSummary
            breakdown={state.quote}
            discountLabel={state.promo ? `Promo ${state.promo.code}` : `Voucher ${state.voucher?.code}`}
          />
        )}
      </section>

      <label className="mt-4 flex items-start gap-2 text-sm">
        <input
          type="checkbox"
          checked={termsAccepted}
          onChange={(e) => onTermsChange(e.target.checked)}
          className="mt-0.5"
        />
        I agree to Signaturee&apos;s{" "}
        <a href="/terms" target="_blank" rel="noreferrer" className="text-signaturee-orange underline">
          Terms &amp; Conditions
        </a>{" "}
        and{" "}
        <a href="/privacy" target="_blank" rel="noreferrer" className="text-signaturee-orange underline">
          Privacy Policy
        </a>
        .
      </label>

      {error && <p className="mt-4 text-sm text-red-600">{error}</p>}

      <div className="mt-6 flex justify-between">
        <button
          type="button"
          onClick={onBack}
          disabled={isSubmitting}
          className="rounded-full border border-neutral-300 px-6 py-3 font-medium hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
        >
          Back
        </button>
        <button
          type="button"
          onClick={onNext}
          disabled={!termsAccepted || isSubmitting || !state.quote}
          className="rounded-full bg-signaturee-orange px-6 py-3 font-medium text-signaturee-cream hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {isSubmitting ? "Processing..." : "Continue to Payment"}
        </button>
      </div>
    </div>
  );
}