/* ============================================================
   HUB · APPLICANTS — dancer applications pending approval.
   Checklist per applicant: 1) ID verified · 2) contract signed ·
   3) audition passed. BOTH a manager and the owner (master) must
   sign off before approval. Synced via PPDB.applicants.
   ============================================================ */
function useApplicants() {
  const [list, setList] = useState(() => window.PPDB.applicants.all());
  useEffect(() => {
    const f = () => setList(window.PPDB.applicants.all());
    window.addEventListener("pp:applicants", f);
    return () => window.removeEventListener("pp:applicants", f);
  }, []);
  return list;
}

function ApplicantsModule({ sess }) {
  const t = useT(); const { lang } = useLang();
  const list = useApplicants();
  const [filter, setFilter] = useState("pending");
  const [open, setOpen] = useState(null);
  const me = sess || { name: "Admin", role: "master" };
  const isOwner = me.role === "master";
  const isManager = me.role === "manager" || isOwner;

  const ST = {
    pending: { l: t("Pending", "Pendiente"), c: "#FF6B5B" },
    approved: { l: t("Approved", "Aprobada"), c: "#5FBFA8" },
    rejected: { l: t("Rejected", "Rechazada"), c: "#777" },
  };
  const DAY_L = { mon: t("Mon", "Lun"), tue: t("Tue", "Mar"), wed: t("Wed", "Mié"), thu: t("Thu", "Jue"), fri: t("Fri", "Vie"), sat: t("Sat", "Sáb"), sun: t("Sun", "Dom") };
  const filtered = list.filter((a) => filter === "all" || (a.status || "pending") === filter);
  const counts = { pending: list.filter((a) => (a.status || "pending") === "pending").length, approved: list.filter((a) => a.status === "approved").length, rejected: list.filter((a) => a.status === "rejected").length, all: list.length };
  const fmt = (iso) => { try { return new Date(iso).toLocaleDateString(lang === "es" ? "es" : "en", { month: "short", day: "numeric", year: "numeric" }); } catch (e) { return ""; } };

  const setCheck = (a, key, val) => window.PPDB.applicants.update(a.id, { checklist: { ...(a.checklist || {}), [key]: val } });
  const signOff = (a, who) => {
    window.PPDB.applicants.update(a.id, { approvals: { ...(a.approvals || {}), [who]: { name: me.name, at: new Date().toISOString() } } });
    window.toast(t("Sign-off recorded.", "Visto bueno registrado."));
  };
  const ready = (a) => {
    const c = a.checklist || {};
    return c.idVerified && c.contractSigned && c.auditionPassed && a.approvals && a.approvals.manager && a.approvals.owner;
  };
  const approve = (a) => { window.PPDB.applicants.update(a.id, { status: "approved" }); window.toast(t("Approved — welcome to the cast! 🎉", "Aprobada — ¡bienvenida al elenco! 🎉")); };
  const reject = (a) => { if (confirm(t("Reject this application?", "¿Rechazar esta aplicación?"))) { window.PPDB.applicants.update(a.id, { status: "rejected" }); } };

  const CHECKS = [
    ["idVerified", t("1 · Valid ID verified", "1 · ID válido verificado"), "credit-card"],
    ["contractSigned", t("2 · Contract signed", "2 · Contrato firmado"), "pen-line"],
    ["auditionPassed", t("3 · Audition passed", "3 · Audición aprobada"), "sparkles"],
  ];

  return (
    <div>
      <div className="rounded-2xl border border-gold/25 bg-gold/5 p-4 mb-5 flex items-center gap-3"><Icon name="shield-check" className="w-5 h-5 text-gold-soft shrink-0" /><p className="text-white/65 text-sm">{t("An applicant is approved only with the full checklist (ID · signed contract · audition) AND sign-off from both a manager and the owner.", "Una aspirante se aprueba solo con el checklist completo (ID · contrato firmado · audición) Y el visto bueno de un gerente y del dueño.")}</p></div>

      <div className="flex flex-wrap gap-2 mb-5">
        {[["pending", ST.pending.l], ["approved", ST.approved.l], ["rejected", ST.rejected.l], ["all", t("All", "Todas")]].map(([id, lbl]) => (
          <button key={id} onClick={() => setFilter(id)} className={"px-4 py-2 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all " + (filter === id ? "bg-coral text-white" : "bg-card border border-white/12 text-white/60 hover:text-white")}>{lbl} <span className="opacity-60">· {counts[id]}</span></button>
        ))}
      </div>

      {filtered.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-white/15 p-10 text-center text-white/45 text-sm">
          <Icon name="sparkles" className="w-8 h-8 mx-auto mb-3 text-white/25" />
          {t("No applications here yet. New dancer applications from the website land in Pending automatically.", "Aún no hay aplicaciones aquí. Las nuevas aplicaciones del sitio web llegan a Pendiente automáticamente.")}
        </div>
      ) : (
        <div className="space-y-2.5">
          {filtered.map((a) => {
            const st = ST[a.status || "pending"];
            const isOpen = open === a.id;
            const c = a.checklist || {};
            const ap = a.approvals || {};
            return (
              <div key={a.id} className="rounded-2xl border border-white/10 bg-card overflow-hidden">
                <button onClick={() => setOpen(isOpen ? null : a.id)} className="w-full flex items-center gap-3 p-4 text-left">
                  {a.photos && a.photos[0]
                    ? <img src={a.photos[0]} alt="" className="w-11 h-11 rounded-xl object-cover border border-white/10 shrink-0" />
                    : <div className="w-11 h-11 rounded-xl bg-coral/12 border border-coral/30 flex items-center justify-center shrink-0"><Icon name="user" className="w-5 h-5 text-coral" /></div>}
                  <div className="flex-1 min-w-0">
                    <div className="font-bold text-sm truncate">{a.legalName}{a.stageName ? <span className="text-coral font-normal"> · "{a.stageName}"</span> : ""}</div>
                    <div className="text-white/45 text-[11px]">{fmt(a.at)} · {(a.days || []).map((d) => DAY_L[d] || d).join(" · ")}</div>
                  </div>
                  <Chip color={st.c}>{st.l}</Chip>
                  <Icon name={isOpen ? "chevron-up" : "chevron-down"} className="w-4 h-4 text-white/30 shrink-0" />
                </button>

                {isOpen && (
                  <div className="px-4 pb-4 border-t border-white/8 pt-4 fade-view">
                    <div className="grid md:grid-cols-2 gap-5">
                      {/* details + photos + signature */}
                      <div className="space-y-3">
                        <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-[13px]">
                          {[[t("DOB", "F. Nac."), a.dob], [t("Phone", "Teléfono"), a.phone], ["Email", a.email], ["Instagram", a.instagram || "—"], [t("Experience", "Experiencia"), (a.styles || []).join(", ")], [t("Signed", "Firmado"), a.signedAt ? fmt(a.signedAt) : "—"]].map(([k, v], i) => (
                            <div key={i} className="flex flex-col"><span className="text-white/35 text-[10px] uppercase tracking-wider">{k}</span><span className="text-white/85 break-words">{v}</span></div>
                          ))}
                        </div>
                        {a.photos && a.photos.length > 0 && (
                          <div className="flex gap-2">{a.photos.map((p, i) => <img key={i} src={p} alt={"photo " + (i + 1)} className="w-20 h-26 rounded-lg object-cover border border-white/10" style={{ height: 104 }} />)}</div>
                        )}
                        {a.signature && (
                          <div><div className="label text-white/40 text-[9px] mb-1">{t("Signature", "Firma")} — {a.signedName}</div><div className="rounded-xl border border-white/12 bg-white/[.04] p-2 inline-block"><img src={a.signature} alt="signature" className="h-14" /></div></div>
                        )}
                        {/* signed contract + signature metadata (private to the Hub) */}
                        {(a.contract || a.signatureMeta) && (() => { const sm = a.signatureMeta || {}; return (
                          <div className="rounded-xl border border-white/10 bg-white/[.02] p-3 space-y-1.5">
                            <div className="flex items-center justify-between"><span className="label text-white/40 text-[9px]">{t("Signed contract", "Contrato firmado")}</span>{a.contractDraft && <span className="text-[9px] font-bold uppercase tracking-wider text-amber-400 bg-amber-500/15 border border-amber-500/40 rounded px-1.5 py-0.5">{t("Draft", "Borrador")}</span>}</div>
                            <div className="text-white/75 text-[12px] leading-snug">{a.contract}{a.contractVersion ? " · " + a.contractVersion : ""}</div>
                            {a.acknowledgements && <div className="text-white/45 text-[11px]">{Object.values(a.acknowledgements).filter(Boolean).length}/7 {t("legal acknowledgements accepted", "confirmaciones legales aceptadas")}</div>}
                            {(a.address || a.emergencyName) && (
                              <div className="grid grid-cols-2 gap-x-3 gap-y-1 pt-1.5 border-t border-white/8 text-[11px]">
                                {a.address && <div className="col-span-2"><span className="text-white/35">{t("Address", "Dirección")}: </span><span className="text-white/70">{a.address}, {a.city} {a.state} {a.zip}</span></div>}
                                {a.emergencyName && <div className="col-span-2"><span className="text-white/35">{t("Emergency", "Emergencia")}: </span><span className="text-white/70">{a.emergencyName} · {a.emergencyPhone}</span></div>}
                                {a.businessStatus && <div><span className="text-white/35">{t("Status", "Estatus")}: </span><span className="text-white/70">{a.businessStatus === "llc" ? "LLC" : t("Individual", "Individual")}</span></div>}
                              </div>
                            )}
                            {sm.documentHash && <div className="pt-1.5 border-t border-white/8 text-[10px] text-white/35 break-all"><span className="text-white/30">{t("Hash", "Hash")}: </span>{sm.documentHash.slice(0, 32)}…</div>}
                            {(sm.appId || sm.contractVersion) && <div className="text-[10px] text-white/35">{t("App ID", "ID app")}: {sm.appId || "—"} · {sm.signatureProvider || "internal_canvas_signature"}</div>}
                          </div>
                        ); })()}
                        {a.phone && <a href={"https://wa.me/" + String(a.phone).replace(/[^\d]/g, "")} target="_blank" rel="noopener" className="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-[#25D366] text-black text-[10px] font-bold uppercase tracking-wider"><Icon name="message-circle" className="w-3.5 h-3.5" />WhatsApp</a>}
                      </div>

                      {/* checklist + approvals */}
                      <div className="space-y-2.5">
                        <div className="label text-white/40 text-[9px]">{t("Approval checklist", "Checklist de aprobación")}</div>
                        {CHECKS.map(([key, lbl, ic]) => (
                          <button key={key} disabled={!isManager || a.status === "approved"} onClick={() => setCheck(a, key, !c[key])} className={"w-full flex items-center gap-3 rounded-xl border px-3.5 py-3 text-left transition-all " + (c[key] ? "border-green-500/45 bg-green-500/8" : "border-white/12 bg-white/[.03] hover:border-white/25")}>
                            <Icon name={c[key] ? "check-circle" : ic} className={"w-4 h-4 shrink-0 " + (c[key] ? "text-green-400" : "text-white/40")} />
                            <span className={"text-[12.5px] font-semibold flex-1 " + (c[key] ? "text-white" : "text-white/60")}>{lbl}</span>
                            {c[key] && <span className="text-green-400 text-[10px] font-bold uppercase">✓</span>}
                          </button>
                        ))}
                        <div className="label text-white/40 text-[9px] pt-1.5">{t("Sign-off (both required)", "Visto bueno (ambos requeridos)")}</div>
                        <div className="grid grid-cols-2 gap-2">
                          {[["manager", t("Manager", "Gerente"), isManager], ["owner", t("Owner", "Dueño"), isOwner]].map(([who, lbl, canDo]) => (
                            ap[who]
                              ? <div key={who} className="rounded-xl border border-green-500/40 bg-green-500/8 px-3 py-2.5 text-center"><div className="text-green-400 text-[10px] font-bold uppercase tracking-wider">{lbl} ✓</div><div className="text-white/45 text-[10px] mt-0.5 truncate">{ap[who].name}</div></div>
                              : <button key={who} disabled={!canDo || a.status === "approved"} onClick={() => signOff(a, who)} className={"rounded-xl border px-3 py-2.5 text-[10px] font-bold uppercase tracking-wider transition-all " + (canDo ? "border-coral/40 text-coral hover:bg-coral hover:text-white" : "border-white/10 text-white/25 cursor-not-allowed")}>{t("Accept as", "Aceptar como")} {lbl}</button>
                          ))}
                        </div>
                        {(a.status || "pending") === "pending" && (
                          <div className="flex gap-2 pt-1.5">
                            <button disabled={!ready(a)} onClick={() => approve(a)} className={"flex-1 py-3 rounded-full text-[11px] font-black uppercase tracking-wider transition-all " + (ready(a) ? "bg-green-500 text-black hover:brightness-110" : "bg-white/8 text-white/30 cursor-not-allowed")}>{t("Approve dancer", "Aprobar dancer")}</button>
                            <button onClick={() => reject(a)} className="px-4 py-3 rounded-full border border-white/15 text-white/50 text-[11px] font-bold uppercase tracking-wider hover:text-coral hover:border-coral/40">{t("Reject", "Rechazar")}</button>
                          </div>
                        )}
                        {!ready(a) && (a.status || "pending") === "pending" && <p className="text-white/30 text-[10.5px]">{t("Complete the 3 checks + both sign-offs to enable approval.", "Completa los 3 puntos + ambos vistos buenos para habilitar la aprobación.")}</p>}
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ApplicantsModule, useApplicants });