// mailroom-suppression.jsx — Suppression list. Searchable table, source chips,
// bulk add via drawer. Exports: ViewSuppression.

const SUPP_ROWS = [
  { email: "marcus@flowstate.app", source: "reply", reason: "Replied: not interested", date: "Jun 11" },
  { email: "sofia@cohort.cc", source: "unsubscribe", reason: "Clicked unsubscribe", date: "Jun 11" },
  { email: "noreply@stripe.com", source: "manual", reason: "Vendor — never contact", date: "Jun 10" },
  { email: "j.harris@oldlead.io", source: "bounce", reason: "Hard bounce · 550 no mailbox", date: "Jun 10" },
  { email: "dana@northwind.io", source: "dedup", reason: "Already in cmp_8fa2", date: "Jun 9" },
  { email: "team@competitor.com", source: "manual", reason: "Competitor domain", date: "Jun 8" },
  { email: "ceo@bigcorp.com", source: "reply", reason: "Replied: remove me", date: "Jun 8" },
  { email: "bounce@deadmx.net", source: "bounce", reason: "Hard bounce · invalid domain", date: "Jun 7" },
  { email: "info@gmail.com", source: "dedup", reason: "Role address suppressed", date: "Jun 7" },
  { email: "priya@ledgerloop.com", source: "manual", reason: "Already a customer", date: "Jun 6" },
];
const SUPP_SRC = {
  manual: { tone: "neutral", label: "manual" },
  unsubscribe: { tone: "warn", label: "unsubscribe" },
  bounce: { tone: "bad", label: "bounce" },
  reply: { tone: "info", label: "reply" },
  dedup: { tone: "accent", label: "dedup" },
};

