/* All Ads — filterable table */

function AllAdsTab({ creatives, mode, sel, setSel, statusFilter, setStatusFilter, onEdit, onRemove }) {
  const target = window.ADORE.platforms.target_cpl;

  const statuses = mode === "live"
    ? ["all", "active", "fatigued", "underperformer", "gathering", "paused"]
    : ["all", "ready", "paused"];

  const rows = creatives.filter(c => {
    if (c.removed) return false;
    const st = mode === "live" ? c.liveStatus : c.status;
    if (statusFilter !== "all" && st !== statusFilter) return false;
    return true;
  });

  function toggle(id) { setSel(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); }
  const allSel = rows.length > 0 && rows.every(c => sel.has(c.id));
  function toggleAll() {
    setSel(prev => {
      const n = new Set(prev);
      if (allSel) rows.forEach(c => n.delete(c.id));
      else rows.forEach(c => n.add(c.id));
      return n;
    });
  }

  return (
    <div>
      <div className="chiprow" style={{ marginBottom: 18 }}>
        {statuses.map(s => (
          <button key={s} className={"chip" + (statusFilter === s ? " on" : "")} onClick={() => setStatusFilter(s)}>
            {s === "all" ? "All" : statusMeta(s).label}
          </button>
        ))}
      </div>

      <div className="table-wrap">
        <table className="ads">
          <thead>
            <tr>
              <th style={{ width: 38 }}><span className={"ck" + (allSel ? " on" : "")} onClick={toggleAll}>{allSel && <Ico d={I.check} s={11} />}</span></th>
              <th>Ad</th>
              <th>Model / Angle</th>
              <th>Format</th>
              <th>Status</th>
              <th className="num">Spend</th>
              <th className="num">Leads</th>
              <th className="num">CPL</th>
              <th className="num">CTR</th>
              <th style={{ width: 80 }}></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(c => {
              const live = mode === "live";
              const st = live ? c.liveStatus : c.status;
              const m = live && st !== "paused" && st !== "gathering";
              const cpaOver = c.live.cpa != null && c.live.cpa > target;
              return (
                <tr key={c.id} className={sel.has(c.id) ? "rsel" : ""}>
                  <td><span className={"ck" + (sel.has(c.id) ? " on" : "")} onClick={() => toggle(c.id)}>{sel.has(c.id) && <Ico d={I.check} s={11} />}</span></td>
                  <td className="adid">{c.id}</td>
                  <td>
                    <div className="model-cell">{shortModel(c.model)}</div>
                    <div className="angle-cell">{c.angle}</div>
                  </td>
                  <td className="mono" style={{ fontSize: 12, color: "var(--t2)" }}>{c.format}</td>
                  <td><Badge status={st} /></td>
                  <td className="num">{m ? fmt.money(c.live.spend) : "—"}</td>
                  <td className="num">{m ? (c.live.leads || "—") : "—"}</td>
                  <td className={"num " + (m && c.live.cpa != null ? (cpaOver ? "cpa-over" : "cpa-under") : "")}>{m ? fmt.cpl(c.live.cpa) : "—"}</td>
                  <td className="num">{m ? fmt.pct(c.live.ctr) : "—"}</td>
                  <td>
                    <div className="tbl-actions">
                      <button className="ico-btn" onClick={() => onEdit(c.id)} title="Edit"><Ico d={I.edit} s={13} /></button>
                      <button className="ico-btn danger" onClick={() => onRemove(c.id)} title="Remove"><Ico d={I.x} s={13} /></button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { AllAdsTab });