// screen-leads.jsx — lead review table, filters, bulk actions, detail drawer
const { useState: useStateL, useMemo } = React;

function LeadsScreen({ leads, setLeads, toast, role, openId, setOpenId }) {
  const [sel, setSel] = useStateL(new Set());
  const [fStatus, setFStatus] = useStateL("all");
  const [fSource, setFSource] = useStateL("all");
  const [fScore, setFScore] = useStateL("all");
  const [fIndustry, setFIndustry] = useStateL("all");
  const [q, setQ] = useStateL("");
  const [sort, setSort] = useStateL("score");

  const industries = useMemo(() => [...new Set(leads.map(l => l.industry.split(" — ")[0]))].sort(), [leads]);

  const filtered = useMemo(() => {
    let r = leads.filter(l => {
      if (fStatus !== "all" && l.status !== fStatus) return false;
      if (fSource !== "all" && l.source !== fSource) return false;
      if (fIndustry !== "all" && !l.industry.startsWith(fIndustry)) return false;
      if (fScore === "high" && l.score < 85) return false;
      if (fScore === "mid" && (l.score < 70 || l.score >= 85)) return false;
      if (fScore === "low" && l.score >= 70) return false;
      if (q && !(l.company + l.url + l.location).toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
    r = [...r].sort((a, b) => sort === "score" ? b.score - a.score : sort === "company" ? a.company.localeCompare(b.company) : b.sizeNum - a.sizeNum);
    return r;
  }, [leads, fStatus, fSource, fScore, fIndustry, q, sort]);

  const allSel = filtered.length > 0 && filtered.every(l => sel.has(l.id));
  const someSel = filtered.some(l => sel.has(l.id));

  function toggleAll() {
    const n = new Set(sel);
    if (allSel) filtered.forEach(l => n.delete(l.id));
    else filtered.forEach(l => n.add(l.id));
    setSel(n);
  }
  function toggleOne(id) {
    const n = new Set(sel); n.has(id) ? n.delete(id) : n.add(id); setSel(n);
  }
  function applyStatus(ids, status, verb) {
    setLeads(prev => prev.map(l => ids.includes(l.id) ? { ...l, status } : l));
    toast(`${ids.length} lead${ids.length > 1 ? "s" : ""} ${verb}`);
    setSel(new Set());
  }

  const selIds = [...sel];
  const openLead = leads.find(l => l.id === openId);

  const filters = [
    { key: fStatus, set: setFStatus, label: "Status", opts: [["all","All statuses"],["new","New"],["reviewed","Reviewed"],["approved","Approved"],["rejected","Rejected"],["exported","Exported"],["synced","Synced"]] },
    { key: fScore, set: setFScore, label: "Score", opts: [["all","Any score"],["high","High (85+)"],["mid","Medium (70–84)"],["low","Low (<70)"]] },
    { key: fSource, set: setFSource, label: "Source", opts: [["all","All sources"],...Object.keys(window.SOURCES_META).map(s=>[s,s])] },
    { key: fIndustry, set: setFIndustry, label: "Industry", opts: [["all","All industries"],...industries.map(s=>[s,s])] },
  ];

  return (
    <div className="page page-wide">
      <div className="page-head row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <h2>Leads</h2>
          <p>Review enriched, ICP-scored prospects. Inspect the evidence behind every score, then approve, reject, or sync to CRM.</p>
        </div>
        <div className="row gap-8">
          <button className="btn" onClick={() => toast("Exported view to CSV")}><Icon name="download" size={15} />Export view</button>
          <button className="btn btn-primary" onClick={() => toast("Agent run started — discovering new leads")}><Icon name="sparkle" size={15} />Run agent</button>
        </div>
      </div>

      {/* Filter bar */}
      <div className="filterbar">
        <div className="search" style={{ width: 240 }}>
          <Icon name="search" size={15} />
          <input placeholder="Search company, domain, location…" value={q} onChange={e => setQ(e.target.value)} />
        </div>
        {filters.map((f, i) => (
          <label key={i} className={"fpill " + (f.key !== "all" ? "on" : "")}>
            <Icon name="filter" size={12} />
            <select value={f.key} onChange={e => f.set(e.target.value)}>
              {f.opts.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
            </select>
          </label>
        ))}
        <div className="spacer" />
        <label className="fpill">
          Sort:&nbsp;
          <select value={sort} onChange={e => setSort(e.target.value)}>
            <option value="score">Fit score</option>
            <option value="company">Company A–Z</option>
            <option value="size">Company size</option>
          </select>
        </label>
        <span className="muted" style={{ fontSize: 12.5 }}>{filtered.length} of {leads.length}</span>
      </div>

      {/* Bulk bar */}
      {sel.size > 0 && (
        <div style={{ marginBottom: 12 }}>
          <div className="bulkbar" style={{ display: "inline-flex" }}>
            <Checkbox checked indeterminate={!allSel} onChange={() => setSel(new Set())} />
            <strong>{sel.size} selected</strong>
            <span style={{ width: 1, height: 20, background: "rgba(255,255,255,0.18)" }} />
            <button className="btn btn-sm btn-primary" onClick={() => applyStatus(selIds, "approved", "approved")}><Icon name="check" size={14} />Approve</button>
            <button className="btn btn-sm" onClick={() => applyStatus(selIds, "rejected", "rejected")}><Icon name="x" size={14} />Reject</button>
            <button className="btn btn-sm" onClick={() => applyStatus(selIds, "exported", "exported to CSV")}><Icon name="download" size={14} />Export CSV</button>
            <button className="btn btn-sm" onClick={() => applyStatus(selIds, "synced", "synced to HubSpot")}><Icon name="sync" size={14} />Sync to CRM</button>
          </div>
        </div>
      )}

      {/* Table */}
      <div className="card">
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 38 }}><Checkbox checked={allSel} indeterminate={someSel && !allSel} onChange={toggleAll} /></th>
                <th>Company</th>
                <th>Fit score</th>
                <th>Industry</th>
                <th>Location</th>
                <th>Size</th>
                <th>Source</th>
                <th>Confidence</th>
                <th>Status</th>
                <th>Found</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(l => (
                <tr key={l.id} className={sel.has(l.id) ? "selected" : ""} onClick={() => setOpenId(l.id)}>
                  <td onClick={e => e.stopPropagation()}><Checkbox checked={sel.has(l.id)} onChange={() => toggleOne(l.id)} /></td>
                  <td>
                    <div className="cell-co">
                      <CompanyLogo name={l.company} />
                      <div>
                        <div className="co-name">{l.company}</div>
                        <div className="co-url">{l.url}</div>
                      </div>
                    </div>
                  </td>
                  <td><ScoreMeter value={l.score} /></td>
                  <td className="muted">{l.industry}</td>
                  <td className="muted">{l.location}</td>
                  <td className="muted">{l.size}</td>
                  <td><SourceTag source={l.source} /></td>
                  <td><Confidence value={l.confidence} /></td>
                  <td><StatusBadge status={l.status} /></td>
                  <td className="muted" style={{ fontSize: 12.5, whiteSpace: "nowrap" }}>{l.found}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {filtered.length === 0 && <Empty title="No leads match these filters" sub="Try clearing a filter or running the agent to discover more." />}
        </div>
      </div>

      {openLead && <LeadDrawer lead={openLead} onClose={() => setOpenId(null)} setLeads={setLeads} toast={toast} />}
    </div>
  );
}

// ---------- Lead detail drawer ----------
function LeadDrawer({ lead, onClose, setLeads, toast }) {
  function setStatus(status, verb) {
    setLeads(prev => prev.map(l => l.id === lead.id ? { ...l, status } : l));
    toast(`${lead.company} ${verb}`);
  }
  return (
    <>
      <div className="drawer-scrim" onClick={onClose} />
      <div className="drawer">
        <div className="drawer-head">
          <div className="row" style={{ justifyContent: "space-between" }}>
            <div className="row gap-12">
              <CompanyLogo name={lead.company} size={40} />
              <div>
                <div className="row gap-8" style={{ alignItems: "center" }}>
                  <span style={{ fontSize: 17, fontWeight: 700, letterSpacing: "-0.01em" }}>{lead.company}</span>
                  <StatusBadge status={lead.status} />
                </div>
                <div className="row gap-8 muted" style={{ fontSize: 12.5, marginTop: 2 }}>
                  <a href={"https://" + lead.url} target="_blank" rel="noreferrer" style={{ color: "var(--accent)", textDecoration: "none" }}>{lead.url}</a>
                  <span>·</span><span>{lead.industry}</span>
                  <span>·</span><span className="mono">{lead.id}</span>
                </div>
              </div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={onClose}><Icon name="x" size={18} /></button>
          </div>
        </div>

        <div className="drawer-body">
          {/* Score callout */}
          <div className="card card-pad mb-16" style={{ background: "var(--gray-50)" }}>
            <div className="row" style={{ justifyContent: "space-between" }}>
              <div>
                <div className="section-title" style={{ margin: 0 }}>ICP fit score</div>
                <div className="row gap-12" style={{ marginTop: 8, alignItems: "baseline" }}>
                  <span style={{ fontSize: 38, fontWeight: 800, letterSpacing: "-0.03em", color: lead.score >= 85 ? "var(--green)" : lead.score >= 70 ? "var(--amber)" : "var(--gray-500)" }}>{lead.score}</span>
                  <span className="muted">/ 100</span>
                  <span className="badge b-gray" style={{ marginLeft: 6 }}>{lead.score >= 85 ? "Strong fit" : lead.score >= 70 ? "Moderate fit" : "Weak fit"}</span>
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="section-title" style={{ margin: 0 }}>Source confidence</div>
                <div style={{ marginTop: 12 }}><Confidence value={lead.confidence} /></div>
              </div>
            </div>
            <div className="row gap-6" style={{ marginTop: 14, flexWrap: "wrap" }}>
              {lead.signals.map((s, i) => <span key={i} className="chip chip-accent"><Icon name="bolt" size={12} />{s}</span>)}
            </div>
          </div>

          {/* Rationale */}
          <div className="mb-16">
            <div className="section-title row gap-6"><Icon name="sparkle" size={13} color="var(--accent)" />Why the agent surfaced this lead</div>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--gray-700)", margin: 0, textWrap: "pretty" }}>{lead.rationale}</p>
            <div className="card card-pad mt-16" style={{ borderColor: "var(--accent-200)", background: "var(--accent-50)" }}>
              <div className="row gap-8" style={{ alignItems: "flex-start" }}>
                <Icon name="flag" size={16} color="var(--accent)" />
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13, color: "var(--accent-700)" }}>Recommended next action</div>
                  <div style={{ fontSize: 13, color: "var(--gray-700)", marginTop: 3 }}>{lead.next}</div>
                </div>
              </div>
            </div>
          </div>

          {/* Enrichment fields */}
          <div className="grid-2 mb-16">
            <div>
              <div className="section-title">Firmographics</div>
              <div className="kv"><span className="k">Location</span><span className="v">{lead.location}</span></div>
              <div className="kv"><span className="k">Employees</span><span className="v">{lead.size}</span></div>
              <div className="kv"><span className="k">Est. revenue</span><span className="v">{lead.enrich.revenue}</span></div>
              <div className="kv"><span className="k">Founded</span><span className="v">{lead.enrich.founded}</span></div>
              <div className="kv"><span className="k">Locations</span><span className="v">{lead.enrich.locations}</span></div>
            </div>
            <div>
              <div className="section-title">Detected tech & contacts</div>
              <div className="kv"><span className="k">Tech stack</span><span className="v" style={{ maxWidth: 180 }}>{lead.enrich.tech}</span></div>
              {lead.contacts.map((c, i) => (
                <div className="kv" key={i}>
                  <span className="k">{c.title}</span>
                  <span className="v">{c.name}{c.email && <div className="mono" style={{ fontSize: 11, color: "var(--accent)", fontWeight: 400 }}>{c.email}</div>}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Evidence */}
          <div>
            <div className="section-title row gap-6"><Icon name="quote" size={13} />Source evidence
              <span className="muted" style={{ fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>· inferred data, not verified fact</span>
            </div>
            {lead.evidence.map((e, i) => (
              <div className="evidence" key={i}>
                <div className="src"><SourceTag source={e.src} /><span>·</span><a href={"https://" + e.url} target="_blank" rel="noreferrer">{e.url}<Icon name="external" size={11} style={{ marginLeft: 3, verticalAlign: "-1px" }} /></a></div>
                <div className="quote">“{e.quote}”</div>
              </div>
            ))}
          </div>
        </div>

        <div className="drawer-foot">
          <button className="btn btn-primary" onClick={() => setStatus("approved", "approved")}><Icon name="check" size={15} />Approve</button>
          <button className="btn" onClick={() => setStatus("reviewed", "marked reviewed")}><Icon name="eye" size={15} />Mark reviewed</button>
          <button className="btn" onClick={() => setStatus("synced", "synced to HubSpot")}><Icon name="sync" size={15} />Sync to CRM</button>
          <div className="spacer" />
          <button className="btn btn-danger" onClick={() => setStatus("rejected", "rejected")}><Icon name="x" size={15} />Reject</button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { LeadsScreen, LeadDrawer });