// filter-chips-redesign.jsx — big-tech pattern: active-filter chips bar.
// Filters get a first-class, glanceable, obviously-tappable surface (chips that
// SHOW their value), instead of hiding behind a tappable number. Reuses the real
// EditFilterFlow (filter-screens.jsx) as the deep-link destination.

const { useState: rcS } = React;
const RT = () => window.flutterTokens;

// applied chips mapped to REAL filter ids (so a chip taps straight into editing it)
const CHIPS = [
  { id: 'sector',       label: '產業',     value: '半導體 +1' },
  { id: 'price',        label: '股價',     value: '20–80' },
  { id: 'volume',       label: '成交量',   value: '≥5,000' },
  { id: 'foreign_flow', label: '外資',     value: '連5買超' },
];

function FilterChip({ label, value, onTap }) {
  const t = RT();
  return (
    <button onClick={onTap} style={{
      flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 6,
      background: t.surface, border: `1px solid ${t.hairline}`, borderRadius: 999,
      padding: '8px 13px', cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap',
      boxShadow: '0 1px 2px rgba(31,27,22,0.04)',
    }}>
      <span style={{ fontSize: 13, fontWeight: 700, color: t.ink, letterSpacing: -0.1 }}>{label}</span>
      <span style={{ fontSize: 13, fontWeight: 600, color: t.ink2, fontFamily: '"Plus Jakarta Sans","Noto Sans TC",sans-serif' }}>{value}</span>
    </button>
  );
}

function ChipsScreen() {
  const t = RT();
  const [mode, setMode] = rcS('list');   // 'list' | 'edit'
  const [editId, setEditId] = rcS(null);
  const goEdit = (id) => { setEditId(id || null); setMode('edit'); };

  if (mode === 'edit') {
    return <window.EditFilterFlow resultCount={50} initialEditFilterId={editId} onClose={() => setMode('list')}/>;
  }

  const tickerBlue = 'oklch(0.42 0.10 245)';
  return (
    <div style={{ height: '100%', background: t.bg, display: 'flex', flexDirection: 'column' }}>
      <window.EMScreenHead title="台積電供應鏈"
        right={<button style={window.emIconRound(t)}><window.Icon name="settings" size={18} color={t.ink2}/></button>}/>

      {/* ── Active-filter chips bar — the first-class filter surface ── */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px 10px 16px', background: t.surface, borderBottom: `1px solid ${t.hairline}` }}>
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', scrollbarWidth: 'none', flex: 1 }}>
          {/* leading: open full editor */}
          <button onClick={() => goEdit(null)} style={{
            flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 6,
            background: t.ink, border: 'none', borderRadius: 999, padding: '8px 14px',
            cursor: 'pointer', fontFamily: 'inherit',
          }}>
            <window.Icon name="sliders" size={15} color={t.bg}/>
            <span style={{ fontSize: 13, fontWeight: 700, color: t.bg }}>篩選</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: t.bg, opacity: 0.7, fontFamily: '"Plus Jakarta Sans",monospace' }}>{CHIPS.length}</span>
          </button>
          {CHIPS.map(c => <FilterChip key={c.id} label={c.label} value={c.value} onTap={() => goEdit(c.id)}/>)}
        </div>
      </div>

      {/* ── Quiet status line — output, NOT a control ── */}
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, padding: '10px 16px 8px' }}>
        <span style={{ fontSize: 14, fontWeight: 700, color: t.ink2, whiteSpace: 'nowrap', flexShrink: 0 }}>符合 <span style={{ color: t.ink, fontFamily: '"Plus Jakarta Sans",monospace' }}>20</span> 檔</span>
        <span style={{ fontSize: 11.5, color: t.ink3, marginLeft: 'auto' }}>資料時間 今日 10:30 PM</span>
      </div>

      {/* ── Result list ── */}
      <div style={{ flex: 1, overflowY: 'auto' }}>
        {window.EM_STOCKS.map((s) => (
          <div key={s.sym} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 16px', borderBottom: `1px solid ${t.hairline}` }}>
            <window.EMTicker sym={s.sym}/><window.EMNameCell s={s}/><window.EMPriceCell s={s}/>
          </div>
        ))}
        <div style={{ height: 20 }}/>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <div style={{ minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, boxSizing: 'border-box' }}>
    <window.IOSDevice width={402} height={874}><ChipsScreen/></window.IOSDevice>
  </div>
);