/* APP — state, routing, login. Mounts everything. */
(function () {
  const { useState, useEffect, useRef, useCallback } = React;
  const I = window.ICONS;
  const { Sidebar, TopBar, Toasts } = window.SHELL;
  const S = window.SCREENS;
  const { Btn } = window.UI;
  const D = window.DATA;

  let toastSeq = 0;

  function Login() {
    const [pw, setPw] = useState("");
    const [err, setErr] = useState("");
    async function submit(e) {
      e.preventDefault();
      setErr("");
      try {
        const r = await fetch("/api/login", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ password: pw }),
        });
        if (r.ok) { window.location.reload(); return; }
        setErr("Incorrect password");
      } catch (_) {
        setErr("Could not reach the server");
      }
    }
    return (
      <div style={{ height: "100vh", display: "grid", gridTemplateColumns: "1.1fr 1fr" }}>
        {/* left: brand panel */}
        <div style={{ background: "var(--sidebar)", borderRight: "1px solid var(--gold-line)", padding: "56px 60px", display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", right: -60, bottom: -40, fontFamily: "var(--font-display)", fontSize: 360, lineHeight: 0.8, color: "var(--green-lift)", opacity: 0.04, letterSpacing: "0.02em", pointerEvents: "none" }}>$</div>
          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <span className="logo" style={{ fontSize: 34, letterSpacing: "0.12em", color: "var(--ink-soft)" }}>CLO<span style={{ color: "var(--green-lift)" }}>$</span>ED</span>
          </div>
          <div style={{ position: "relative" }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>▌ Control Center · FW26</div>
            <h1 className="display" style={{ fontSize: "clamp(46px, 5vw, 66px)", maxWidth: 520 }}>Approve the deal.<br/>Nothing sends without you.</h1>
            <p style={{ color: "var(--ink-soft)", maxWidth: 420, marginTop: 18, fontSize: 15 }}>
              Your assistant drafts every text and email in your voice and holds it here for one click. You stay the closer.
            </p>
          </div>
          <div className="meta-row mono" style={{ fontSize: 10.5, color: "var(--ink-faint)" }}>
            <span className="m"><span className="live-dot"></span> Assistant online</span>
            <i className="dotsep"></i><span>West Capital Lending</span>
          </div>
        </div>
        {/* right: form */}
        <div style={{ display: "grid", placeItems: "center", padding: 40 }}>
          <form onSubmit={submit} style={{ width: "100%", maxWidth: 340 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Sign in</div>
            <h2 className="display" style={{ fontSize: 38, marginBottom: 26 }}>Welcome back, Andrew</h2>
            <label className="eyebrow" style={{ display: "block", marginBottom: 7 }}>Email</label>
            <input className="field mono" defaultValue="" placeholder="you@westcaplending.com" style={{ marginBottom: 16 }} />
            <label className="eyebrow" style={{ display: "block", marginBottom: 7 }}>Password</label>
            <input className="field mono" type="password" value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••••" style={{ marginBottom: err ? 12 : 22 }} />
            {err && <div className="mono" style={{ fontSize: 11, color: "var(--st-reject)", marginBottom: 16, letterSpacing: "0.04em" }}>{err}</div>}
            <Btn kind="primary" block icon={I.bolt} arrow>Enter the cockpit</Btn>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-faint)", marginTop: 18, textAlign: "center", letterSpacing: "0.1em", textTransform: "uppercase" }}>
              Single-operator workspace · NMLS #1833965
            </div>
          </form>
        </div>
      </div>
    );
  }

  function Placeholder({ name }) {
    return (
      <div className="page">
        <div className="panel empty">
          <div className="empty-mark"><I.bolt width={24} height={24} /></div>
          <div className="display" style={{ fontSize: 34 }}>{name}</div>
          <div style={{ color: "var(--ink-soft)", maxWidth: 360 }}>This screen is being built out next. The shell, Approvals queue, Inbox and Home are live — try those.</div>
        </div>
      </div>
    );
  }

  function App() {
    const [authed, setAuthed] = useState(!!D.__authed);
    const [theme, setTheme] = useState("dark");
    const [route, setRoute] = useState("home");
    const [pool, setPool] = useState(() => D.drafts.map(d => ({ ...d })));
    const [sessionApproved, setSessionApproved] = useState(0);
    const [sentExtra, setSentExtra] = useState({});   // leadId -> [msgs]
    const [toasts, setToasts] = useState([]);
    const arrived = useRef(false);

    const counts = {
      approvals: pool.length,
      inbox: (D.counts && typeof D.counts.inbox === "number") ? D.counts.inbox : 0,
      leads: D.leads.length,
      reengage: D.reengage.rows.filter(r => r.state === "pending").length,
    };

    const pushToast = useCallback((t) => {
      const id = ++toastSeq;
      setToasts(prev => [...prev, { ...t, id }]);
      setTimeout(() => setToasts(prev => prev.map(x => x.id === id ? { ...x, out: true } : x)), 5200);
      setTimeout(() => setToasts(prev => prev.filter(x => x.id !== id)), 5600);
    }, []);
    const dismiss = id => setToasts(prev => prev.filter(x => x.id !== id));

    const approve = (id, text, leadIdOpt) => {
      const d = pool.find(x => x.id === id); if (!d) return;
      const lead = D.leadById[d.leadId];
      setPool(prev => prev.filter(x => x.id !== id));
      setSessionApproved(s => s + 1);
      if (d.channel === "sms") {
        setSentExtra(prev => ({ ...prev, [d.leadId]: [...(prev[d.leadId] || []), { from: "me", text, time: "Now", status: "sent" }] }));
      }
      pushToast({ icon: "msg", eyebrow: `${d.channel === "sms" ? "Text" : "Email"} sent · ${lead.name}`, body: `Approved and delivered. Logged to the ${lead.loan.toLowerCase()} thread.` });
    };
    const reject = (id) => {
      const d = pool.find(x => x.id === id); if (!d) return;
      const lead = D.leadById[d.leadId];
      setPool(prev => prev.filter(x => x.id !== id));
      pushToast({ icon: "bolt", eyebrow: `Draft rejected · ${lead.name}`, body: `Nothing sent. The assistant will learn from this.` });
    };
    const redraft = (id) => {
      const d = pool.find(x => x.id === id); if (!d) return;
      pushToast({ icon: "bolt", eyebrow: `Redrafted · ${D.leadById[d.leadId].name}`, body: `New version generated. Review and approve.` });
    };

    // (Removed the mock "scripted arrival" demo — live updates will arrive via SSE in Phase 2.)

    if (!authed) return <div className={theme === "light" ? "theme-light" : ""}><Login /></div>;

    const screen = () => {
      switch (route) {
        case "home": return <S.Home counts={counts} setRoute={setRoute} />;
        case "approvals": return <S.Approvals queue={pool} active={route === "approvals"} sessionApproved={sessionApproved}
          onApprove={approve} onReject={reject} onRedraft={redraft} />;
        case "inbox": return <S.Inbox pool={pool} sentExtra={sentExtra} onApprove={approve} onReject={reject} />;
        case "leads": return S.Leads ? <S.Leads setRoute={setRoute} /> : <Placeholder name="Leads & Pipeline" />;
        case "brief": return S.Brief ? <S.Brief setRoute={setRoute} counts={counts} /> : <Placeholder name="Daily Brief" />;
        case "reengage": return S.Reengage ? <S.Reengage /> : <Placeholder name="Re-engagement" />;
        case "training": return S.Training ? <S.Training /> : <Placeholder name="Training Rules" />;
        case "chat": return S.Chat ? <S.Chat /> : <Placeholder name="Assistant Chat" />;
        default: return <Placeholder name="—" />;
      }
    };

    const noScroll = route === "inbox" || route === "chat";

    return (
      <div className={theme === "light" ? "theme-light" : ""}>
        <div className="app">
          <Sidebar route={route} setRoute={setRoute} counts={counts} />
          <div className="main">
            <TopBar route={route} setRoute={setRoute} theme={theme} toggleTheme={() => setTheme(t => t === "dark" ? "light" : "dark")} counts={counts} />
            {noScroll ? <div style={{ flex: 1, minHeight: 0 }}>{screen()}</div> : <div className="scroll-area">{screen()}</div>}
          </div>
        </div>
        <Toasts toasts={toasts} dismiss={dismiss} />
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
})();