function ViewSuppression() {
  const t = useT();
  const [q, setQ] = React.useState("");
  const [src, setSrc] = React.useState("all");
  const [sel, setSel] = React.useState({});
  const [add, setAdd] = React.useState(false);
  const [data, setData] = React.useState(SUPP_ROWS);
  const rows = data.filter((r) => (src === "all" || r.source === src) && r.email.toLowerCase().includes(q.toLowerCase()));
  const selCount = Object.values(sel).filter(Boolean).length;

  const byCount = (s) => data.filter((r) => r.source === s).length;
  const removeRows = (emails) => { setData((d) => d.filter((r) => !emails.includes(r.email))); setSel({}); };
  const th = { textAlign: "left", fontSize: 10, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase",
    color: t.textMuted, padding: "0 14px", height: 38, whiteSpace: "nowrap" };
  const td = { padding: "0 14px", fontSize: 13, color: t.text, whiteSpace: "nowrap" };

  return (
    <>
      <PageHeader title="Suppression" sub={`${data.length.toLocaleString()} addresses · never contacted again`}>
        <SearchBox placeholder="Search email" value={q} onChange={setQ} width={220} />
        <Btn kind="soft" icon="download" onClick={() => mrToast(`Exported ${data.length} addresses · suppression.csv`, { icon: "download" })}>Export</Btn>
        <Btn kind="primary" icon="plus" onClick={() => setAdd(true)}>Bulk add</Btn>
      </PageHeader>

      <div style={{ flex: 1, overflowY: "auto", padding: t.pad, display: "flex", flexDirection: "column", gap: t.gap }}>
        {/* source filter row */}
        <div style={{ display: "flex", alignItems: "center", gap: 7, flexWrap: "wrap" }}>
          {["all", "manual", "unsubscribe", "bounce", "reply", "dedup"].map((s) => {
            const on = src === s;
            const n = s === "all" ? SUPP_ROWS.length : byCount(s);
            return (
              <button key={s} onClick={() => setSrc(s)} style={{ display: "flex", alignItems: "center", gap: 6, padding: "0 11px", height: 30,
                borderRadius: 999, border: `1px solid ${on ? t.accentBorder : t.border}`, background: on ? t.accentTint : t.card,
                color: on ? t.accentText : t.textSec, cursor: "pointer", fontFamily: t.font, fontSize: 12.5, fontWeight: on ? 650 : 500 }}>
                {s === "all" ? "All sources" : s}
                <span style={{ fontFamily: t.mono, fontSize: 11, opacity: 0.7 }}>{n}</span>
              </button>
            );
          })}
          <div style={{ flex: 1 }} />
          {selCount > 0 && (
            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
              <span style={{ fontSize: 12.5, color: t.textSec }}><Mono style={{ fontWeight: 700, color: t.text }}>{selCount}</Mono> selected</span>
              <Btn kind="danger" size="sm" icon="trash" onClick={() => { const em = Object.keys(sel).filter((k) => sel[k]); removeRows(em); mrToast(`Removed ${em.length} from suppression`, { tone: "warn", icon: "trash" }); }}>Remove</Btn>
            </div>
          )}
        </div>

        <Card pad={false} style={{ overflow: "hidden" }}>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720 }}>
              <thead>
                <tr style={{ borderBottom: `1px solid ${t.border}`, background: t.sunken }}>
                  <th style={{ ...th, width: 40, paddingRight: 0 }}></th>
                  <th style={{ ...th, width: "34%" }}>Email</th>
                  <th style={th}>Source</th>
                  <th style={th}>Reason</th>
                  <th style={{ ...th, textAlign: "right" }}>Added</th>
                  <th style={{ ...th, width: 44 }}></th>
                </tr>
              </thead>
              <tbody>
                {rows.length === 0 && (
                  <tr><td colSpan={6} style={{ padding: "52px 16px", textAlign: "center", color: t.textMuted }}>
                    <Icon name="search" size={26} color={t.textMuted} style={{ margin: "0 auto 12px" }} />
                    <div style={{ fontFamily: t.head, fontSize: 15, fontWeight: 700, color: t.text }}>No addresses match</div>
                    <div style={{ fontSize: 13, marginTop: 5 }}>{q ? `Nothing for “${q}”.` : "Try a different source."}</div>
                  </td></tr>
                )}
                {rows.map((r, i) => (
                  <tr key={r.email} style={{ borderBottom: i < rows.length - 1 ? `1px solid ${t.border}` : "none", height: t.rowH + 2 }}>
                    <td style={{ ...td, paddingRight: 0 }}>
                      <span onClick={() => setSel({ ...sel, [r.email]: !sel[r.email] })} style={{ width: 16, height: 16, borderRadius: 4, cursor: "pointer",
                        border: `1.5px solid ${sel[r.email] ? t.accent : t.borderStrong}`, background: sel[r.email] ? t.accent : "transparent",
                        display: "flex", alignItems: "center", justifyContent: "center" }}>
                        {sel[r.email] && <Icon name="check" size={11} color="#fff" sw={3} />}
                      </span>
                    </td>
                    <td style={td}><Mono style={{ fontSize: 12.5, fontWeight: 600 }}>{r.email}</Mono></td>
                    <td style={td}><Chip tone={SUPP_SRC[r.source].tone} mono>{SUPP_SRC[r.source].label}</Chip></td>
                    <td style={{ ...td, color: t.textSec, fontSize: 12.5, whiteSpace: "normal" }}>{r.reason}</td>
                    <td style={{ ...td, textAlign: "right" }}><Mono style={{ fontSize: 12, color: t.textMuted }}>{r.date}</Mono></td>
                    <td style={{ ...td, textAlign: "center" }}><IconBtn icon="x" size={15} onClick={() => { removeRows([r.email]); mrToast("Removed from suppression", { icon: "x" }); }} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      </div>

      <Drawer open={add} onClose={() => setAdd(false)} title="Bulk add to suppression"
        sub="Paste emails — one per line, or comma-separated"
        footer={<>
          <Btn kind="ghost" onClick={() => setAdd(false)}>Cancel</Btn>
          <div style={{ flex: 1 }} />
          <Btn kind="primary" icon="ban" onClick={() => { setAdd(false); mrToast("Addresses suppressed · removed from active campaigns", { tone: "warn", icon: "ban" }); }}>Suppress all</Btn>
        </>}>
        <Field area rows={9} mono placeholder={"jane@acme.com\nsales@bigco.io\n..."} value={""} onChange={() => {}} />
        <div style={{ marginTop: 14 }}>
          <Label style={{ marginBottom: 8 }}>Source label</Label>
          <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
            {["manual", "bounce", "dedup"].map((s, i) => (
              <Chip key={s} tone={i === 0 ? "accent" : "neutral"} mono style={{ padding: "5px 11px", cursor: "pointer" }}>{s}</Chip>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 18, padding: "10px 13px", borderRadius: t.radiusSm,
          background: t.infoTint, border: `1px solid ${hexA(t.info, 0.3)}` }}>
          <Icon name="shield" size={15} color={t.info} />
          <span style={{ fontSize: 12.5, color: t.textSec }}>Suppressed addresses are removed from every active campaign immediately.</span>
        </div>
      </Drawer>
    </>
  );
}
window.ViewSuppression = ViewSuppression;