/* RE-ENGAGEMENT — batch cold-lead outreach. window.SCREENS.Reengage */
(function () {
  const { useState } = React;
  const I = window.ICONS;
  const { Avatar, Pill, Btn, fmtMoney } = window.UI;
  const { reengage } = window.DATA;

  const STATE_META = {
    pending: { kind: "plain",   label: "Pending" },
    drafted: { kind: "pending", label: "Drafted" },
    sent:    { kind: "sent",    label: "Sent" },
    skipped: { kind: "stale",   label: "Skipped" },
  };

  function Reengage() {
    const [rows, setRows] = useState(() => reengage.rows.map(r => ({ ...r })));
    const [expanded, setExpanded] = useState(null);

    const tally = k => rows.filter(r => r.state === k).length;
    const setState = (id, state, draft) => setRows(prev => prev.map(r => r.id === id ? { ...r, state, draft: draft ?? r.draft } : r));

    const draftOne = (r) => {
      const txt = `Hi ${r.name.split(" ")[0]}, Ray with Meridian — circling back on your ${r.loan.toLowerCase()} from earlier this year. Things have shifted since we last spoke. Worth a quick look? No pressure.`;
      setState(r.id, "drafted", txt);
      setExpanded(r.id);
    };
    const draftAllPending = () => setRows(prev => prev.map(r => r.state === "pending"
      ? { ...r, state: "drafted", draft: `Hi ${r.name.split(" ")[0]}, Ray with Meridian — circling back on your ${r.loan.toLowerCase()}. Things have moved since we last spoke. Open to a quick look?` } : r));

    const stats = [
      { k: "pending", label: "Pending", n: tally("pending") },
      { k: "drafted", label: "Drafted", n: tally("drafted") },
      { k: "sent",    label: "Sent",    n: tally("sent") },
      { k: "skipped", label: "Skipped", n: tally("skipped") },
    ];

    return (
      <div className="page narrow">
        <div className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Re-engagement campaign</div>
            <h1 className="display" style={{ fontSize: 34 }}>{reengage.batchName}</h1>
          </div>
          <div className="sec-meta" style={{ display: "flex", gap: 8 }}>
            <Btn sm icon={I.import}>Import batch</Btn>
            <Btn sm kind="primary" icon={I.bolt} onClick={draftAllPending}>Draft all pending</Btn>
          </div>
        </div>

        {/* import context */}
        <div className="panel panel-pad" style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
          <div style={{ width: 34, height: 34, display: "grid", placeItems: "center", border: "1px solid var(--gold-line)", color: "var(--gold)" }}><I.import width={17} height={17} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{reengage.imported} cold leads imported</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)" }}>Filter: last contact 55–90 days · no open loan</div>
          </div>
          <Pill kind="gold">CSV · Mar 2025</Pill>
        </div>

        {/* stats strip */}
        <div className="stat-grid" style={{ marginBottom: 18, gridTemplateColumns: "repeat(4,1fr)" }}>
          {stats.map(s => (
            <div key={s.k} className="stat" style={{ cursor: "default" }}>
              <span className="eyebrow">{s.label}</span>
              <div className="stat-val" style={{ fontSize: 42, color: s.k === "sent" ? "var(--green-lift)" : s.k === "drafted" ? "var(--gold)" : "var(--ink)" }}>{s.n}</div>
            </div>
          ))}
        </div>

        {/* rows */}
        <div className="panel">
          <div className="panel-head"><span className="eyebrow">Showing {rows.length} of {reengage.imported}</span><span className="mono" style={{ fontSize: 10, color: "var(--ink-faint)" }}>Sorted by days cold</span></div>
          <div>
            {rows.map((r, i) => {
              const m = STATE_META[r.state];
              return (
                <div key={r.id} style={{ borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 13, padding: "13px 16px" }}>
                    <Avatar init={r.name.split(" ").map(w => w[0]).join("")} size={32} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.name}</div>
                      <div className="meta-row mono" style={{ fontSize: 10.5, color: "var(--ink-faint)" }}>
                        <span>{r.loan}</span><i className="dotsep"></i><span>{fmtMoney(r.amount)}</span><i className="dotsep"></i><span>{r.source}</span>
                      </div>
                    </div>
                    <Pill kind="reject">{r.days}d cold</Pill>
                    <Pill kind={m.kind}>{m.label}</Pill>
                    <div style={{ display: "flex", gap: 7, width: 184, justifyContent: "flex-end" }}>
                      {r.state === "pending" && <>
                        <Btn sm onClick={() => setState(r.id, "skipped")}>Skip</Btn>
                        <Btn sm kind="ghost-gold" icon={I.refresh} onClick={() => draftOne(r)}>Draft</Btn>
                      </>}
                      {r.state === "drafted" && <>
                        <Btn sm onClick={() => setExpanded(expanded === r.id ? null : r.id)}>{expanded === r.id ? "Hide" : "View"}</Btn>
                        <Btn sm kind="primary" icon={I.send} onClick={() => setState(r.id, "sent")}>Approve</Btn>
                      </>}
                      {r.state === "sent" && <span className="mono" style={{ fontSize: 10.5, color: "var(--green-lift)", letterSpacing: "0.1em", textTransform: "uppercase" }}>✓ Delivered</span>}
                      {r.state === "skipped" && <Btn sm onClick={() => setState(r.id, "pending")}>Restore</Btn>}
                    </div>
                  </div>
                  {expanded === r.id && r.draft && (
                    <div style={{ padding: "0 16px 14px 61px" }}>
                      <div style={{ fontSize: 13.5, lineHeight: 1.55, padding: "11px 14px", border: "1px dashed var(--gold-line)", background: "var(--bg-2)" }}>{r.draft}</div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

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