/* ============================================================
   Deliverability — sending inboxes, domains, email health.
   The metric the whole outbound plan rests on.
   ============================================================ */

const INBOX_STATUS = {
  healthy:   { label: "Healthy",        color: "var(--green)" },
  warming:   { label: "Warming",        color: "var(--amber)" },
  attention: { label: "Needs attention",color: "var(--red)" },
};
const ALERT_LEVEL = {
  error: { color: "var(--red)", icon: "warning" },
  warn:  { color: "var(--amber)", icon: "warning" },
  ok:    { color: "var(--green)", icon: "check" },
};

// ---- AI email-health analysis ----
async function analyzeHealth() {
  const W = window.WTC, d = W.deliverability;
  const ib = W.inboxes.filter((i) => i.purpose === "outbound")
    .map((i) => `${i.email}: status ${i.status}, warmup ${i.warmup}%, inbox ${i.inboxPct}%/spam ${i.spamPct}%, bounce ${i.bounce}%, SPF ${i.spf?"ok":"missing"}/DKIM ${i.dkim?"ok":"missing"}/DMARC ${i.dmarc?"ok":"missing"}, sent ${i.sentToday}/${i.dailyLimit}`).join("\n");
  const prompt = `You are Claude monitoring email deliverability for We The Creators' cold outbound. Cold BD must never route through the client/transactional domain (contracts@wethecreators.co). Health score ${d.healthScore}/100. Inboxes:\n${ib}\n\nGive Preston a 2-3 sentence read on overall health and the single most important action to take right now. Be specific and decisive. No markdown, no bullet lists.`;
  if (window.claude && window.claude.complete) {
    try { const out = await window.claude.complete(prompt); if (out && out.trim()) return { text: out.trim(), live: true }; } catch (e) {}
  }
  await new Promise((r) => setTimeout(r, 700));
  return { live: false, text: "Overall health is solid at 86 — your primary domain is landing 94% in the inbox. The weak point is hello@wtc-studio.io: 26% spam, a 2.1% bounce rate, and a dropped IMAP connection, all made worse by missing DKIM/DMARC. Pause sends on that inbox today, fix its DNS records, and let it re-warm before routing any more targets through it." };
}

function HealthKpi({ label, value, unit, delta, deltaDir, good, accent, icon }) {
  const pill = good === false ? "down" : good === true ? "up" : (deltaDir === "down" ? "down" : "up");
  return (
    <div className="kpi-card lift">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-3)" }}>{label}</span>
        <Icon name={icon} size={15} style={{ color: "var(--text-3)" }} />
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 8 }}>
        <span className="num" style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-0.03em", color: accent || "var(--text)" }}>{value}</span>
        {unit && <span style={{ fontSize: 13, color: "var(--text-3)" }}>{unit}</span>}
      </div>
      {delta != null && (
        <div style={{ marginTop: 6 }}>
          <span className={"delta delta--" + pill}>{deltaDir === "down" ? "▼" : "▲"} {Math.abs(delta)}{unit === "%" ? "pt" : ""}</span>
        </div>
      )}
    </div>
  );
}

