// assets/screen_sessions.jsx
function ScreenSessions({ go, t }) {
  const [search, setSearch] = React.useState('');
  const [status, setStatus] = React.useState(new Set(['running', 'completed', 'failed']));
  const [templates, setTemplates] = React.useState(new Set(TEMPLATE_KINDS.map(k => k.name)));
  const [apps, setApps] = React.useState(new Set(APPS));
  const [sortBy, setSortBy] = React.useState('started_at');
  const [page, setPage] = React.useState(1);
  const [selected, setSelected] = React.useState(new Set());
  const PAGE_SIZE = 50;

  const filtered = SESSIONS.filter(s =>
    status.has(s.status) && templates.has(s.template_kind) && apps.has(s.app) &&
    (!search || s.id.includes(search.toLowerCase()) || s.project_id.toLowerCase().includes(search.toLowerCase()) || s.merchant.includes(search.toLowerCase()) || s.project_name.toLowerCase().includes(search.toLowerCase()))
  );
  const sorted = [...filtered].sort((a, b) => {
    if (sortBy === 'duration') return b.duration - a.duration;
    if (sortBy === 'cost') return b.cost - a.cost;
    return b.started_at - a.started_at;
  });
  const pageItems = sorted.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
  const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));

  const toggle = (set, setFn, val) => {
    const n = new Set(set);
    if (n.has(val)) n.delete(val); else n.add(val);
    setFn(n);
    setPage(1);
  };

  const durCls = (d) => d < 300 ? 'text-success' : d < 900 ? 'text-warning' : 'text-danger';

  return (
    <div className="page">
      <div className="page-head">
        <h1>Sessions</h1>
        <span className="page-sub">{filtered.length.toLocaleString()} of {SESSIONS.length.toLocaleString()}</span>
        <div className="page-actions">
          <div className="segmented">
            <button>1h</button><button className="active">24h</button><button>7d</button><button>30d</button>
          </div>
          <button className="btn">
            <Icon name="download" size={13} /> Export CSV
          </button>
          <button className="btn">
            <Icon name="refresh" size={13} /> Refresh
          </button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 0 }}>
        {/* Filter sidebar */}
        <div className="filters">
          <div className="filter-group">
            <h4>Search</h4>
            <div style={{ position: 'relative' }}>
              <Icon name="search" size={12} style={{ position: 'absolute', left: 8, top: 8, color: 'var(--text-tertiary)' }} />
              <input className="input" style={{ paddingLeft: 26 }} placeholder="id / project / merchant" value={search} onChange={e => { setSearch(e.target.value); setPage(1); }} />
            </div>
          </div>

          <div className="filter-group">
            <h4>Status</h4>
            {['running', 'completed', 'failed'].map(s => {
              const count = SESSIONS.filter(x => x.status === s).length;
              return (
                <div key={s} className="filter-chip" onClick={() => toggle(status, setStatus, s)}>
                  <span className={`checkbox ${status.has(s) ? 'checked' : ''}`}>{status.has(s) && <Icon name="check" size={10} />}</span>
                  <StatusBadge status={s} />
                  <span className="count">{count}</span>
                </div>
              );
            })}
          </div>

          <div className="filter-group">
            <h4>Template kind</h4>
            {TEMPLATE_KINDS.map(k => {
              const count = SESSIONS.filter(x => x.template_kind === k.name).length;
              return (
                <div key={k.name} className="filter-chip" onClick={() => toggle(templates, setTemplates, k.name)}>
                  <span className={`checkbox ${templates.has(k.name) ? 'checked' : ''}`}>{templates.has(k.name) && <Icon name="check" size={10} />}</span>
                  <span style={{ width: 8, height: 8, background: k.color, borderRadius: 2, flexShrink: 0 }} />
                  {k.name}
                  <span className="count">{count}</span>
                </div>
              );
            })}
          </div>

          <div className="filter-group">
            <h4>App</h4>
            {APPS.map(a => {
              const count = SESSIONS.filter(x => x.app === a).length;
              return (
                <div key={a} className="filter-chip" onClick={() => toggle(apps, setApps, a)}>
                  <span className={`checkbox ${apps.has(a) ? 'checked' : ''}`}>{apps.has(a) && <Icon name="check" size={10} />}</span>
                  <Mono>{a}</Mono>
                  <span className="count">{count}</span>
                </div>
              );
            })}
          </div>

          <div className="filter-group">
            <h4>Duration</h4>
            <div style={{ display: 'flex', gap: 6 }}>
              <input className="input" placeholder="min" defaultValue="0" />
              <input className="input" placeholder="max" defaultValue="30m" />
            </div>
          </div>

          <div className="filter-group">
            <h4>Cost ($)</h4>
            <div style={{ display: 'flex', gap: 6 }}>
              <input className="input" placeholder="min" defaultValue="0.00" />
              <input className="input" placeholder="max" defaultValue="10.00" />
            </div>
          </div>

          <button className="btn ghost" style={{ width: '100%', justifyContent: 'center' }}>Reset filters</button>
        </div>

        {/* Table */}
        <div className="card" style={{ marginLeft: 16 }}>
          <div className="card-head">
            <span className="dim2 fs-12">{selected.size > 0 ? `${selected.size} selected` : `Page ${page} of ${totalPages}`}</span>
            <div className="actions" style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center' }}>
              <span className="dim fs-11">Sort:</span>
              <div className="segmented">
                <button className={sortBy === 'started_at' ? 'active' : ''} onClick={() => setSortBy('started_at')}>started</button>
                <button className={sortBy === 'duration' ? 'active' : ''} onClick={() => setSortBy('duration')}>duration</button>
                <button className={sortBy === 'cost' ? 'active' : ''} onClick={() => setSortBy('cost')}>cost</button>
              </div>
              {selected.size > 0 && (
                <button className="btn">
                  <Icon name="download" size={12} /> Export {selected.size}
                </button>
              )}
            </div>
          </div>
          <div className="table-wrap" style={{ maxHeight: 'calc(100vh - 280px)' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: 24 }}>
                    <span className={`checkbox ${selected.size === pageItems.length ? 'checked' : ''}`} onClick={() => setSelected(new Set(selected.size === pageItems.length ? [] : pageItems.map(s => s.id)))}>
                      {selected.size === pageItems.length && <Icon name="check" size={10} />}
                    </span>
                  </th>
                  <th style={{ width: 90 }}>Session</th>
                  <th>Project</th>
                  <th>Template</th>
                  <th>Merchant</th>
                  <th>Started</th>
                  <th className="num">Duration</th>
                  <th>Status</th>
                  <th className="num">Tools</th>
                  <th className="num">Cost</th>
                  <th>Model</th>
                  <th style={{ width: 28 }}></th>
                </tr>
              </thead>
              <tbody>
                {pageItems.map(s => (
                  <tr key={s.id} className={'clickable ' + (selected.has(s.id) ? 'selected' : '')}
                    onClick={() => go('/sessions/' + s.id)}>
                    <td onClick={e => { e.stopPropagation(); const n = new Set(selected); if (n.has(s.id)) n.delete(s.id); else n.add(s.id); setSelected(n); }}>
                      <span className={`checkbox ${selected.has(s.id) ? 'checked' : ''}`}>{selected.has(s.id) && <Icon name="check" size={10} />}</span>
                    </td>
                    <td className="id">{shortId(s.id)}</td>
                    <td><span style={{ color: 'var(--text-primary)' }}>{s.project_name}</span><span className="dim" style={{ marginLeft: 6, fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>{shortId(s.project_id, 8)}</span></td>
                    <td><Badge kind="neutral"><span style={{ width: 6, height: 6, background: s.template_color, borderRadius: '50%' }} />{s.template_kind}</Badge></td>
                    <td className="dim2"><Mono>{s.merchant.split('@')[0]}</Mono></td>
                    <td className="dim"><Mono>{formatRel(s.started_at)}</Mono></td>
                    <td className={'num ' + durCls(s.duration)}><Mono>{formatDur(s.duration)}</Mono></td>
                    <td><StatusBadge status={s.status} /></td>
                    <td className="num"><Mono>{s.tool_calls}</Mono></td>
                    <td className="num"><Mono>${s.cost.toFixed(2)}</Mono></td>
                    <td className="dim"><Mono>{s.model}</Mono></td>
                    <td><Icon name="chevron" size={12} style={{ color: 'var(--text-tertiary)' }} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="pagination">
            <span className="dim fs-12">{(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, sorted.length)} of {sorted.length.toLocaleString()}</span>
            <span className="spacer" />
            <button className="btn sm" disabled={page === 1} onClick={() => setPage(p => Math.max(1, p - 1))}><Icon name="chevron" size={12} style={{ transform: 'rotate(180deg)' }} /> Prev</button>
            <span className="dim fs-12"><Mono>{page} / {totalPages}</Mono></span>
            <button className="btn sm" disabled={page === totalPages} onClick={() => setPage(p => Math.min(totalPages, p + 1))}>Next <Icon name="chevron" size={12} /></button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenSessions });