/* =========================================================================
   Veto · Reviewer profile (/reviewer/$initials) + external Party views
   ========================================================================= */

function ReviewerProfile({ initials }) {
  const r = REVIEWERS[initials] || REVIEWERS.ML;
  const open = r.openFiles.map((id) => CASE_FILES[id]).filter(Boolean);
  const signed = r.signedReceipts.map((id) => CASE_FILES[id]).filter(Boolean);
  return (
    <AppShell reviewer={{ name: "Madeline Lane", initials: "ML" }}>
      <div className="mx-auto w-full max-w-[760px] px-6 py-10 lg:px-10 lg:py-12">
        <div className="flex items-center gap-4">
          <span className="grid h-16 w-16 shrink-0 place-items-center rounded-full bg-surface-2 text-[20px] font-medium text-ink">{r.initials}</span>
          <div>
            <h1 className="text-[22px] font-semibold tracking-[-0.015em] text-ink">{r.name}</h1>
            <div className="mt-0.5 text-[13px] text-ink-soft">{r.roleLabel}</div>
            <div className="mt-0.5 text-[12.5px] text-ink-soft">{r.office} · {r.email}</div>
          </div>
        </div>

        <section className="mt-10">
          <div className="flex items-baseline justify-between border-b border-line pb-2">
            <h2 className="text-[14px] font-medium text-ink">Open files</h2>
            <span className="font-mono text-[11.5px] text-muted-foreground">{open.length}</span>
          </div>
          {open.length ? (
            <ul className="flex flex-col divide-y divide-line">
              {open.map((cf) => (
                <FileRow key={cf.id} id={cf.id} street={streetOf(cf.property)} city={cityOf(cf.property)} party={cf.party}
                  status={fileStatusLabel(cf)} lineLabel={lineLabelOf(activeLineKey(cf))} meta={shortClosing(cf.closing)} />
              ))}
            </ul>
          ) : <p className="py-8 text-center text-[12.5px] text-ink-soft">No open files.</p>}
        </section>

        <section className="mt-10">
          <div className="flex items-baseline justify-between border-b border-line pb-2">
            <h2 className="text-[14px] font-medium text-ink">Signed receipts</h2>
            <span className="font-mono text-[11.5px] text-muted-foreground">{signed.length}</span>
          </div>
          {signed.length ? (
            <ul className="flex flex-col divide-y divide-line">
              {signed.map((cf) => {
                const line = activeLineKey(cf);
                const href = { seller: "/file/$id/receipt", buyer: "/file/$id/buyer-receipt", payoff: "/file/$id/payoff-receipt" }[line];
                return (
                  <li key={cf.id}>
                    <Link to={href} params={{ id: cf.id }} className="group flex items-center gap-4 px-1 py-3.5 transition hover:bg-surface/40">
                      <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-surface-2 text-ink-soft"><Icon name="file-text" size={15} /></span>
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2"><span className="truncate text-[13.5px] text-ink">{streetOf(cf.property)}</span><span className="text-[11px] text-muted-foreground">{cf.id}</span></div>
                        <div className="mt-0.5 text-[12px] text-ink-soft">{lineLabelOf(line)} receipt · signed {cf.closing}</div>
                      </div>
                      <Icon name="arrow-right" size={14} className="text-ink-soft transition group-hover:translate-x-0.5" />
                    </Link>
                  </li>
                );
              })}
            </ul>
          ) : <p className="py-8 text-center text-[12.5px] text-ink-soft">No signed receipts.</p>}
        </section>
      </div>
    </AppShell>
  );
}

/* ------------------------------------------------- External party view */
const PARTY_DOCS = {
  buyer: { title: "Buyer document request", who: "buyer", docs: ["Government-issued photo ID", "Source-of-funds statement", "Wire confirmation from your bank"] },
  seller: { title: "Seller document request", who: "seller", docs: ["Government-issued photo ID", "Signed wire instructions", "Voided check or bank letter"] },
};

function PartyUpload({ label }) {
  const [done, setDone] = useState(false);
  return (
    <label className={cn("flex cursor-pointer items-center gap-3 rounded-xl border px-4 py-3.5 transition", done ? "border-[var(--ok)]/40 bg-[var(--ok-bg)]" : "border-dashed border-line hover:border-ink/25 hover:bg-surface/40")}>
      <span className={cn("grid h-9 w-9 shrink-0 place-items-center rounded-lg", done ? "bg-background text-[var(--ok)]" : "bg-surface-2 text-ink-soft")}><Icon name={done ? "check" : "upload-cloud"} size={16} strokeWidth={done ? 3 : 1.6} /></span>
      <span className="min-w-0 flex-1">
        <span className="block text-[13.5px] font-medium text-ink">{label}</span>
        <span className="block text-[12px] text-ink-soft">{done ? "Uploaded · thank you" : "Click to upload or drop a file"}</span>
      </span>
      <input type="file" className="hidden" onChange={() => setDone(true)} />
    </label>
  );
}

function PartyView({ who }) {
  const cfg = PARTY_DOCS[who] || PARTY_DOCS.buyer;
  const [sent, setSent] = useState(false);
  return (
    <div className="min-h-screen bg-surface/40 text-ink">
      <div className="mx-auto flex min-h-screen w-full max-w-[560px] flex-col px-6">
        <header className="flex items-center gap-2 pt-8">
          <VetoLogo className="text-[16px]" />
          <span className="text-[12.5px] text-ink-soft">· secure document request</span>
        </header>
        <main className="flex-1 py-10">
          {sent ? (
            <div className="rounded-2xl border border-line bg-background px-7 py-12 text-center shadow-[0_2px_40px_-24px_rgba(0,0,0,0.3)]">
              <div className="mx-auto mb-5 grid h-14 w-14 place-items-center rounded-2xl bg-[var(--ok-bg)] text-[var(--ok)]"><Icon name="check" size={26} strokeWidth={2.5} /></div>
              <h1 className="text-[21px] font-semibold tracking-[-0.015em] text-ink">Documents received.</h1>
              <p className="mt-2 text-[13.5px] leading-relaxed text-ink-soft">805 Escrow has your files. You'll hear from your officer if anything else is needed.</p>
            </div>
          ) : (
            <div className="rounded-2xl border border-line bg-background px-7 py-8 shadow-[0_2px_40px_-24px_rgba(0,0,0,0.3)]">
              <div className="text-[11px] uppercase tracking-[0.06em] text-muted-foreground">805 Escrow · Westlake Village · File BF-0318</div>
              <h1 className="mt-2 text-[22px] font-semibold tracking-[-0.02em] text-ink">{cfg.title}</h1>
              <p className="mt-2 text-[13.5px] leading-relaxed text-ink-soft">Your escrow officer needs a few documents to complete your part of the transaction. This link is private to you. Veto records the review. The office decides.</p>
              <div className="mt-6 space-y-2.5">
                {cfg.docs.map((d) => <PartyUpload key={d} label={d} />)}
              </div>
              <button onClick={() => setSent(true)} className="mt-6 h-11 w-full rounded-lg bg-ink text-[13.5px] font-medium text-background transition hover:bg-ink/90">Submit documents</button>
              <p className="mt-3 text-center text-[11.5px] text-ink-soft">Secured by Veto. We never ask for your password.</p>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { ReviewerProfile, PartyView });