// filter-canvas.jsx — lays the screens out on the pannable DesignCanvas.

const W = 402, H = 874;

// A phone frame on the canvas (no white card behind the device corners).
function Frame({ children }) {
  return (
    <window.IOSDevice width={W} height={H}>{children}</window.IOSDevice>
  );
}
const frameStyle = { background: 'transparent', boxShadow: 'none', borderRadius: 0, overflow: 'visible' };

const FF = window.FILTER_BY_ID;

function Board() {
  return (
    <window.DesignCanvas>
      <window.DCSection id="catalog" title="目錄 — 條件總覽" subtitle="八大分類 · 可展開分區（Accordion）· 搜尋自動展開並高亮命中">
        <window.DCArtboard id="catalog-all" label="條件目錄（Accordion 瀏覽）" width={W} height={H} style={frameStyle}>
          <Frame><window.CatalogScreen mode="dialog" accordion={true}/></Frame>
        </window.DCArtboard>
        <window.DCArtboard id="catalog-search" label="搜尋「量」→ 命中高亮" width={W} height={H} style={frameStyle}>
          <Frame><window.CatalogScreen mode="dialog" accordion={true} initialQuery="量"/></Frame>
        </window.DCArtboard>
      </window.DCSection>

      <window.DCSection id="presentations" title="設定面板 — 中央對話框（定案）" subtitle="條件「外資買賣超」· 點目錄條件即以此對話框設定">
        <window.DCArtboard id="p-dialog" label="設定對話框" width={W} height={H} style={frameStyle}>
          <Frame>
            <window.CatalogScreen mode="dialog" initialOpenId="foreign_flow"
              initialValues={{ days: 5, direction: 'buy', min: 3000, max: null }}/>
          </Frame>
        </window.DCArtboard>
      </window.DCSection>

      <window.DCSection id="composites" title="複合元件" subtitle="spec 點名需單獨設計的 design component">
        <window.DCArtboard id="c-range" label="min/max 雙欄 range（股價）" width={W} height={H} style={frameStyle}>
          <Frame>
            <window.CatalogScreen mode="dialog" accordion={true} initialOpenId="price" initialValues={{ min: 20, max: 80 }}/>
          </Frame>
        </window.DCArtboard>
        <window.DCArtboard id="c-metric" label="metric 巢狀 picker（排名）" width={W} height={H} style={frameStyle}>
          <Frame>
            <window.CatalogScreen mode="dialog" accordion={true} initialOpenId="rank"
              initialValues={{ scope: 'survivors', metric: { kind: 'pct_chg', params: { window: 5, baseline: 'close' } }, mode: 'pct', k: 20, direction: 'top', partition_by: '產業' }}/>
          </Frame>
        </window.DCArtboard>
      </window.DCSection>

      <window.DCSection id="when" title="when 條件顯示（KD 指標）" subtitle="event ∈ {超買, 超賣} 才顯示「門檻」欄位 — 交叉事件隱藏">
        <window.DCArtboard id="w-on" label="event = 超買 → 顯示門檻" width={W} height={H} style={frameStyle}>
          <Frame>
            <window.FullPageConfig filter={FF.kd} initial={{ period: 9, event: 'overbought', threshold: 80 }}/>
          </Frame>
        </window.DCArtboard>
        <window.DCArtboard id="w-off" label="event = 黃金交叉 → 隱藏門檻" width={W} height={H} style={frameStyle}>
          <Frame>
            <window.FullPageConfig filter={FF.kd} initial={{ period: 9, event: 'golden', threshold: 80 }}/>
          </Frame>
        </window.DCArtboard>
      </window.DCSection>
    </window.DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Board/>);
