/* DAILY BRIEF — morning report. window.SCREENS.Brief */
(function () {
  const I = window.ICONS;
  const { Avatar, Pill, Btn, LoanMeta, fmtMoney, fmtMoneyK } = window.UI;
  const { leads, STAGES, rates, staleLeads } = window.DATA;

  function Brief({ setRoute, counts }) {
    const stale = (staleLeads || []).slice().sort((a, b) => b.days - a.days);
    const newToday = leads.filter(l => l.days === 0);
    const pipelineVal = leads.reduce((a, l) => a + l.amount, 0);
    const byStage = STAGES.map(s => ({ s, n: leads.filter(l => l.stage === s).length }));

    return (
      <div className="page narrow">
        {/* masthead */}
        <div style={{ borderBottom: "2px solid var(--gold-strong)", paddingBottom: 16, marginBottom: 22 }}>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>▌ Daily Brief · Edition {String(new Date().getMonth() + 1).padStart(2, "0")}{String(new Date().getDate()).padStart(2, "0")}</div>
              <h1 className="display" style={{ fontSize: 56 }}>The Morning Desk</h1>
            </div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)", textAlign: "right", letterSpacing: "0.06em" }}>
              {new Date().toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }).toUpperCase()} · {new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}<br/>Generated by assistant
            </div>
          </div>
        </div>

        {/* AI actionable summary */}
        <div className="panel" style={{ marginBottom: 20, borderColor: "var(--gold-line)" }}>
          <div className="panel-pad" style={{ display: "flex", gap: 16 }}>
            <div style={{ flexShrink: 0, width: 36, height: 36, display: "grid", placeItems: "center", border: "1px solid var(--gold-line)", color: "var(--green-lift)" }}><I.bolt width={18} height={18} /></div>
            <div>
              <div className="eyebrow" style={{ color: "var(--green-lift)", marginBottom: 7 }}>◆ Actionable summary</div>
              <div style={{ fontSize: 15.5, lineHeight: 1.65 }}>
                Start with the <b>{counts ? counts.approvals : 0} pending draft{(counts ? counts.approvals : 0) === 1 ? "" : "s"}</b> awaiting approval. <b>{counts ? counts.inbox : 0} lead{(counts ? counts.inbox : 0) === 1 ? "" : "s"}</b> {(counts ? counts.inbox : 0) === 1 ? "is" : "are"} waiting on your reply, and <b>{stale.length} lead{stale.length === 1 ? "" : "s"}</b> {stale.length === 1 ? "has" : "have"} gone quiet for 7+ days. Loaded pipeline value is <b>{fmtMoney(pipelineVal)}</b> across {leads.length} recent leads.
              </div>
              <div style={{ display: "flex", gap: 9, marginTop: 14 }}>
                <Btn sm kind="primary" icon={I.inbox} onClick={() => setRoute("inbox")}>Open inbox</Btn>
                <Btn sm icon={I.target} onClick={() => setRoute("reengage")}>Fire re-engagement</Btn>
              </div>
            </div>
          </div>
        </div>

        {/* two-col: pipeline snapshot + rates */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 20 }}>
          <div className="panel">
            <div className="panel-head"><span className="eyebrow">Pipeline snapshot</span><span className="num" style={{ fontSize: 16 }}>{fmtMoneyK(pipelineVal)}</span></div>
            <div className="panel-pad" style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {byStage.map(({ s, n }) => (
                <div key={s} style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{s}</span>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <div style={{ width: 60, height: 6, background: "var(--bg-2)" }}><div style={{ height: "100%", width: `${(n / leads.length) * 100}%`, background: "var(--green)" }}></div></div>
                    <span className="num" style={{ fontSize: 16, width: 18, textAlign: "right" }}>{n}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="panel">
            <div className="panel-head"><span className="eyebrow">Rate summary</span><span className="mono" style={{ fontSize: 9.5, color: "var(--ink-ghost)" }}>Internal only</span></div>
            <div className="panel-pad">
              {rates.map((r, i) => (
                <div key={r.label} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 0", borderBottom: i < rates.length - 1 ? "1px solid var(--line)" : "none" }}>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-soft)" }}>{r.label}</span>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span className="num" style={{ fontSize: 20 }}>{r.val}</span>
                    <span className="mono" style={{ fontSize: 10.5, width: 48, textAlign: "right", color: r.dir === "down" ? "var(--green-lift)" : r.dir === "up" ? "var(--st-reject)" : "var(--ink-faint)" }}>{r.dir === "down" ? "▾" : r.dir === "up" ? "▴" : "—"} {r.chg}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* stale leads */}
        <div className="panel">
          <div className="panel-head">
            <span className="eyebrow">Stale leads · 7+ days no activity</span>
            <Pill kind="reject">{stale.length} at risk</Pill>
          </div>
          <div>
            {stale.map((l, i) => (
              <div key={l.id} style={{ display: "flex", alignItems: "center", gap: 13, padding: "12px 16px", borderBottom: i < stale.length - 1 ? "1px solid var(--line)" : "none" }}>
                <Avatar init={l.init} size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{l.name}</div>
                  <LoanMeta lead={l} />
                </div>
                <Pill kind="reject">{l.days}d quiet</Pill>
                <Btn sm kind="ghost-gold" icon={I.refresh}>Draft nudge</Btn>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  window.SCREENS = window.SCREENS || {};
  window.SCREENS.Brief = Brief;
})();