// ==================== Lead Inbox ====================

function Inbox({ leads, onOpen, filterState, setFilterState, selected, setSelected, savedView, onSavedView }) {
  const [sort, setSort] = React.useState({ key: "submittedHoursAgo", dir: "asc" });
  const [menuFor, setMenuFor] = React.useState(null);

  const sorted = React.useMemo(() => {
    const s = [...leads];
    const { key, dir } = sort;
    s.sort((a, b) => {
      const av = a[key], bv = b[key];
      if (typeof av === "number") return (av - bv) * (dir === "asc" ? 1 : -1);
      return String(av ?? "").localeCompare(String(bv ?? "")) * (dir === "asc" ? 1 : -1);
    });
    return s;
  }, [leads, sort]);

  const toggleSort = k => setSort(s => ({ key: k, dir: s.key === k && s.dir === "asc" ? "desc" : "asc" }));
  const toggleRow = id => setSelected(sel => sel.includes(id) ? sel.filter(x => x !== id) : [...sel, id]);
  const allSelected = selected.length > 0 && selected.length === leads.length;
  const someSelected = selected.length > 0 && !allSelected;

  const Sh = ({ k, label, className }) => (
    <th className={cx("sortable", className)} onClick={() => toggleSort(k)}>
      {label}
      {sort.key === k && <span className="sortcaret">{sort.dir === "asc" ? "▲" : "▼"}</span>}
    </th>
  );

  return (
    <>
      <FilterBar filterState={filterState} setFilterState={setFilterState} savedView={savedView} onSavedView={onSavedView} total={leads.length} />
      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{width: 32}}>
                <div className={cx("check", allSelected && "check--on", someSelected && "check--half")}
                     onClick={() => setSelected(allSelected ? [] : leads.map(l => l.id))}>
                  {allSelected && <Icon name="check" size={10} />}
                  {someSelected && <div style={{width:8,height:2,background:"#fff"}}/>}
                </div>
              </th>
              <Sh k="name" label="Lead" />
              <Sh k="company" label="Company" />
              <Sh k="submittedHoursAgo" label="Submitted" className="td--num" />
              <Sh k="outcome" label="Quiz 1" />
              <Sh k="score" label="Quiz 2 score" className="td--num" />
              <Sh k="flagCount" label="Flags" className="td--num" />
              <th>Assigned</th>
              <Sh k="status" label="Status" />
              <th style={{width: 60}}></th>
            </tr>
          </thead>
          <tbody>
            {sorted.map(lead => (
              <tr key={lead.id}
                  className={cx(selected.includes(lead.id) && "is-selected")}
                  onClick={() => onOpen(lead.id)}>
                <td onClick={e => { e.stopPropagation(); toggleRow(lead.id); }}>
                  <div className={cx("check", selected.includes(lead.id) && "check--on")}>
                    {selected.includes(lead.id) && <Icon name="check" size={10} />}
                  </div>
                </td>
                <td>
                  <div className="cell-name">
                    <span className="cell-name__name">{lead.name}</span>
                    <span className="cell-name__email">{lead.email}</span>
                  </div>
                </td>
                <td>
                  <div className="cell-co">
                    <span className="cell-co__name">{lead.company}</span>
                    <span className="cell-co__title">{lead.title}</span>
                  </div>
                </td>
                <td className="td--mute td--num">{relTime(lead.submittedAt)}</td>
                <td><OutcomePill outcome={lead.outcome} /></td>
                <td><ScoreBar score={lead.score} /></td>
                <td>
                  <span className={cx("flagcount", lead.flagCount > 0 && "flagcount--on")}>
                    {lead.flagCount > 0 && <Icon name="warn" size={12} />}
                    {lead.flagCount}
                  </span>
                </td>
                <td><Avatar user={lead.assignee} size={22} /></td>
                <td><StatusPill status={lead.status} /></td>
                <td>
                  <div className="row-actions" onClick={e => e.stopPropagation()}>
                    <button className="iconbtn" title="Quick call"><Icon name="phone" /></button>
                    <button className="iconbtn" title="Quick email"><Icon name="mail" /></button>
                    <button className="iconbtn" title="More" onClick={() => setMenuFor(menuFor === lead.id ? null : lead.id)}>
                      <Icon name="more" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        {selected.length > 0 && (
          <div className="bulkbar">
            <span className="bulkbar__count">{selected.length} selected</span>
            <div className="bulkbar__sep" />
            <button className="btn"><Icon name="tag" size={13} /> Assign</button>
            <button className="btn"><Icon name="flag" size={13} /> Change status</button>
            <button className="btn"><Icon name="sparkle" size={13} /> Re-run AI</button>
            <button className="btn"><Icon name="download" size={13} /> Export</button>
            <button className="btn"><Icon name="tag" size={13} /> Tag</button>
            <div className="bulkbar__sep" />
            <button className="btn" onClick={() => setSelected([])}><Icon name="x" size={13} /> Clear</button>
          </div>
        )}
      </div>
    </>
  );
}

function FilterBar({ filterState, setFilterState, savedView, onSavedView, total }) {
  const f = filterState;
  const up = (k, v) => setFilterState(s => ({ ...s, [k]: v }));
  return (
    <>
      <div className="subbar">
        <div className="subbar__tabs">
          {[
            { id: "all", label: "All", n: total },
            { id: "new", label: "New", n: 6 },
            { id: "review", label: "In review", n: 9 },
            { id: "contacted", label: "Contacted", n: 7 },
            { id: "closed", label: "Closed", n: 12 },
          ].map(t => (
            <div key={t.id}
                 className={cx("subbar__tab", (f.status === t.id || (!f.status && t.id === "all")) && "subbar__tab--active")}
                 onClick={() => up("status", t.id === "all" ? null : t.id)}>
              {t.label} <span style={{opacity:0.6, marginLeft:4}}>{t.n}</span>
            </div>
          ))}
        </div>
        <div className="subbar__sep" />
        <div className="subbar__tabs">
          <button className="btn btn--sm"><Icon name="plus" size={11}/> Save view</button>
          <button className="btn btn--sm btn--ghost">Columns</button>
        </div>
        <div style={{marginLeft:"auto", fontSize:11.5, color:"var(--ink-500)"}}>
          {total} leads · last sync <b className="mono" style={{color:"var(--ink-900)"}}>14s ago</b>
        </div>
      </div>

      <div className="filterbar">
        <button className="btn btn--sm"><Icon name="filter" size={11}/> Filters</button>

        <div className={cx("filter", f.outcome && "filter--active")}
             onClick={() => up("outcome", f.outcome ? null : "candidate")}>
          Outcome <span className="filter__val">{f.outcome ? APP_DATA.OUTCOMES[f.outcome].label : "any"}</span>
          <Icon name="down" size={11} className="filter__x"/>
        </div>

        <div className="filter__range">
          Score
          <input type="range" min="0" max="100" value={f.minScore}
                 onChange={e => up("minScore", +e.target.value)} />
          <span className="mono" style={{color:"var(--ink-700)"}}>{f.minScore}+</span>
        </div>

        <div className={cx("filter", f.redFlags && "filter--active")}
             onClick={() => up("redFlags", !f.redFlags)}>
          <Icon name="warn" size={11}/> Red flags only
        </div>

        <div className={cx("filter", f.assignee && "filter--active")}
             onClick={() => up("assignee", f.assignee ? null : "u_mr")}>
          Assigned <span className="filter__val">{f.assignee ? APP_DATA.TEAM.find(t=>t.id===f.assignee)?.name.split(" ")[0] : "any"}</span>
          <Icon name="down" size={11} className="filter__x"/>
        </div>

        <div className="filter">
          Submitted <span className="filter__val">last 30d</span>
          <Icon name="down" size={11} className="filter__x"/>
        </div>

        <div className="filter">
          Company size <span className="filter__val">any</span>
          <Icon name="down" size={11} className="filter__x"/>
        </div>

        <div className="filter">
          Revenue <span className="filter__val">any</span>
          <Icon name="down" size={11} className="filter__x"/>
        </div>

        <div className="filter">
          Industry <span className="filter__val">any</span>
          <Icon name="down" size={11} className="filter__x"/>
        </div>

        <div style={{marginLeft:"auto", display:"flex", gap:6}}>
          <button className="btn btn--sm btn--ghost" onClick={() => setFilterState({ minScore: 0 })}>Reset</button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { Inbox, FilterBar });