import { type HolderData, isHolderValid } from "./types";

/**
 * KTP (Nomor Induk Kependudukan) is sensitive personal data. TODO once a
 * real order-creation endpoint is wired up: it must be encrypted at rest
 * server-side — never logged client-side (including analytics/error
 * reporting), and never sent anywhere except that endpoint over HTTPS.
 */
function HolderForm({
  label,
  holder,
  onChange,
}: {
  label: string;
  holder: HolderData;
  onChange: (holder: HolderData) => void;
}) {
  const emailValid = holder.email === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(holder.email);
  const phoneValid = holder.phone === "" || /^\d{8,15}$/.test(holder.phone);
  const ktpValid = holder.ktp === "" || /^\d{16}$/.test(holder.ktp);
  const ageValid = holder.age === "" || (/^\d+$/.test(holder.age) && Number(holder.age) >= 0);

  return (
    <div className="rounded-2xl bg-neutral-100 p-6">
      <p className="font-signaturee text-lg font-semibold text-signaturee-red">{label}</p>

      <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
        <label className="flex flex-col gap-1 text-sm font-medium">
          Full Name
          <input
            required
            value={holder.name}
            onChange={(e) => onChange({ ...holder, name: e.target.value })}
            className="min-h-11 rounded-lg border border-neutral-300 px-3 py-2"
          />
        </label>

        <label className="flex flex-col gap-1 text-sm font-medium">
          Email
          <input
            type="email"
            required
            value={holder.email}
            onChange={(e) => onChange({ ...holder, email: e.target.value })}
            className="min-h-11 rounded-lg border border-neutral-300 px-3 py-2"
          />
          {!emailValid && <span className="text-xs text-red-600">Invalid email format.</span>}
        </label>

        <label className="flex flex-col gap-1 text-sm font-medium">
          Phone Number
          <input
            required
            inputMode="numeric"
            value={holder.phone}
            onChange={(e) => onChange({ ...holder, phone: e.target.value })}
            className="min-h-11 rounded-lg border border-neutral-300 px-3 py-2"
          />
          {!phoneValid && <span className="text-xs text-red-600">Phone number must be numeric (8-15 digits).</span>}
        </label>

        <label className="flex flex-col gap-1 text-sm font-medium">
          National ID Number
          <input
            required
            inputMode="numeric"
            maxLength={16}
            value={holder.ktp}
            onChange={(e) => onChange({ ...holder, ktp: e.target.value })}
            className="min-h-11 rounded-lg border border-neutral-300 px-3 py-2"
          />
          {!ktpValid && <span className="text-xs text-red-600">National ID number must be 16 digits.</span>}
        </label>

        <label className="flex flex-col gap-1 text-sm font-medium">
          Age
          <input
            required
            inputMode="numeric"
            value={holder.age}
            onChange={(e) => onChange({ ...holder, age: e.target.value })}
            className="min-h-11 rounded-lg border border-neutral-300 px-3 py-2"
          />
          {!ageValid && <span className="text-xs text-red-600">Age must be a number.</span>}
        </label>
      </div>
    </div>
  );
}

export function StepHolderData({
  holders,
  peoplePerTicket,
  onChange,
  onBack,
  onNext,
}: {
  holders: HolderData[];
  /** 2 for package ticket types (e.g. "Piknik") — groups holders in pairs per ticket/QR unit. */
  peoplePerTicket: number;
  onChange: (holders: HolderData[]) => void;
  onBack: () => void;
  onNext: () => void;
}) {
  const allValid = holders.length > 0 && holders.every(isHolderValid);
  const ticketCount = holders.length / peoplePerTicket;

  function updateHolder(index: number, holder: HolderData) {
    const next = [...holders];
    next[index] = holder;
    onChange(next);
  }

  return (
    <div className="mx-auto max-w-3xl px-6 py-8">
      <div className="flex flex-col gap-6">
        {Array.from({ length: ticketCount }, (_, ticketIndex) => (
          <div key={ticketIndex} className="flex flex-col gap-4">
            {peoplePerTicket > 1 && (
              <p className="text-sm font-medium text-neutral-500">
                Ticket {ticketIndex + 1} &middot; 2-person package (1 QR shared by both)
              </p>
            )}
            {Array.from({ length: peoplePerTicket }, (_, personIndex) => {
              const i = ticketIndex * peoplePerTicket + personIndex;
              const label =
                peoplePerTicket > 1
                  ? `Ticket ${ticketIndex + 1} — Participant ${personIndex + 1}`
                  : `Personal Details ${ticketIndex + 1}`;

              return (
                <HolderForm key={i} label={label} holder={holders[i]} onChange={(h) => updateHolder(i, h)} />
              );
            })}
          </div>
        ))}
      </div>

      <div className="mt-6 flex justify-between">
        <button
          type="button"
          onClick={onBack}
          className="rounded-full border border-neutral-300 px-6 py-3 font-medium hover:bg-neutral-100"
        >
          Back
        </button>
        <button
          type="button"
          onClick={onNext}
          disabled={!allValid}
          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"
        >
          Continue
        </button>
      </div>
    </div>
  );
}