import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { Link } from "@tanstack/react-router";
import { useLang, type T } from "@/lib/i18n";
import { useAuth } from "@/lib/auth-context";
import { supabase } from "@/integrations/supabase/client";
import { FIELDS } from "@/lib/fields";
import {
  APPLY_AS,
  CONSENTS,
  DISTRICTS,
  EMPTY,
  GENDERS,
  NOT_A_SELECTION,
  QUESTIONS,
  STEPS,
  SUCCESS_TEXT,
  UPLOAD_NOTE,
  type NomData,
} from "@/lib/nomination-form";
import f1 from "@/assets/field-01.jpg";
import f2 from "@/assets/field-02.jpg";
import f3 from "@/assets/field-03.jpg";
import f4 from "@/assets/field-04.jpg";
import f5 from "@/assets/field-05.jpg";
import f6 from "@/assets/field-06.jpg";
import f7 from "@/assets/field-07.jpg";
import f8 from "@/assets/field-08.jpg";
import f9 from "@/assets/field-09.jpg";
import f10 from "@/assets/field-10.jpg";

const FIELD_PICS = [f1, f2, f3, f4, f5, f6, f7, f8, f9, f10];

const input =
  "mt-2 w-full rounded-sm border border-input bg-ink/60 px-4 py-3.5 text-base text-foreground outline-none transition-colors focus:border-gold focus:ring-1 focus:ring-gold";

const REQ: T = { si: "මෙම තොරතුර අවශ්‍යයි", en: "This information is required" };

function Label({ text, required }: { text: string; required?: boolean | undefined }) {
  return (
    <span className="text-sm text-foreground">
      {text}
      {required && <span className="text-gold"> *</span>}
    </span>
  );
}

function Field({
  name,
  label,
  value,
  onChange,
  type = "text",
  required,
  error,
  placeholder,
  inputMode,
}: {
  name: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  type?: string;
  required?: boolean | undefined;
  error?: T | undefined;
  placeholder?: string;
  inputMode?: "text" | "numeric" | "tel" | "email";
}) {
  const { t } = useLang();
  return (
    <label className="block">
      <Label text={label} required={required} />
      <input
        name={name}
        type={type}
        inputMode={inputMode}
        value={value}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        className={input}
        aria-invalid={error ? true : undefined}
      />
      {error && <span className="mt-1.5 block text-sm text-gold">{t(error)}</span>}
    </label>
  );
}

function Area({
  name,
  label,
  hint,
  value,
  onChange,
  required,
  error,
  rows = 6,
}: {
  name: string;
  label: string;
  hint?: string;
  value: string;
  onChange: (v: string) => void;
  required?: boolean | undefined;
  error?: T | undefined;
  rows?: number;
}) {
  const { t } = useLang();
  return (
    <label className="block">
      <Label text={label} required={required} />
      {hint && <span className="mt-1 block text-sm italic text-muted-foreground">{hint}</span>}
      <textarea
        name={name}
        rows={rows}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={`${input} leading-relaxed`}
        aria-invalid={error ? true : undefined}
      />
      {error && <span className="mt-1.5 block text-sm text-gold">{t(error)}</span>}
    </label>
  );
}

function Sel({
  name,
  label,
  value,
  onChange,
  options,
  required,
  error,
}: {
  name: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  options: { value: string; label: string }[];
  required?: boolean | undefined;
  error?: T | undefined;
}) {
  const { t } = useLang();
  return (
    <label className="block">
      <Label text={label} required={required} />
      <select name={name} value={value} onChange={(e) => onChange(e.target.value)} className={input}>
        <option value="">—</option>
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
      {error && <span className="mt-1.5 block text-sm text-gold">{t(error)}</span>}
    </label>
  );
}

function Panel({ children }: { children: ReactNode }) {
  return <div className="gold-frame space-y-5 bg-card/30 p-6">{children}</div>;
}

function Progress({ step, onJump, maxReached }: { step: number; onJump: (n: number) => void; maxReached: number }) {
  const { t } = useLang();
  return (
    <ol className="flex flex-wrap items-stretch gap-2" aria-label="Steps">
      {STEPS.map((s, i) => {
        const n = i + 1;
        const done = n < step;
        const now = n === step;
        const openable = n <= maxReached;
        return (
          <li key={n} className="min-w-0 flex-1">
            <button
              type="button"
              onClick={() => openable && onJump(n)}
              disabled={!openable}
              aria-current={now ? "step" : undefined}
              className={`nav-emboss flex h-full w-full flex-col items-center justify-center gap-1 rounded-sm px-2 py-3 text-center transition-all ${now ? "nav-emboss-active" : ""} ${openable ? "cursor-pointer" : "cursor-not-allowed opacity-60"}`}
            >
              <span className={`font-display text-lg leading-none ${done || now ? "text-gold" : "text-white/70"}`}>
                {String(n).padStart(2, "0")}
              </span>
              <span className="whitespace-nowrap text-[0.7rem] text-white sm:text-xs">{t(s.short)}</span>
            </button>
          </li>
        );
      })}
    </ol>
  );
}

type FileRow = { path: string; name: string; size: number };