function PlacementChart({ data }) {
  const max = Math.max(...data.map((d) => d.inbox + d.spam));
  return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <div className="panel-title">Placement performance</div>
          <div className="panel-sub">Where your sends land — primary inbox vs spam</div>
        </div>
        <div className="legend-inline">
          <span><span className="lg-dot" style={{ background: "var(--accent)" }}></span> Inbox</span>
          <span><span className="lg-dot" style={{ background: "var(--lane-agency)" }}></span> Spam</span>
        </div>
      </div>
      <div className="bar-chart">
        {data.map((d, i) => {
          const total = d.inbox + d.spam;
          return (
            <div key={i} className="bar-col" title={`${d.day} · inbox ${d.inbox} / spam ${d.spam}`}>
              <div className="bar-stack" style={{ height: (total / max) * 100 + "%" }}>
                <div className="bar-spam" style={{ height: (d.spam / total) * 100 + "%" }}></div>
                <div className="bar-inbox" style={{ height: (d.inbox / total) * 100 + "%" }}></div>
              </div>
              <span className="bar-label">{d.day.replace(/^\w+ /, "").replace(/(\w+) /, "")}{d.day.split(" ")[1]}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function RequiredActions({ alerts }) {
  return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <div className="panel-title">Required actions</div>
          <div className="panel-sub">Connectivity, DNS & authentication</div>
        </div>
      </div>
      <div className="alert-list">
        {alerts.map((a, i) => {
          const m = ALERT_LEVEL[a.level];
          return (
            <div key={i} className="alert-row">
              <span className="alert-dot" style={{ background: m.color }}></span>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{a.title}</div>
                <div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 1 }}>{a.detail}</div>
              </div>
              {a.level !== "ok" && <button className="btn btn--sm btn--ghost" style={{ color: "var(--accent)" }}>Fix</button>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ProviderBars({ providers }) {
  return (
    <div className="panel">
      <div className="panel-head">
        <div>
          <div className="panel-title">Deliverability by provider</div>
          <div className="panel-sub">How each mailbox provider filters your sends</div>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 6 }}>
        {providers.map((p) => (
          <div key={p.name} style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ width: 64, fontSize: 12.5, color: "var(--text-2)", flex: "none" }}>{p.name}</span>
            <div className="prov-bar">
              <div className="prov-inbox" style={{ width: p.inbox + "%" }}>{p.inbox >= 18 && <span>{p.inbox}%</span>}</div>
              <div className="prov-spam" style={{ width: p.spam + "%" }}>{p.spam >= 14 && <span>{p.spam}%</span>}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AuthChip({ ok, label }) {
  return (
    <span className="auth-chip" data-ok={ok || undefined}>
      <Icon name={ok ? "check" : "x"} size={11} /> {label}
    </span>
  );
}

function InboxCard({ ib }) {
  const st = INBOX_STATUS[ib.status] || INBOX_STATUS.healthy;
  const limitPct = ib.dailyLimit ? Math.round((ib.sentToday / ib.dailyLimit) * 100) : 0;
  return (
    <div className="inbox-card lift" data-purpose={ib.purpose}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 11 }}>
        <div className="inbox-ava" style={{ color: st.color, borderColor: st.color + "55" }}>
          <Icon name={ib.purpose === "transactional" ? "shield" : "mail"} size={16} />
        </div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ fontSize: 13.5, fontWeight: 660, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ib.email}</span>
          </div>
          <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>{ib.provider} · {ib.domain}</div>
        </div>
        {ib.purpose === "transactional"
          ? <span className="purpose-tag purpose-tag--txn"><Icon name="shield" size={11} /> Client only</span>
          : <span className="inbox-status" style={{ color: st.color }}><span className="stagedot" style={{ background: st.color }}></span>{st.label}</span>}
      </div>

      {ib.purpose === "transactional" ? (
        <div className="txn-note">Quarantined from cold outbound — carries contracts & invoices only.</div>
      ) : (
        <React.Fragment>
          <div className="inbox-metrics">
            <div><span className="num im-num">{ib.inboxPct}%</span><span className="im-lbl">Inbox</span></div>
            <div><span className="num im-num" style={{ color: ib.spamPct > 15 ? "var(--red)" : "var(--text)" }}>{ib.spamPct}%</span><span className="im-lbl">Spam</span></div>
            <div><span className="num im-num" style={{ color: ib.bounce > 2 ? "var(--red)" : "var(--text)" }}>{ib.bounce}%</span><span className="im-lbl">Bounce</span></div>
            <div><span className="num im-num" style={{ color: "var(--green)" }}>{ib.replies}</span><span className="im-lbl">Replies</span></div>
          </div>
          <div className="warmup-row">
            <span style={{ fontSize: 11, color: "var(--text-3)", display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="flame" size={12} /> Warmup</span>
            <div className="warmup-track"><div className="warmup-fill" style={{ width: ib.warmup + "%", background: ib.warmup >= 90 ? "var(--green)" : "var(--amber)" }}></div></div>
            <span className="num" style={{ fontSize: 11.5, color: "var(--text-2)" }}>{ib.warmup}%</span>
          </div>
          <div className="inbox-foot">
            <div style={{ display: "flex", gap: 5 }}>
              <AuthChip ok={ib.spf} label="SPF" /><AuthChip ok={ib.dkim} label="DKIM" /><AuthChip ok={ib.dmarc} label="DMARC" />
            </div>
            <span className="num" style={{ fontSize: 11.5, color: limitPct >= 100 ? "var(--amber)" : "var(--text-3)" }}>{ib.sentToday}/{ib.dailyLimit} today</span>
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function ConnectInboxModal({ onClose, onAdd }) {
  const PROVIDERS = [
    { id: "Google Workspace", icon: "mail" },
    { id: "Outlook", icon: "mail" },
    { id: "Other IMAP", icon: "server" },
  ];
  const [provider, setProvider] = React.useState("Google Workspace");
  const [email, setEmail] = React.useState("");
  const [purpose, setPurpose] = React.useState("outbound");
  const [limit, setLimit] = React.useState(30);
  const valid = /\S+@\S+\.\S+/.test(email);
  const create = () => {
    if (!valid) return;
    const domain = email.split("@")[1];
    onAdd({
      id: "ib" + Date.now(), email: email.trim(), name: email.split("@")[0], domain, provider, purpose,
      status: purpose === "transactional" ? "healthy" : "warming",
      warmup: purpose === "transactional" ? 100 : 10,
      dailyLimit: purpose === "transactional" ? 0 : limit, sentToday: 0,
      inboxPct: purpose === "transactional" ? 99 : 70, spamPct: purpose === "transactional" ? 1 : 12,
      bounce: 0.0, replies: 0, spf: true, dkim: false, dmarc: false, lastSync: "just now",
      locked: purpose === "transactional",
    });
  };
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" style={{ width: "min(500px, 100%)" }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div className="agent-ico" style={{ width: 34, height: 34 }}><Icon name="mail" size={16} /></div>
            <span style={{ fontSize: 15.5, fontWeight: 680 }}>Connect an inbox</span>
          </div>
          <button className="btn btn--ghost btn--icon" onClick={onClose}><Icon name="x" size={18} /></button>
        </div>
        <div className="modal-body" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="brief-field"><label className="brief-label">Provider</label>
            <div className="facet-chips">{PROVIDERS.map((p) => (
              <button key={p.id} className="facet-chip" data-on={provider === p.id || undefined} onClick={() => setProvider(p.id)}><Icon name={p.icon} size={13} /> {p.id}</button>
            ))}</div></div>
          <div className="brief-field"><label className="brief-label">Email address</label>
            <input className="input" autoFocus value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@yourdomain.com" /></div>
          <div className="brief-field"><label className="brief-label">Purpose</label>
            <Segmented value={purpose === "outbound" ? "Cold outbound" : "Transactional"} onChange={(v) => setPurpose(v === "Cold outbound" ? "outbound" : "transactional")} options={["Cold outbound", "Transactional"]} />
            <div className="insp-hint">{purpose === "outbound" ? "Joins the warm-up rotation and sends cold outreach." : "Quarantined from cold sends — carries contracts & invoices only."}</div></div>
          {purpose === "outbound" && (
            <div className="ag-field" style={{ margin: 0 }}>
              <div className="ag-slider-head"><span className="ag-flabel">Daily send cap</span><span className="num ag-sval">{limit}</span></div>
              <input type="range" className="ag-range" min="10" max="80" value={limit} onChange={(e) => setLimit(+e.target.value)} />
              <div className="insp-hint">New domains start low and ramp as they warm up.</div>
            </div>
          )}
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: "0 22px 20px" }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button className="btn btn--primary" onClick={create} disabled={!valid}><Icon name="link" size={14} /> Connect inbox</button>
        </div>
      </div>
    </div>
  );
}

function CompliancePanel() {
  const c = window.WTC.compliance;
  const [sup, setSup] = React.useState(c.suppression);
  const [adding, setAdding] = React.useState("");
  const reasonColor = (r) => r === "Unsubscribed" ? "var(--amber)" : r === "Hard bounce" ? "var(--red)" : "var(--text-2)";
  const add = () => { if (!/\S+@\S+/.test(adding)) return; setSup((s) => [{ id: "sup" + Date.now(), email: adding.trim(), name: "—", brand: "Manual add", reason: "Do not contact", date: "Just now" }, ...s]); setAdding(""); };
  return (
    <React.Fragment>
      <div className="stats-divider"><span><Icon name="shield" size={15} style={{ color: "var(--accent)", verticalAlign: "-3px", marginRight: 7 }} />Compliance & suppression</span></div>
      <div className="deliv-grid">
        <div className="panel">
          <div className="panel-head"><div><div className="panel-title">Suppression list</div><div className="panel-sub">{sup.length} addresses — never contacted, auto-enforced on every send</div></div></div>
          <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
            <input className="input num" placeholder="Add email to suppress…" value={adding} onChange={(e) => setAdding(e.target.value)} onKeyDown={(e) => e.key === "Enter" && add()} />
            <button className="btn" onClick={add}><Icon name="plus" size={14} /> Add</button>
          </div>
          <div className="dense-wrap" style={{ boxShadow: "none" }}>
            <table className="dense"><thead><tr><th>Email</th><th>Brand</th><th>Reason</th><th>Date</th></tr></thead>
              <tbody>{sup.map((s) => (
                <tr key={s.id}><td className="num" style={{ fontSize: 12, color: "var(--text-2)" }}>{s.email}</td><td style={{ color: "var(--text-3)" }}>{s.brand}</td>
                  <td><span style={{ color: reasonColor(s.reason), fontWeight: 600, fontSize: 12.5 }}>{s.reason}</span></td><td style={{ color: "var(--text-3)" }}>{s.date}</td></tr>
              ))}</tbody>
            </table>
          </div>
        </div>
        <div className="panel">
          <div className="panel-head"><div><div className="panel-title">Every email includes</div><div className="panel-sub">CAN-SPAM essentials, auto-appended</div></div></div>
          <div className="comply-item"><Icon name="check" size={15} style={{ color: "var(--green)" }} /><div><div style={{ fontSize: 13, fontWeight: 600 }}>One-click unsubscribe</div><div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>"{c.unsubText}"</div></div></div>
          <div className="comply-item"><Icon name="check" size={15} style={{ color: "var(--green)" }} /><div><div style={{ fontSize: 13, fontWeight: 600 }}>Physical mailing address</div><div className="num" style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>{c.fromAddress}</div></div></div>
          <div className="comply-item"><Icon name="check" size={15} style={{ color: "var(--green)" }} /><div><div style={{ fontSize: 13, fontWeight: 600 }}>Auto-suppress on unsubscribe & bounce</div><div style={{ fontSize: 12, color: "var(--text-3)", marginTop: 2 }}>Replies stop the cadence; opt-outs are added here instantly.</div></div></div>
        </div>
      </div>
    </React.Fragment>
  );
}

function Deliverability({ onApprove }) {
  const W = window.WTC, d = W.deliverability, K = W.kpis;
  const [purpose, setPurpose] = React.useState("All");
  const [tf, setTf] = React.useState("30 days");
  const [health, setHealth] = React.useState(null);
  const [loadingHealth, setLoadingHealth] = React.useState(true);
  const run = React.useCallback(() => {
    setLoadingHealth(true);
    analyzeHealth().then((r) => { setHealth(r); setLoadingHealth(false); });
  }, []);
  React.useEffect(() => { run(); }, [run]);

  const ibs = W.inboxes.filter((i) =>
    purpose === "All" ? true : purpose === "Outbound" ? i.purpose === "outbound" : i.purpose === "transactional");

  const [connecting, setConnecting] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [, bump] = React.useReducer((x) => x + 1, 0);
  const addInbox = (ib) => {
    W.inboxes.push(ib);
    setConnecting(false);
    setToast(ib.email + " connected · warming up");
    setTimeout(() => setToast(null), 2400);
    bump();
  };

  return (
    <div className="surface-scroll">
      <div className="today-head">
        <div>
          <h1 className="page-title">Stats</h1>
          <p className="page-sub">Pipeline performance and inbox deliverability — the numbers that say whether the engine is working.</p>
        </div>
        <Segmented value={tf} onChange={setTf} options={["7 days", "30 days", "Quarter"]} />
      </div>

      {/* pipeline / business performance */}
      <div className="kpi-grid">
        <KpiCard label="Win rate" value={K.winPct} unit="%" delta={K.winDelta} deltaDir="up" sub="won vs lost, this period" accent="var(--green)" />
        <KpiCard label="Active targets" value={K.active} delta={K.activeDelta} deltaDir="up" sub="in pipeline now" />
        <KpiCard label="Contacted" value={K.contacted} delta={K.contactedDelta} deltaDir="up" sub="in this timeframe" />
        <KpiCard label="Due today" value={K.dueToday} sub="ready to send" accent="var(--accent)" />
        <PipelineSnapshot pipeline={K.pipeline} />
        <KpiCard label="Activity" value={K.spark.reduce((a, b) => a + b, 0)} unit="touches"><div style={{ marginTop: 10 }}><Sparkline data={K.spark} w={150} /></div></KpiCard>
        <RecentWinsCard />
      </div>

      <div className="stats-divider">
        <span><Icon name="shield" size={15} style={{ color: "var(--accent)", verticalAlign: "-3px", marginRight: 7 }} />Inbox deliverability</span>
        <button className="btn" onClick={() => setConnecting(true)}><Icon name="plus" size={15} /> Connect inbox</button>
      </div>

      {/* KPIs */}
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(5, 1fr)" }}>
        <HealthKpi label="Health score" value={d.healthScore} delta={d.healthDelta} deltaDir="up" accent="var(--green)" icon="shield" />
        <HealthKpi label="Inbox rate" value={d.inboxRate} unit="%" delta={d.inboxDelta} deltaDir="up" accent="var(--accent)" icon="gauge" />
        <HealthKpi label="Daily volume" value={d.dailyVolume} delta={d.dailyVolumeDelta} deltaDir="up" icon="mail" />
        <HealthKpi label="Replies" value={d.replies} delta={d.repliesDelta} deltaDir="up" accent="var(--green)" icon="reply" />
        <HealthKpi label="Bounce rate" value={d.bounceRate} unit="%" delta={d.bounceDelta} deltaDir="down" good={true} accent={d.bounceRate > 2 ? "var(--red)" : "var(--text)"} icon="trend" />
      </div>

      {/* AI health */}
      <div className="health-ai">
        <div className="claude-orb"><Icon name="sparkles" size={15} /></div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
            <span style={{ fontSize: 12.5, fontWeight: 650 }}>Claude · email health</span>
            <span className="live-tag" style={{ padding: "2px 8px", fontSize: 10.5 }}>
              <span className="stagedot" style={{ background: (window.claude && window.claude.complete) ? "var(--green)" : "var(--text-3)" }}></span>
              {(window.claude && window.claude.complete) ? "live" : "demo"}
            </span>
            <span style={{ flex: 1 }}></span>
            <button className="btn btn--sm btn--ghost" onClick={run} disabled={loadingHealth}><Icon name="refresh" size={13} /> Re-analyze</button>
          </div>
          {loadingHealth
            ? <div style={{ display: "flex", gap: 5, alignItems: "center", height: 20 }}><span className="think-dot"></span><span className="think-dot"></span><span className="think-dot"></span></div>
            : <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6, color: "var(--text)" }}>{health && health.text}</p>}
        </div>
      </div>

      {/* placement + actions */}
      <div className="deliv-grid">
        <PlacementChart data={d.placement} />
        <RequiredActions alerts={d.alerts} />
      </div>

      {/* provider */}
      <div style={{ marginTop: 16 }}><ProviderBars providers={d.providers} /></div>

      {/* compliance */}
      <CompliancePanel />

      {/* connected inboxes */}
      <div className="queue-head" style={{ marginTop: 26 }}>
        <h2 style={{ fontSize: 15, fontWeight: 670, margin: 0 }}>Connected inboxes</h2>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Segmented value={purpose} onChange={setPurpose} options={["All", "Outbound", "Transactional"]} />
          <button className="btn btn--sm" onClick={() => setConnecting(true)}><Icon name="plus" size={14} /> Connect</button>
        </div>
      </div>
      <div className="inbox-grid">
        {ibs.map((ib) => <InboxCard key={ib.id} ib={ib} />)}
      </div>
      {connecting && <ConnectInboxModal onClose={() => setConnecting(false)} onAdd={addInbox} />}
      {toast && <div className="toast toast--ok"><Icon name="check" size={15} /> {toast}</div>}
    </div>
  );
}

Object.assign(window, { Deliverability });