"use client";

import { useState } from "react";
import type { KolaboraEvent, TicketPhase, TicketType } from "@/types/event";
import type { Order } from "@/types/order";
import { Stepper } from "./Stepper";
import { StepTotalOrder } from "./StepTotalOrder";
import { StepHolderData } from "./StepHolderData";
import { StepConfirmation } from "./StepConfirmation";
import { StepPayment } from "./StepPayment";
import { EMPTY_HOLDER, initialCheckoutState, type CheckoutState, type WizardStep } from "./types";

/**
 * Owns the wizard's step + `CheckoutState` — kept in plain React state (no
 * browser storage, per flow payment/prompt.txt). Advancing/going back only
 * ever moves `step` by one via each step's own button; there's no way to
 * jump ahead to an incomplete step (`Stepper` is display-only and doesn't
 * accept clicks).
 */
export function CheckoutWizard({
  event,
  ticketType,
  ticketPhase,
}: {
  event: KolaboraEvent;
  ticketType: TicketType;
  ticketPhase: TicketPhase;
}) {
  const [step, setStep] = useState<WizardStep>(1);
  const [state, setState] = useState<CheckoutState>(() => initialCheckoutState(ticketType.people_per_ticket));
  const [order, setOrder] = useState<Order | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);

  function setQuantity(quantity: number) {
    setState((prev) => {
      const holderCount = quantity * ticketType.people_per_ticket;
      const holders = Array.from({ length: holderCount }, (_, i) => prev.holders[i] ?? EMPTY_HOLDER);
      return { ...prev, quantity, holders };
    });
  }

  /** Creates the real order (+ Midtrans Snap token) — only advances to Pembayaran on success. */
  async function handleConfirmAndPay() {
    setSubmitError(null);
    setIsSubmitting(true);

    try {
      const primaryHolder = state.holders[0];
      const res = await fetch("/api/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          event_id: event.id,
          items: [
            {
              ticket_phase_id: ticketPhase.id,
              quantity: state.quantity,
              holders: state.holders.map((h) => ({
                name: h.name,
                email: h.email,
                phone: h.phone,
                ktp: h.ktp,
                age: Number(h.age),
              })),
            },
          ],
          // Order-level "pemesan" contact — the first holder doubles as the
          // buyer of record (matches how the general checkout flow captures
          // a single order-level holder); each ticket's own identity is
          // still recorded individually via items[0].holders above.
          holder_name: primaryHolder.name,
          holder_email: primaryHolder.email,
          holder_phone: primaryHolder.phone,
          holder_ktp: primaryHolder.ktp,
          holder_age: Number(primaryHolder.age),
          accept_terms: state.termsAcceptedAt !== null,
          promo_code: state.promo?.code ?? null,
          voucher_code: state.voucher?.code ?? null,
        }),
      });

      const body = await res.json().catch(() => null);

      if (!res.ok) {
        const message =
          body?.errors?.midtrans?.[0] ??
          body?.errors?.items?.[0] ??
          body?.message ??
          "Failed to create order.";
        setSubmitError(message);
        return;
      }

      setOrder(body.data);
      setStep(4);
    } catch {
      setSubmitError("Unable to reach the server. Please check your connection and try again.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <div className="bg-signaturee-cream pb-16 font-signaturee-body">
      <Stepper current={step} />

      {step === 1 && (
        <StepTotalOrder
          event={event}
          ticketType={ticketType}
          ticketPhase={ticketPhase}
          quantity={state.quantity}
          onQuantityChange={setQuantity}
          promo={state.promo}
          voucher={state.voucher}
          onApplyPromo={(promo) => setState((prev) => ({ ...prev, promo }))}
          onRemovePromo={() => setState((prev) => ({ ...prev, promo: null }))}
          onApplyVoucher={(voucher) => setState((prev) => ({ ...prev, voucher }))}
          onRemoveVoucher={() => setState((prev) => ({ ...prev, voucher: null }))}
          quote={state.quote}
          onQuoteChange={(quote) => setState((prev) => ({ ...prev, quote }))}
          onNext={() => setStep(2)}
        />
      )}

      {step === 2 && (
        <StepHolderData
          holders={state.holders}
          peoplePerTicket={ticketType.people_per_ticket}
          onChange={(holders) => setState((prev) => ({ ...prev, holders }))}
          onBack={() => setStep(1)}
          onNext={() => setStep(3)}
        />
      )}

      {step === 3 && (
        <StepConfirmation
          event={event}
          ticketType={ticketType}
          ticketPhase={ticketPhase}
          state={state}
          onEditQuantity={() => setStep(1)}
          onEditHolders={() => setStep(2)}
          onTermsChange={(accepted) =>
            setState((prev) => ({ ...prev, termsAcceptedAt: accepted ? new Date().toISOString() : null }))
          }
          onBack={() => setStep(2)}
          onNext={handleConfirmAndPay}
          isSubmitting={isSubmitting}
          error={submitError}
        />
      )}

      {step === 4 && order && <StepPayment order={order} />}
    </div>
  );
}