// Strategies list — card grid, preserves the shipped aesthetic from
// the deleted strategies.jsx with one addition: a FILTER/WATCHLIST mode pill.

window.StrategiesList = function StrategiesList({ list, onOpen, onNew }) {
  return (
    <div>
      <window.TopBar
        title="Strategies"
        subtitle={list.loading ? 'Loading…' : `${list.data?.data?.length ?? 0} total`}
        right={
          <button onClick={onNew} style={{
            padding: '8px 16px', fontSize: 12.5, fontWeight: 500,
            background: 'var(--ink-900)', color: 'white', borderRadius: 7,
            border: 'none', cursor: 'pointer', fontFamily: 'inherit',
          }}>+ New strategy</button>
        }
      />
      <div style={{ padding: '24px 32px' }} className="page-fade">
        {list.error && <window.ErrorBanner error={list.error} onRetry={list.reload}/>}
        {list.loading && <div style={{ color: 'var(--ink-500)', fontSize: 12.5 }}>Loading…</div>}
        {!list.loading && !list.error && (
          !(list.data?.data?.length)
            ? <window.EmptyState title="No strategies yet" hint="Create a strategy to screen tickers on a recurring cadence."/>
            : (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 12 }}>
                {list.data.data.map(s => <StrategyCard key={s.id} s={s} onClick={() => onOpen(s.id)}/>)}
              </div>
            )
        )}
      </div>
    </div>
  );
};

function StrategyCard({ s, onClick }) {
  return (
    <div onClick={onClick} style={{
      background: 'var(--paper)', border: '1px solid var(--ink-150)',
      borderRadius: 12, padding: '16px 18px',
      display: 'flex', flexDirection: 'column', gap: 8,
      cursor: 'pointer',
      transition: 'transform 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease',
    }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--sh-2)'; e.currentTarget.style.borderColor = 'var(--ink-200)'; }}
       onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--ink-150)'; }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: 8 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-900)' }}>{s.name || '—'}</div>
        <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
          <Pill kind={s.mode === 'watchlist' ? 'watchlist' : 'filter'}>{(s.mode || 'filter').toUpperCase()}</Pill>
          <Pill kind={s.is_active ? 'active' : 'inactive'}>{s.is_active ? 'ACTIVE' : 'INACTIVE'}</Pill>
        </div>
      </div>
      {s.description && <div style={{ fontSize: 12.5, color: 'var(--ink-600)', lineHeight: 1.5 }}>{s.description}</div>}
      <div style={{ display: 'flex', gap: 20, marginTop: 4, fontSize: 11, color: 'var(--ink-500)' }}>
        <div>Re-run ≥ <Mono>{s.rerun_days ?? '—'}d</Mono></div>
        <div>Price Δ <Mono>{(s.rerun_price_pct != null) ? (s.rerun_price_pct * 100).toFixed(0) + '%' : '—'}</Mono></div>
        <div>Last screen <Mono>{window.formatDate(s.last_screen_at)}</Mono></div>
      </div>
    </div>
  );
}

function Pill({ kind, children }) {
  const styles = {
    active: { bg: 'var(--buy-soft)', fg: 'var(--buy)' },
    inactive: { bg: 'var(--ink-100)', fg: 'var(--ink-500)' },
    filter: { bg: 'var(--ink-100)', fg: 'var(--ink-600)' },
    watchlist: { bg: 'var(--warn-soft)', fg: 'var(--warn)' },
  };
  const s = styles[kind] || styles.inactive;
  return (
    <span style={{
      padding: '2px 8px', fontSize: 10.5, borderRadius: 999,
      background: s.bg, color: s.fg,
      fontFamily: 'var(--font-mono)', fontWeight: 600, letterSpacing: '0.02em',
    }}>{children}</span>
  );
}

function Mono({ children }) {
  return <span style={{ color: 'var(--ink-800)', fontFamily: 'var(--font-mono)' }}>{children}</span>;
}