// consolidate-demo.jsx — one-entry-point options for the filter/result affordance.
// Reuses edit-modes.jsx shared bits (EM_STOCKS, EMTicker, EMNameCell, EMPriceCell, EMScreenHead, emIconRound).

const { useState: cdS } = React;
const CT = () => window.flutterTokens;
const CONDS = [
  { t: '產業', v: '科技 · 通訊', n: 213 },
  { t: 'P/E', v: '< 30', n: 88 },
  { t: '營收成長', v: 'YoY > 15%', n: 24 },
  { t: '排名', v: '漲跌幅前 20', n: 20 },
];
const cFmt = (x) => x.toLocaleString('en-US');

function StockRows() {
  const t = CT();
  return window.EM_STOCKS.slice(0, 6).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>
  ));
}

function Sheet({ onClose, onEdit }) {
  const t = CT();
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(31,27,22,0.34)', display: 'flex', alignItems: 'flex-end', zIndex: 80 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: t.bg, borderRadius: '20px 20px 0 0', maxHeight: '74%', display: 'flex', flexDirection: 'column', animation: 'slideUp 240ms cubic-bezier(.2,.7,.2,1)' }}>
        <div style={{ width: 36, height: 4, background: t.hairline, borderRadius: 2, margin: '8px auto 4px' }}/>
        <div style={{ padding: '6px 18px 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 40 }}/>
          <div style={{ flex: 1, textAlign: 'center', fontSize: 18, fontWeight: 700, color: t.ink }}>篩選結果</div>
          <button onClick={onEdit} style={{ width: 40, textAlign: 'right', background: 'none', border: 'none', color: t.ink2, fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>編輯</button>
        </div>
        <div style={{ padding: '0 18px 22px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: `1px solid ${t.hairline}` }}>
            <span style={{ width: 84, fontSize: 13, color: t.ink3, fontWeight: 700 }}>交易所</span>
            <span style={{ flex: 1, fontSize: 12.5, color: t.ink3 }}>包含 NYSE、NASDAQ</span>
            <span style={{ fontFamily: '"Plus Jakarta Sans",monospace', fontSize: 13.5, fontWeight: 700, color: t.ink3 }}>6,500</span>
          </div>
          {CONDS.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: i === CONDS.length - 1 ? 'none' : `1px solid ${t.hairline}` }}>
              <span style={{ width: 84, fontSize: 13, color: t.ink, fontWeight: 700 }}>{c.t}</span>
              <span style={{ flex: 1, fontSize: 12.5, color: t.ink2 }}>{c.v}</span>
              <span style={{ fontFamily: '"Plus Jakarta Sans",monospace', fontSize: 13.5, fontWeight: 700, color: t.ink }}>{cFmt(c.n)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function gear() { const t = CT(); return <button style={window.emIconRound(t)}><window.Icon name="settings" size={18} color={t.ink2}/></button>; }

// ── A · 只留「結果 N ›」膠囊（meta 列），點開 sheet ──────────────
function OptionPill() {
  const t = CT();
  const [open, setOpen] = cdS(false);
  return (
    <div style={{ height: '100%', background: t.bg, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <window.EMScreenHead title="台積電供應鏈" right={gear()}/>
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px 8px 16px' }}>
        <button onClick={() => setOpen(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: t.surfaceAlt, border: `1px solid ${t.hairline}`, borderRadius: 999, padding: '6px 10px 6px 13px', cursor: 'pointer', fontFamily: 'inherit' }}>
          <span style={{ fontSize: 14.5, fontWeight: 700, color: t.ink }}>結果 <span style={{ fontFamily: '"Plus Jakarta Sans",monospace' }}>20</span></span>
          <window.Icon name="chevron" size={15} color={t.ink3}/>
        </button>
        <span style={{ flex: 1, fontSize: 12, color: t.ink3, marginLeft: 10 }}>資料時間 <span style={{ color: t.ink2, fontWeight: 600 }}>今日 10:30 PM</span></span>
      </div>
      <div style={{ flex: 1, overflowY: 'auto' }}><StockRows/></div>
      {open && <Sheet onClose={() => setOpen(false)} onEdit={() => setOpen(false)}/>}
    </div>
  );
}

// ── B · 只留上方整列 tile「結果 20 · 4 項條件 ›」，點開 sheet ────
function OptionTile() {
  const t = CT();
  const [open, setOpen] = cdS(false);
  return (
    <div style={{ height: '100%', background: t.bg, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <window.EMScreenHead title="台積電供應鏈" right={gear()}/>
      <button onClick={() => setOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '14px 16px', background: t.surfaceAlt, border: 'none', borderBottom: `1px solid ${t.hairline}`, cursor: 'pointer', fontFamily: 'inherit' }}>
        <span style={{ fontSize: 15, fontWeight: 700, color: t.ink }}>結果 <span style={{ fontFamily: '"Plus Jakarta Sans",monospace' }}>20</span></span>
        <span style={{ flex: 1, textAlign: 'left', fontSize: 12.5, color: t.ink3, marginLeft: 4 }}>· 4 項篩選條件</span>
        <span style={{ fontSize: 13, fontWeight: 700, color: t.ink2 }}>查看</span>
        <window.Icon name="chevron" size={15} color={t.ink3}/>
      </button>
      <div style={{ display: 'flex', alignItems: 'center', padding: '6px 16px' }}>
        <span style={{ flex: 1, fontSize: 12, color: t.ink3 }}>資料時間 <span style={{ color: t.ink2, fontWeight: 600 }}>今日 10:30 PM</span></span>
      </div>
      <div style={{ flex: 1, overflowY: 'auto' }}><StockRows/></div>
      {open && <Sheet onClose={() => setOpen(false)} onEdit={() => setOpen(false)}/>}
    </div>
  );
}

// ── C · 大字結果＋說明列，整列可點（最白話） ────────────────────
function OptionStatement() {
  const t = CT();
  const [open, setOpen] = cdS(false);
  return (
    <div style={{ height: '100%', background: t.bg, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <window.EMScreenHead title="台積電供應鏈" right={gear()}/>
      <button onClick={() => setOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '14px 16px', background: 'transparent', border: 'none', borderBottom: `1px solid ${t.hairline}`, cursor: 'pointer', fontFamily: 'inherit' }}>
        <div style={{ flex: 1, textAlign: 'left' }}>
          <div style={{ fontSize: 20, fontWeight: 700, color: t.ink, letterSpacing: -0.4 }}>符合 <span style={{ fontFamily: '"Plus Jakarta Sans",monospace' }}>20</span> 檔</div>
          <div style={{ fontSize: 12.5, color: t.ink3, marginTop: 2 }}>點此查看 4 項篩選條件</div>
        </div>
        <span style={{ width: 30, height: 30, borderRadius: 15, background: t.surfaceAlt, border: `1px solid ${t.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <window.Icon name="chevron" size={15} color={t.ink2}/>
        </span>
      </button>
      <div style={{ flex: 1, overflowY: 'auto' }}><StockRows/></div>
      {open && <Sheet onClose={() => setOpen(false)} onEdit={() => setOpen(false)}/>}
    </div>
  );
}

Object.assign(window, { OptionPill, OptionTile, OptionStatement });

const CW = 402, CH = 874;
const cFrame = { background: 'transparent', boxShadow: 'none', borderRadius: 0, overflow: 'visible' };
function CFr({ children }) { return <window.IOSDevice width={CW} height={CH}>{children}</window.IOSDevice>; }

ReactDOM.createRoot(document.getElementById('root')).render(
  <window.DesignCanvas>
    <window.DCSection id="consolidate" title="收斂成單一入口 — 三種樣式" subtitle="避免兩個入口讓長輩混淆 · 點任一入口都開「篩選結果」sheet">
      <window.DCArtboard id="opt-pill" label="A · 結果膠囊（meta 列，最精簡）" width={CW} height={CH} style={cFrame}>
        <CFr><window.OptionPill/></CFr>
      </window.DCArtboard>
      <window.DCArtboard id="opt-tile" label="B · 整列 tile（結果＋條件數＋查看）" width={CW} height={CH} style={cFrame}>
        <CFr><window.OptionTile/></CFr>
      </window.DCArtboard>
      <window.DCArtboard id="opt-statement" label="C · 大字白話（符合 20 檔 · 點此查看）" width={CW} height={CH} style={cFrame}>
        <CFr><window.OptionStatement/></CFr>
      </window.DCArtboard>
    </window.DCSection>
  </window.DesignCanvas>
);