/* HOME / OVERVIEW. window.SCREENS.Home */
(function () {
  const I = window.ICONS;
  const { Avatar, Pill, Btn, LoanMeta, fmtMoney } = window.UI;
  const { leads, leadById, STAGES, rates, staleCount } = window.DATA;

  function Stat({ icon: Ic, label, val, foot, accent, onClick }) {
    return (
      <div className={`stat ${accent ? "accent" : ""}`} onClick={onClick}>
        <div className="stat-top">
          <span className="eyebrow">{label}</span>
          <Ic width={16} height={16} style={{ color: "var(--ink-faint)" }} />
        </div>
        <div className="stat-val">{val}</div>
        <div className="stat-foot">{foot}</div>
      </div>
    );
  }

  function Home({ counts, setRoute }) {
    const newToday = leads.filter(l => l.days === 0).length;
    const hr = new Date().getHours();
    const greeting = hr < 12 ? "morning" : hr < 18 ? "afternoon" : "evening";
    const byStage = STAGES.map(s => ({ s, n: leads.filter(l => l.stage === s).length }));
    const pipelineVal = leads.reduce((a, l) => a + l.amount, 0);

    return (
      <div className="page">
        {/* greeting */}
        <div style={{ marginBottom: 22 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>{new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })} · {new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}</div>
          <h1 className="display" style={{ fontSize: 44 }}>Good {greeting}, Andrew</h1>
          <div className="meta-row mono" style={{ fontSize: 11, color: "var(--ink-soft)", marginTop: 10 }}>
            <span className="m"><span className="live-dot"></span> Assistant watching CRM</span>
            <i className="dotsep"></i>
            <span>{fmtMoney(pipelineVal)} in pipeline</span>
          </div>
        </div>

        {/* AI attention block */}
        <div className="panel" style={{ marginBottom: 20, borderColor: "var(--gold-line)" }}>
          <div style={{ display: "flex", gap: 16, padding: "18px 20px" }}>
            <div style={{ flexShrink: 0, width: 38, height: 38, display: "grid", placeItems: "center", border: "1px solid var(--gold-line)", color: "var(--green-lift)" }}>
              <I.bolt width={19} height={19} />
            </div>
            <div style={{ flex: 1 }}>
              <div className="eyebrow" style={{ marginBottom: 7, color: "var(--green-lift)" }}>◆ What needs your attention</div>
              <div style={{ fontSize: 15.5, lineHeight: 1.6, maxWidth: 760 }}>
                You have <b>{counts.approvals} draft{counts.approvals === 1 ? "" : "s"}</b> waiting for approval, <b>{counts.inbox} lead{counts.inbox === 1 ? "" : "s"}</b> waiting on your reply, and <b>{newToday} new lead{newToday === 1 ? "" : "s"}</b> in today. <b>{staleCount} lead{staleCount === 1 ? "" : "s"}</b> {staleCount === 1 ? "has" : "have"} gone quiet for 7+ days and could use a nudge.
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
                <Btn sm kind="primary" icon={I.inbox} onClick={() => setRoute("inbox")}>Open inbox</Btn>
                <Btn sm icon={I.target} onClick={() => setRoute("reengage")}>Review stale leads</Btn>
              </div>
            </div>
          </div>
        </div>

        {/* stat grid */}
        <div className="stat-grid" style={{ marginBottom: 20 }}>
          <Stat icon={I.checks} label="Drafts in queue" val={counts.approvals} accent onClick={() => setRoute("inbox")}
            foot={<span className="mono" style={{ fontSize: 10.5, color: "var(--ink-faint)" }}>replies + new leads</span>} />
          <Stat icon={I.users} label="New leads today" val={newToday}
            foot={<span className="mono" style={{ fontSize: 10.5, color: "var(--ink-faint)" }}>last 24h</span>} onClick={() => setRoute("leads")} />
          <Stat icon={I.inbox} label="Inbound to reply" val={counts.inbox}
            foot={<Pill kind="sent">Unread</Pill>} onClick={() => setRoute("inbox")} />
          <Stat icon={I.clock} label="Stale 7+ days" val={staleCount}
            foot={<Pill kind="reject">At risk</Pill>} onClick={() => setRoute("reengage")} />
        </div>

        {/* pipeline + rates */}
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
          <div className="panel">
            <div className="panel-head">
              <span className="eyebrow">Pipeline by stage</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--ink-faint)" }}>{leads.length} active</span>
            </div>
            <div className="panel-pad" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {byStage.map(({ s, n }) => {
                const pct = Math.round((n / leads.length) * 100);
                return (
                  <div key={s} style={{ display: "grid", gridTemplateColumns: "130px 1fr 28px", alignItems: "center", gap: 12 }}>
                    <span className="mono" style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{s}</span>
                    <div style={{ height: 8, background: "var(--bg-2)", position: "relative" }}>
                      <div style={{ position: "absolute", inset: 0, width: `${pct}%`, background: "var(--green)" }}></div>
                    </div>
                    <span className="num" style={{ fontSize: 18, textAlign: "right" }}>{n}</span>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="panel">
            <div className="panel-head">
              <span className="eyebrow">Today's rate summary</span>
              <span className="mono" style={{ fontSize: 9.5, color: "var(--ink-ghost)" }}>Internal · not for quotes</span>
            </div>
            <div className="panel-pad" style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {rates.map((r, i) => (
                <div key={r.label} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 0", borderBottom: i < rates.length - 1 ? "1px solid var(--line)" : "none" }}>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-soft)", letterSpacing: "0.04em" }}>{r.label}</span>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span className="num" style={{ fontSize: 22 }}>{r.val}</span>
                    <span className="mono" style={{ fontSize: 11, width: 52, 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>
      </div>
    );
  }

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