/* =========================================================================
   Veto · Add reviewers (/invite)
   The standalone "invite your team" page, reachable later from Settings or
   the Home setup band. Mercury-style email chips — no per-row roles. The
   primary invite moment lives inside create-office onboarding (auth.jsx);
   this is the same screen for adding people after the fact.
   ========================================================================= */

function readSetup() {
  const get = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
  return {
    office: get("veto.setup.office") || "805 Escrow",
    first: get("veto.setup.first") || "Madeline",
    domain: get("veto.setup.domain") || "805escrow.example",
  };
}

/* Shared chrome for the setup-flow screens (logo bar, no app sidebar). */
function SetupChrome({ children }) {
  return (
    <div className="min-h-screen bg-background text-ink">
      <header className="flex items-center justify-between border-b border-line px-6 py-4 lg:px-10">
        <Link to="/" aria-label="Veto"><VetoLogo className="text-[18px]" /></Link>
        <div className="flex items-center gap-5 text-[12.5px] text-ink-soft">
          <Link to="/settings" className="transition hover:text-ink">Settings</Link>
          <button onClick={() => navigate("/welcome")} className="transition hover:text-ink">Sign out</button>
        </div>
      </header>
      {children}
    </div>
  );
}

function InvitePeople() {
  const { office, domain } = readSetup();
  const [emails, setEmails] = useState([]);

  const send = () => {
    try {
      localStorage.setItem("veto.setup.invitesDone", "1");
      localStorage.setItem("veto.setup.inviteCount", String(emails.length));
    } catch {}
    navigate("/");
  };

  return (
    <SetupChrome>
      <main className="mx-auto w-full max-w-[600px] px-6 py-12 lg:py-16">
        <Link to="/" className="inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 -ml-2 text-[13px] text-ink-soft transition hover:bg-surface hover:text-ink">
          <Icon name="arrow-left" size={15} /> Home
        </Link>
        <h1 className="mt-4 text-[26px] font-semibold tracking-[-0.025em] text-ink">Invite your team.</h1>
        <p className="mt-2 text-[14px] leading-relaxed text-ink-soft">
          A file can't record without a second review. Add the people you close with and they'll get a link to join {office}.
        </p>

        <div className="mt-7">
          <div className="flex items-baseline justify-between">
            <span className="text-[13px] font-medium text-ink">Email addresses</span>
            <span className="text-[12px] text-ink-soft">They join as escrow officers</span>
          </div>
          <div className="mt-2"><EmailChips emails={emails} onChange={setEmails} autoFocus domain={domain} /></div>
        </div>

        <div className="mt-9 flex items-center gap-5 border-t border-line pt-6">
          <button onClick={send} disabled={emails.length === 0}
            className={cn("inline-flex h-12 items-center justify-center gap-2 rounded-full px-7 text-[14px] font-medium transition",
              emails.length > 0 ? "bg-ink text-background hover:bg-ink/90" : "cursor-not-allowed bg-surface-2 text-muted-foreground")}>
            {emails.length > 0 ? `Send ${emails.length} ${emails.length === 1 ? "invite" : "invites"}` : "Send invites"}
            <Icon name="arrow-right" size={16} />
          </button>
          <Link to="/" className="text-[12.5px] text-ink-soft underline decoration-line underline-offset-4 transition hover:text-ink">I'll do this later</Link>
        </div>
      </main>
    </SetupChrome>
  );
}

Object.assign(window, { InvitePeople });