export function NominationWizard() {
  const { t } = useLang();
  const { session, signedIn } = useAuth();
  const uid = session?.user.id ?? null;

  const [step, setStep] = useState(1);
  const [maxReached, setMaxReached] = useState(1);
  const [data, setData] = useState<NomData>(EMPTY);
  const [errors, setErrors] = useState<Record<string, T>>({});
  const [busy, setBusy] = useState(false);
  const [failed, setFailed] = useState(false);
  const [ref, setRef] = useState("");
  const [dupRef, setDupRef] = useState("");
  const [files, setFiles] = useState<FileRow[]>([]);
  const [draftNote, setDraftNote] = useState("");
  const topRef = useRef<HTMLDivElement>(null);
  const loadedFor = useRef<string | null>(null);

  const set = <K extends keyof NomData>(k: K, v: NomData[K]) => setData((d) => ({ ...d, [k]: v }));
  const go = (n: number) => {
    setStep(n);
    setMaxReached((m) => Math.max(m, n));
    setErrors({});
    topRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // Restore an in-progress draft once, for the signed-in account.
  useEffect(() => {
    if (!uid || loadedFor.current === uid) return;
    loadedFor.current = uid;
    void (async () => {
      const { data: row } = await supabase
        .from("nomination_drafts")
        .select("payload, step")
        .eq("created_by", uid)
        .maybeSingle();
      if (!row) return;
      const p = (row.payload ?? {}) as Partial<NomData>;
      setData({ ...EMPTY, ...p });
      const s = Math.min(Math.max(Number(row.step ?? 1), 1), 6);
      setStep(s);
      setMaxReached((m) => Math.max(m, s));
      setDraftNote(t({ si: "ඔබගේ කෙටුමත සුරැකිණි — එය නැවත ලබාගන්නා ලදී.", en: "Your saved draft was restored." }));
    })();
  }, [uid, t]);

  const validate = (n: number): Record<string, T> => {
    const e: Record<string, T> = {};
    if (n === 1) {
      if (!data.apply_as) e["apply_as"] = REQ;
      if (!data.category) e["category"] = REQ;
    }
    if (n === 2) {
      if (!data.nominee_name.trim()) e["nominee_name"] = REQ;
      const by = Number(data.birth_year);
      if (!data.birth_year.trim()) e["birth_year"] = REQ;
      else if (!Number.isInteger(by) || by < 1900 || by > new Date().getFullYear())
        e["birth_year"] = { si: "වලංගු උපන් වර්ෂයක් ඇතුළත් කරනු", en: "Enter a valid birth year" };
      if (!data.address.trim()) e["address"] = REQ;
      if (!data.district) e["district"] = REQ;
      if (!data.nominee_contact.trim()) e["nominee_contact"] = REQ;
      if (data.nominee_email.trim() && !/^\S+@\S+\.\S+$/.test(data.nominee_email.trim()))
        e["nominee_email"] = { si: "වලංගු ඊමේල් ලිපිනයක් ඇතුළත් කරනු", en: "Enter a valid email address" };
    }
    if (n === 3) {
      for (const q of QUESTIONS) {
        const v = String(data[q.key] ?? "").trim();
        if (q.required && v.length < q.min)
          e[q.key] =
            v.length === 0
              ? REQ
              : { si: `කරුණාකර අවම අකුරු ${q.min}ක වැඩි පිළිතුරක් ලබා දෙනු`, en: `Please give an answer of at least ${q.min} characters` };
      }
    }
    if (n === 4) {
      if (!data.referrer1_name.trim()) e["referrer1_name"] = REQ;
      if (!data.referrer1_phone.trim()) e["referrer1_phone"] = REQ;
      if (data.referrer2_name.trim() && !data.referrer2_phone.trim())
        e["referrer2_phone"] = { si: "දෙවන සාක්ෂිකරුගේ දුරකථන අංකයද ලබා දෙනු", en: "Please also give the second referee's phone number" };
    }
    if (n === 5) {
      if (!data.nominator_name.trim()) e["nominator_name"] = REQ;
      if (!data.nominator_phone.trim()) e["nominator_phone"] = REQ;
      else if (!/^[0-9+\-\s()]{5,30}$/.test(data.nominator_phone.trim()))
        e["nominator_phone"] = { si: "වලංගු දුරකථන අංකයක් ඇතුළත් කරනු", en: "Enter a valid phone number" };
      if (data.nominator_email.trim() && !/^\S+@\S+\.\S+$/.test(data.nominator_email.trim()))
        e["nominator_email"] = { si: "වලංගු ඊමේල් ලිපිනයක් ඇතුළත් කරනු", en: "Enter a valid email address" };
      if (!data.consent_truth) e["consent_truth"] = REQ;
      if (!data.consent_privacy) e["consent_privacy"] = REQ;
      if (!data.consent_permission && !data.permission_pending)
        e["consent_permission"] = {
          si: "අවසරය ලබාගෙන තිබේද යනු සටහන් කරනු — තවම නොමැති නම් එය පැහැදිලිව සටහන් කරනු",
          en: "Say whether permission has been obtained — if not yet, mark that clearly",
        };
    }
    return e;
  };

  const next = () => {
    const e = validate(step);
    setErrors(e);
    setFailed(false);
    if (Object.keys(e).length === 0) go(step + 1);
  };

  const saveDraft = async () => {
    if (!uid) return;
    setBusy(true);
    setDraftNote("");
    const { error } = await supabase
      .from("nomination_drafts")
      .upsert({ created_by: uid, payload: data, step }, { onConflict: "created_by" });
    setBusy(false);
    setDraftNote(
      error
        ? t({ si: "කෙටුමත සුරැකීම අසාර්ථක විය.", en: "The draft could not be saved." })
        : t({ si: "ඔබගේ කෙටුමත සුරැකිණි. පසුව නැවත පැමිණ දිගටම කරනු.", en: "Your draft is saved. Come back later to continue." }),
    );
  };

  const onFiles = async (list: FileList | null) => {
    if (!uid || !list || !list.length) return;
    setBusy(true);
    for (const file of Array.from(list)) {
      const ok = ["image/jpeg", "image/png", "image/webp", "application/pdf"].includes(file.type);
      if (!ok || file.size > 10 * 1024 * 1024) continue;
      const ext = (file.name.split(".").pop() ?? "").toLowerCase();
      const path = `${uid}/${crypto.randomUUID()}-${Date.now()}.${ext}`;
      const up = await supabase.storage.from("nomination-evidence").upload(path, file, { contentType: file.type, upsert: false });
      if (up.error) continue;
      const ins = await supabase
        .from("nomination_evidence")
        .insert({ created_by: uid, storage_path: path, file_name: file.name.slice(0, 200), mime_type: file.type, byte_size: file.size });
      if (!ins.error) setFiles((f) => [...f, { path, name: file.name, size: file.size }]);
    }
    setBusy(false);
  };

  const removeFile = async (path: string) => {
    if (!uid) return;
    await supabase.storage.from("nomination-evidence").remove([path]);
    await supabase.from("nomination_evidence").delete().eq("created_by", uid).eq("storage_path", path);
    setFiles((f) => f.filter((x) => x.path !== path));
  };

  const submit = async () => {
    const e = { ...validate(1), ...validate(2), ...validate(3), ...validate(4), ...validate(5) };
    setErrors(e);
    setFailed(false);
    if (Object.keys(e).length) {
      go(1);
      return;
    }
    setBusy(true);
    const by = Number(data.birth_year);
    const nowYear = new Date().getFullYear();
    const desc = [
      [t({ si: "ජීවන කතාව", en: "Life story" }), data.story_life],
      [t({ si: "ප්‍රධාන සේවාවන්", en: "Main services" }), data.story_service],
      [t({ si: "සමාජයට වූ යහපත් වෙනස", en: "Benefit to society" }), data.story_impact],
      [t({ si: "අභියෝග සහ කැපවීම", en: "Challenges and dedication" }), data.story_challenges],
      [t({ si: "අනාගත පරපුරට ආදර්ශය", en: "Example to future generations" }), data.story_example],
      [t({ si: "සුදුසුකම", en: "Why this person" }), data.story_why],
      [t({ si: "අමතක නොවන සිදුවීම", en: "An unforgettable moment" }), data.story_moment],
    ]
      .filter(([, v]) => String(v).trim())
      .map(([h, v]) => `${h}: ${v}`)
      .join("\n\n");
    const { data: res, error } = await supabase.rpc("submit_nomination_full", {
      p: {
        lang: t({ si: "si", en: "en" }) === "si" ? "si" : "en",
        apply_as: data.apply_as,
        category: data.category,
        secondary_fields: data.secondary_fields,
        nominee_name: data.nominee_name.trim(),
        nominee_common_name: data.nominee_common_name.trim(),
        birth_year: data.birth_year.trim(),
        age: String(by >= 1900 ? Math.min(120, Math.max(0, nowYear - by)) : 0),
        gender: data.gender,
        address: data.address.trim(),
        district: data.district,
        secretariat: data.secretariat.trim(),
        nominee_contact: data.nominee_contact.trim(),
        nominee_email: data.nominee_email.trim(),
        profession: data.profession.trim(),
        organisation: data.organisation.trim(),
        service_period: data.service_period.trim(),
        years: "0",
        service_years_note: data.service_period.trim(),
        description: desc,
        story_life: data.story_life.trim(),
        story_service: data.story_service.trim(),
        story_impact: data.story_impact.trim(),
        story_challenges: data.story_challenges.trim(),
        story_example: data.story_example.trim(),
        story_why: data.story_why.trim(),
        story_moment: data.story_moment.trim(),
        referrer1_name: data.referrer1_name.trim(),
        referrer1_role: data.referrer1_role.trim(),
        referrer1_phone: data.referrer1_phone.trim(),
        referrer2_name: data.referrer2_name.trim(),
        referrer2_role: data.referrer2_role.trim(),
        referrer2_phone: data.referrer2_phone.trim(),
        nominator_name: data.nominator_name.trim(),
        nominator_address: data.nominator_address.trim(),
        nominator_phone: data.nominator_phone.trim(),
        nominator_email: data.nominator_email.trim(),
        nominator_relation: data.nominator_relation.trim(),
        nominator_knowledge: data.nominator_knowledge.trim(),
        consent_truth: data.consent_truth,
        consent_permission: data.consent_permission,
        consent_privacy: data.consent_privacy,
        permission_pending: data.permission_pending,
      },
    });
    setBusy(false);
    if (error || !res) {
      const msg = String(error?.message ?? "");
      if (msg.startsWith("duplicate:")) setDupRef(msg.slice("duplicate:".length));
      else setFailed(true);
      return;
    }
    setRef(String(res));
    setFiles([]);
    setData(EMPTY);
    setStep(6);
    setMaxReached(6);
  };

  const fieldIdx = useMemo(() => FIELDS.findIndex((f) => f.name.en === data.category), [data.category]);
  const sel = fieldIdx >= 0 ? FIELDS[fieldIdx] : undefined;
  const toggleSecondary = (en: string) => {
    const cur = data.secondary_fields ? data.secondary_fields.split(",") : [];
    const i = cur.indexOf(en);
    if (i >= 0) cur.splice(i, 1);
    else cur.push(en);
    set("secondary_fields", cur.join(","));
  };

  const reviewGroups: { n: number; rows: { k: string; v: string; key: string }[] }[] = [
    {
      n: 1,
      rows: [
        { k: t({ si: "උතතමාචාර ක්ෂේතය", en: "Award field" }), v: sel ? t(sel.name) : "—", key: "category" },
        { k: t({ si: "සහාය ක්ෂේතර", en: "Supporting fields" }), v: data.secondary_fields || "—", key: "secondary" },
        {
          k: t({ si: "ඉදිරිපත කරනු ලබන්නේ", en: "Submitted as" }),
          v: data.apply_as ? t(APPLY_AS.find((a) => a.key === data.apply_as)?.label ?? { si: "—", en: "—" }) : "—",
          key: "apply_as",
        },
      ],
    },
    {
      n: 2,
      rows: [
        { k: t({ si: "සමපූර්ණ නම", en: "Full name" }), v: data.nominee_name, key: "nominee_name" },
        { k: t({ si: "උපන වර්ෂය", en: "Birth year" }), v: data.birth_year, key: "birth_year" },
        { k: t({ si: "දිසතකය", en: "District" }), v: data.district, key: "district" },
        { k: t({ si: "ලිපනය", en: "Address" }), v: data.address, key: "address" },
        { k: t({ si: "දුරකථන අංකය", en: "Phone" }), v: data.nominee_contact, key: "nominee_contact" },
      ],
    },
    {
      n: 3,
      rows: [
        { k: t({ si: "ජීවන කතාව", en: "Life story" }), v: data.story_life, key: "story_life" },
        { k: t({ si: "ප්‍රධාන සේවාවන", en: "Main services" }), v: data.story_service, key: "story_service" },
        { k: t({ si: "සමාජයට වූ යහපත", en: "Benefit to society" }), v: data.story_impact, key: "story_impact" },
        { k: t({ si: "අමතක නොවන සිදුවීම", en: "Unforgettable moment" }), v: data.story_moment, key: "story_moment" },
      ],
    },
    {
      n: 4,
      rows: [
        { k: t({ si: "සාකරු 1", en: "Referee 1" }), v: [data.referrer1_name, data.referrer1_phone].filter(Boolean).join(", "), key: "referrer1" },
        { k: t({ si: "සාකරු 2", en: "Referee 2" }), v: [data.referrer2_name, data.referrer2_phone].filter(Boolean).join(", "), key: "referrer2" },
        { k: t({ si: "උඩුගත ලේඛන", en: "Uploaded documents" }), v: files.map((f) => f.name).join(", "), key: "files" },
      ],
    },
    {
      n: 5,
      rows: [
        { k: t({ si: "ඔබේ නම", en: "Your name" }), v: data.nominator_name, key: "nominator_name" },
        { k: t({ si: "දුරකථන අංකය", en: "Phone" }), v: data.nominator_phone, key: "nominator_phone" },
        { k: t({ si: "ඊමේල ලිපිනය", en: "Email" }), v: data.nominator_email, key: "nominator_email" },
        { k: t({ si: "සමබනාධතාව", en: "Relationship" }), v: data.nominator_relation, key: "nominator_relation" },
        {
          k: t({ si: "අවසරය", en: "Permission" }),
          v: data.consent_permission
            ? t({ si: "ලබාගෙන ඇත", en: "Given" })
            : data.permission_pending
              ? t({ si: "තවම ලබාගෙන නැත", en: "Not yet obtained" })
              : "—",
          key: "permission",
        },
      ],
    },
  ];

  if (ref) {
    return (
      <div className="gold-frame mx-auto max-w-3xl bg-card/30 p-8 text-center md:p-12" data-testid="nomination-success">
        <div className="mx-auto h-12 w-12 rotate-45 border border-gold/60" aria-hidden />
        <h3 className="mt-6 font-display text-3xl text-gold">{t({ si: "නාමයෝජනාව භාරගන්නා ලදී", en: "Nomination received" })}</h3>
        <div className="gold-rule mx-auto mt-6 w-40" />
        <p className="mt-6 whitespace-pre-line text-lg leading-relaxed text-foreground">{t(SUCCESS_TEXT)}</p>
        <p className="mt-8 text-sm uppercase tracking-[0.2em] text-muted-foreground">
          {t({ si: "ඔබගේ යොමු අංකය", en: "Your reference number" })}
        </p>
        <p className="mt-2 font-mono text-3xl tracking-wider text-gold" data-testid="nomination-ref">
          {ref}
        </p>
        <p className="mt-3 text-sm text-muted-foreground">
          {t({ si: "කරුණාකර මෙම අංකය සටහන් කර තබා ගන්න.", en: "Please keep this number for your records." })}
        </p>
        <p className="mt-8 text-sm text-gold/80">{t(NOT_A_SELECTION)}</p>
        <button
          type="button"
          onClick={() => {
            setRef("");
            setStep(1);
            setMaxReached(1);
          }}
          className="mt-10 rounded-sm border border-gold px-6 py-3 text-sm text-gold transition-colors hover:bg-gold hover:text-ink"
        >
          {t({ si: "තවත් නාමයෝජනාවක් ඉදිරිපත් කරනු", en: "Submit another nomination" })}
        </button>
      </div>
    );
  }

  return (
    <div ref={topRef} className="mx-auto max-w-4xl space-y-8 scroll-mt-28">
      <Progress step={step} onJump={go} maxReached={maxReached} />

      <div className="gold-frame bg-card/30 p-6 md:p-8">
        <div className="flex items-baseline gap-4">
          <span className="font-display text-4xl text-gold/50">{String(step).padStart(2, "0")}</span>
          <div>
            <h3 className="font-display text-2xl text-gold md:text-3xl">{t(STEPS[step - 1]!.title)}</h3>
            <p className="mt-2 text-sm text-muted-foreground">{t(STEPS[step - 1]!.intro)}</p>
          </div>
        </div>

        <div className="mt-8 space-y-6">
          {step === 1 && (
            <>
              <div>
                <span className="text-sm text-foreground">
                  {t({ si: "අයදුම්පත ඉදිරිපත් කරන්නේ කවුරුන්ද?", en: "Who is submitting this application?" })}
                  <span className="text-gold"> *</span>
                </span>
                <div className="mt-3 grid gap-3 sm:grid-cols-3">
                  {APPLY_AS.map((a) => (
                    <button
                      key={a.key}
                      type="button"
                      onClick={() => set("apply_as", a.key)}
                      aria-pressed={data.apply_as === a.key}
                      className={`rounded-sm border px-4 py-4 text-center text-sm transition-colors ${data.apply_as === a.key ? "border-gold bg-gold/10 text-gold" : "border-input text-foreground hover:border-gold/60"}`}
                    >
                      {t(a.label)}
                    </button>
                  ))}
                </div>
                {errors["apply_as"] && <span className="mt-1.5 block text-sm text-gold">{t(errors["apply_as"])}</span>}
              </div>

              <div>
                <span className="text-sm text-foreground">
                  {t({ si: "උතතුමාචාර ක්ෂේත්‍රය තෝරනු (ප්‍රධාන ක්ෂේත්‍රය අනිවාර්යයි)", en: "Choose the award field (one primary field is required)" })}
                  <span className="text-gold"> *</span>
                </span>
                <div className="mt-3 grid gap-3 sm:grid-cols-2">
                  {FIELDS.map((f, i) => {
                    const pic = FIELD_PICS[i];
                    const on = data.category === f.name.en;
                    return (
                      <button
                        key={f.name.en}
                        type="button"
                        onClick={() => set("category", f.name.en)}
                        aria-pressed={on}
                        className={`group flex items-center gap-3 rounded-sm border p-2 text-left transition-colors ${on ? "border-gold bg-gold/10" : "border-input hover:border-gold/60"}`}
                      >
                        {pic && (
                          <span className="h-14 w-14 shrink-0 overflow-hidden rounded-sm">
                            <img src={pic} alt="" width={1024} height={768} loading="lazy" className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110" />
                          </span>
                        )}
                        <span className="min-w-0">
                          <span className="block font-display text-xs text-gold/60">{String(i + 1).padStart(2, "0")}</span>
                          <span className={`block truncate text-sm ${on ? "text-gold" : "text-white"}`}>{t(f.name)}</span>
                        </span>
                      </button>
                    );
                  })}
                </div>
                {errors["category"] && <span className="mt-1.5 block text-sm text-gold">{t(errors["category"])}</span>}
              </div>

              {sel && (
                <Panel>
                  <h4 className="font-display text-xl text-gold">{t(sel.name)}</h4>
                  <p className="text-sm text-foreground">{t(sel.tagline)}</p>
                  {sel.body.map((p, j) => (
                    <p key={j} className="text-sm leading-relaxed text-muted-foreground">
                      {t(p)}
                    </p>
                  ))}
                  <h5 className="pt-1 text-xs uppercase tracking-[0.2em] text-gold">{t({ si: "ඇගයීමේ නිර්ණායක", en: "Evaluation criteria" })}</h5>
                  <ul className="space-y-1.5">
                    {sel.criteria.map((c, j) => (
                      <li key={j} className="flex gap-3 text-sm text-muted-foreground">
                        <span className="mt-2 h-1.5 w-1.5 shrink-0 rotate-45 bg-gold" />
                        {t(c)}
                      </li>
                    ))}
                  </ul>
                </Panel>
              )}

              <div>
                <span className="text-sm text-foreground">
                  {t({ si: "අවශ්‍ය නම් සහායක ක්ෂේත්‍ර සළකුණු කරනු (විකල්පයි)", en: "Mark supporting fields if needed (optional)" })}
                </span>
                <div className="mt-3 flex flex-wrap gap-2">
                  {FIELDS.map((f) => {
                    const on = data.secondary_fields.split(",").includes(f.name.en);
                    return (
                      <button
                        key={f.name.en}
                        type="button"
                        onClick={() => toggleSecondary(f.name.en)}
                        aria-pressed={on}
                        disabled={data.category === f.name.en}
                        className={`rounded-full border px-4 py-2 text-xs transition-colors disabled:opacity-40 ${on ? "border-gold bg-gold/10 text-gold" : "border-input text-muted-foreground hover:border-gold/60"}`}
                      >
                        {t(f.name)}
                      </button>
                    );
                  })}
                </div>
              </div>
            </>
          )}

          {step === 2 && (
            <div className="space-y-5">
              <div className="grid gap-5 md:grid-cols-2">
                <Field name="nominee_name" label={t({ si: "සම්පූර්ණ නම", en: "Full name" })} value={data.nominee_name} onChange={(v) => set("nominee_name", v)} required error={errors["nominee_name"]} />
                <Field name="nominee_common_name" label={t({ si: "සාමාන්‍යයෙන් භාවිත කරන නම", en: "Name usually used" })} value={data.nominee_common_name} onChange={(v) => set("nominee_common_name", v)} />
                <Field name="birth_year" label={t({ si: "උපන් වර්ෂය", en: "Birth year" })} value={data.birth_year} onChange={(v) => set("birth_year", v.replace(/[^0-9]/g, "").slice(0, 4))} required inputMode="numeric" placeholder="1952" error={errors["birth_year"]} />
                <Sel name="gender" label={t({ si: "ස්ත්‍රී පුරුෂ භාවය", en: "Gender" })} value={data.gender} onChange={(v) => set("gender", v)} options={GENDERS.map((g, i) => ({ value: String(i), label: t(g) }))} />
              </div>
              <Area name="address" label={t({ si: "ස්ථිර ලිපිනය", en: "Permanent address" })} value={data.address} onChange={(v) => set("address", v)} required rows={3} error={errors["address"]} />
              <div className="grid gap-5 md:grid-cols-2">
                <Sel name="district" label={t({ si: "දිස්ත්‍රික්කය", en: "District" })} value={data.district} onChange={(v) => set("district", v)} required error={errors["district"]} options={DISTRICTS.map((d) => ({ value: d.en, label: t(d) }))} />
                <Field name="secretariat" label={t({ si: "ප්‍රාදේශීය ලේකම් කොට්ඨාසය", en: "Divisional secretariat" })} value={data.secretariat} onChange={(v) => set("secretariat", v)} />
                <Field name="nominee_contact" label={t({ si: "දුරකථන අංකය", en: "Phone number" })} value={data.nominee_contact} onChange={(v) => set("nominee_contact", v)} required inputMode="tel" error={errors["nominee_contact"]} />
                <Field name="nominee_email" label={t({ si: "ඊමේල් ලිපිනය — තිබේ නම්", en: "Email address — if any" })} value={data.nominee_email} onChange={(v) => set("nominee_email", v)} inputMode="email" error={errors["nominee_email"]} />
                <Field name="profession" label={t({ si: "වර්තමාන හෝ පෙර වෘත්තිය", en: "Current or former profession" })} value={data.profession} onChange={(v) => set("profession", v)} />
                <Field name="organisation" label={t({ si: "සේවය කළ ප්‍රධාන ආයතනය හෝ සංවිධානය", en: "Main institution or organisation served" })} value={data.organisation} onChange={(v) => set("organisation", v)} />
              </div>
              <Field name="service_period" label={t({ si: "සමාජ සේවයේ නියැළුණු කාලය", en: "Period spent in social service" })} value={data.service_period} onChange={(v) => set("service_period", v)} placeholder="1985 – 2010" />
            </div>
          )}

          {step === 3 && (
            <div className="space-y-6">
              {QUESTIONS.map((q) => (
                <Area
                  key={q.key}
                  name={q.key}
                  label={t(q.q)}
                  hint={t(q.hint)}
                  value={String(data[q.key] ?? "")}
                  onChange={(v) => set(q.key, v as NomData[typeof q.key])}
                  required={q.required}
                  error={errors[q.key]}
                  rows={q.key === "story_life" || q.key === "story_service" ? 8 : 5}
                />
              ))}
              <p className="text-sm italic text-gold/80">
                {t({ si: "ඔබ ලබා නොදුන් ජයග්‍රහණ, සේවාවන් හෝ සිදුවීම් කෘත්‍රිම බුද්ධිය මගින් නිර්මාණය කර නොලබනු.", en: "Achievements, services or events you have not mentioned will not be invented for you." })}
              </p>
            </div>
          )}

          {step === 4 && (
            <div className="space-y-6">
              {uid ? (
                <Panel>
                  <span className="text-sm text-foreground">{t({ si: "සාක්ෂි ලේඛන උඩුගත කරනු (විකල්පයි)", en: "Upload supporting documents (optional)" })}</span>
                  <p className="text-sm text-muted-foreground">{t(UPLOAD_NOTE)}</p>
                  <input type="file" accept=".jpg,.jpeg,.png,.webp,.pdf" multiple onChange={(e) => void onFiles(e.target.files)} className="block w-full text-sm text-muted-foreground file:mr-4 file:rounded-sm file:border-0 file:bg-gold file:px-4 file:py-2 file:text-sm file:text-ink" />
                  {files.length > 0 && (
                    <ul className="space-y-2">
                      {files.map((f) => (
                        <li key={f.path} className="flex items-center justify-between gap-3 rounded-sm border border-input px-3 py-2 text-sm">
                          <span className="min-w-0 truncate text-foreground">{f.name}</span>
                          <button type="button" onClick={() => void removeFile(f.path)} className="shrink-0 text-xs text-gold hover:underline">
                            {t({ si: "ඉවත් කරනු", en: "Remove" })}
                          </button>
                        </li>
                      ))}
                    </ul>
                  )}
                </Panel>
              ) : (
                <Panel>
                  <p className="text-sm text-foreground">
                    {t({ si: "ලේඛන උඩුගත කිරීමට ඔබේ ගිණුමෙන් ඇතුළු විය යුතුය.", en: "Sign in to your account to upload documents." })}
                  </p>
                  <Link to="/auth" className="glow inline-block rounded-sm border border-gold px-5 py-2.5 text-sm text-gold transition-colors hover:bg-gold hover:text-ink">
                    {t({ si: "ගිණුමෙන් ඇතුළු වනු", en: "Sign in" })}
                  </Link>
                  <p className="text-sm text-muted-foreground">
                    {t({ si: "නැතහොත් මුද්‍රණ පෝරමය සමඟ ලේඛන තැපෑලෙන් එවනු.", en: "Or send the documents by post with the printed form." })}
                  </p>
                </Panel>
              )}

              <div className="grid gap-5 md:grid-cols-3">
                <Field name="referrer1_name" label={t({ si: "පළමු සාක්ෂිකරුගේ නම", en: "First referee's name" })} value={data.referrer1_name} onChange={(v) => set("referrer1_name", v)} required error={errors["referrer1_name"]} />
                <Field name="referrer1_role" label={t({ si: "තනතුර හෝ සම්බන්ධතාව", en: "Position or relationship" })} value={data.referrer1_role} onChange={(v) => set("referrer1_role", v)} />
                <Field name="referrer1_phone" label={t({ si: "දුරකථන අංකය", en: "Phone number" })} value={data.referrer1_phone} onChange={(v) => set("referrer1_phone", v)} required inputMode="tel" error={errors["referrer1_phone"]} />
              </div>
              <div className="grid gap-5 md:grid-cols-3">
                <Field name="referrer2_name" label={t({ si: "දෙවන සාක්ෂිකරුගේ නම", en: "Second referee's name" })} value={data.referrer2_name} onChange={(v) => set("referrer2_name", v)} />
                <Field name="referrer2_role" label={t({ si: "තනතුර හෝ සම්බන්ධතාව", en: "Position or relationship" })} value={data.referrer2_role} onChange={(v) => set("referrer2_role", v)} />
                <Field name="referrer2_phone" label={t({ si: "දුරකථන අංකය", en: "Phone number" })} value={data.referrer2_phone} onChange={(v) => set("referrer2_phone", v)} inputMode="tel" error={errors["referrer2_phone"]} />
              </div>
              <p className="text-sm italic text-gold/80">
                {t({ si: "මෙම පුද්ගලයින්ගේ තොරතුරු ලබාදීමට පෙර ඔවුන්ගේ අවසරය ලබාගන්නා ලෙස කරුණාකර ඉල්ලා සිටිමු.", en: "Please ask these people for their permission before giving their details." })}
              </p>
            </div>
          )}

          {step === 5 && (
            <div className="space-y-6">
              <div className="grid gap-5 md:grid-cols-2">
                <Field name="nominator_name" label={t({ si: "ඔබේ සම්පූර්ණ නම", en: "Your full name" })} value={data.nominator_name} onChange={(v) => set("nominator_name", v)} required error={errors["nominator_name"]} />
                <Field name="nominator_relation" label={t({ si: "නාමයෝජිත පුද්ගලයා සමඟ ඔබේ සම්බන්ධතාව", en: "Your relationship to the nominated person" })} value={data.nominator_relation} onChange={(v) => set("nominator_relation", v)} />
                <Field name="nominator_phone" label={t({ si: "දුරකථන අංකය", en: "Phone number" })} value={data.nominator_phone} onChange={(v) => set("nominator_phone", v)} required inputMode="tel" error={errors["nominator_phone"]} />
                <Field name="nominator_email" label={t({ si: "ඊමේල් ලිපිනය — තිබේ නම්", en: "Email address — if any" })} value={data.nominator_email} onChange={(v) => set("nominator_email", v)} inputMode="email" error={errors["nominator_email"]} />
              </div>
              <Area name="nominator_address" label={t({ si: "ඔබේ ලිපිනය", en: "Your address" })} value={data.nominator_address} onChange={(v) => set("nominator_address", v)} rows={3} />
              <Area name="nominator_knowledge" label={t({ si: "එම පුද්ගලයාගේ සේවය පිළිබඳ ඔබ දැනුවත් වූ ආකාරය", en: "How you came to know of this person's service" })} value={data.nominator_knowledge} onChange={(v) => set("nominator_knowledge", v)} rows={4} />

              <Panel>
                <span className="text-sm text-foreground">{t({ si: "සත්‍යතාව සහ අවසරය", en: "Truthfulness and permission" })}</span>
                {CONSENTS.map((c) => (
                  <label key={c.key} className="flex items-start gap-3 text-sm text-muted-foreground">
                    <input
                      type="checkbox"
                      checked={Boolean(data[c.key])}
                      onChange={(e) => set(c.key, e.target.checked as NomData[typeof c.key])}
                      className="mt-1 h-5 w-5 shrink-0 accent-gold"
                    />
                    <span>
                      {t(c.label)}
                      {c.required && <span className="text-gold"> *</span>}
                    </span>
                  </label>
                ))}
                {(errors["consent_truth"] || errors["consent_privacy"] || errors["consent_permission"]) && (
                  <span className="block text-sm text-gold">
                    {t(errors["consent_truth"] ?? errors["consent_privacy"] ?? errors["consent_permission"] ?? REQ)}
                  </span>
                )}
                <p className="text-sm text-muted-foreground">
                  {t({ si: "අවසරය ලබාගැනීමට පෙර එම පුද්ගලයාගේ ඡායාරූප, ජීවන කතාව හෝ පෞද්ගලික තොරතුරු ප්‍රසිද්ධ නොකරමු. ප්‍රසිද්ධ කිරීම සඳහා වෙනම පැහැදිලි අවසරයක් ලබාගනිමු.", en: "Before permission is given, that person's photo, life story or personal details are not published. A separate, clear permission is taken before anything is published." })}
                </p>
              </Panel>
            </div>
          )}

          {step === 6 && (
            <div className="space-y-4">
              {reviewGroups.map((g) => (
                <div key={g.n} className="gold-frame bg-card/30 p-5">
                  <div className="flex items-center justify-between gap-4">
                    <h4 className="font-display text-lg text-gold">{t(STEPS[g.n - 1]!.title)}</h4>
                    <button type="button" onClick={() => go(g.n)} className="shrink-0 text-sm text-gold hover:underline">
                      {t({ si: "සංස්කරණය කරනු", en: "Edit" })}
                    </button>
                  </div>
                  <dl className="mt-3 space-y-1.5 text-sm">
                    {g.rows.map((r) => (
                      <div key={r.key} className="flex flex-wrap gap-x-3">
                        <dt className="text-muted-foreground">{r.k}:</dt>
                        <dd className="min-w-0 flex-1 text-foreground">{r.v.length > 120 ? `${r.v.slice(0, 120)}…` : r.v || "—"}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              ))}
              {files.length > 0 && (
                <p className="text-sm text-muted-foreground">
                  {t({ si: "උඩුගත කළ ලේඛන", en: "Uploaded documents" })}: {files.map((f) => f.name).join(", ")}
                </p>
              )}
            </div>
          )}
        </div>
      </div>

      {draftNote && <p className="text-center text-sm text-gold">{draftNote}</p>}
      {dupRef && (
        <div className="gold-frame bg-card/30 p-5 text-center text-sm text-gold">
          {t({ si: "මෙම නාමයෝජනාව ඔස්සේම නාමයෝජනාවක් පසුගිය පැය 24 තුළ භාරගෙන ඇත. යොමු අංකය:", en: "An identical nomination was accepted in the last 24 hours. Reference:" })}{" "}
          <strong className="font-mono">{dupRef}</strong>
        </div>
      )}
      {failed && (
        <div className="gold-frame bg-card/30 p-5 text-center text-sm text-gold">
          {t({ si: "ඉදිරිපත් කිරීම අසාර්ථක විය. කරුණාකර නැවත උත්සාහ කරනු.", en: "The submission failed. Please try again." })}
        </div>
      )}

      <div className="flex flex-wrap items-center gap-3">
        {step > 1 && (
          <button type="button" onClick={() => go(step - 1)} className="rounded-sm border border-input px-6 py-3 text-sm text-foreground transition-colors hover:border-gold hover:text-gold">
            {t({ si: "ආපසු", en: "Back" })}
          </button>
        )}
        {signedIn && (
          <button type="button" onClick={() => void saveDraft()} disabled={busy} className="rounded-sm border border-gold/60 px-6 py-3 text-sm text-gold transition-colors hover:bg-gold/10 disabled:opacity-60">
            {t({ si: "කෙටුම්පත සුරකිනු", en: "Save draft" })}
          </button>
        )}
        {step < 6 && (
          <button type="button" onClick={next} className="glow ml-auto rounded-sm bg-gold px-8 py-3.5 text-sm font-semibold text-ink transition-colors hover:bg-gold/90">
            {t({ si: "ඊළඟ පියවර", en: "Next step" })}
          </button>
        )}
        {step === 6 && (
          <button type="button" onClick={() => void submit()} disabled={busy} className="glow ml-auto rounded-sm bg-gold px-8 py-3.5 text-sm font-semibold text-ink transition-colors hover:bg-gold/90 disabled:opacity-60">
            {busy ? "…" : t({ si: "නාමයෝජනාව ඉදිරිපත් කරනු", en: "Submit nomination" })}
          </button>
        )}
      </div>
    </div>
  );
}