// Bottom-action pattern showcase — 5 phone frames on a canvas.
// Reuses the real app tokens (window.flutterTokens) + Icon set + IOSDevice bezel.

const { useState: uS } = React;
const T = window.flutterTokens;

// ── Mock data for the 高股息 ETF screener ─────────────────────────
const ROWS = [
  { sym: '0050',  name: '元大台灣50',        price: 188.65, chg:  0.82 },
  { sym: '0056',  name: '元大高股息',        price: 38.94,  chg: -0.41 },
  { sym: '00878', name: '國泰永續高股息',    price: 23.18,  chg:  0.35 },
  { sym: '00919', name: '群益台灣精選高息',  price: 25.72,  chg:  1.14 },
  { sym: '2882',  name: '國泰金',            price: 62.30,  chg: -0.32 },
  { sym: '2412',  name: '中華電',            price: 124.50, chg:  0.16 },
  { sym: '2891',  name: '中信金',            price: 39.85,  chg:  0.51 },
];
const TABS = ['自選', '高股息 ETF', '半導體龍頭', '航運'];

const money = (p) => p.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

// ── Shared chrome pieces ─────────────────────────────────────────
function Header({ showPill }) {
  return (
    <div style={{ padding: '58px 20px 0', background: T.bg, flexShrink: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 12 }}>
        <div style={{ fontFamily: '"Plus Jakarta Sans", sans-serif', fontSize: 22, fontWeight: 700, color: T.ink, letterSpacing: -0.5 }}>選股</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <IconBtn name="list-edit" size={19}/>
          <IconBtn name="plus" size={18}/>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 22, borderBottom: `1px solid ${T.hairline}`, margin: '0 -20px', padding: '0 20px', overflow: 'hidden' }}>
        {TABS.map((label, i) => {
          const active = i === 1;
          return (
            <div key={label} style={{
              padding: '6px 0 10px', fontSize: 17, fontWeight: active ? 700 : 500,
              color: active ? T.ink : T.ink3, marginBottom: -1, whiteSpace: 'nowrap',
              borderBottom: active ? `2px solid ${T.ink}` : '2px solid transparent', letterSpacing: -0.2,
            }}>{label}</div>
          );
        })}
      </div>
    </div>
  );
}

function IconBtn({ name, size = 20, color = T.ink }) {
  return (
    <div style={{ width: 36, height: 36, borderRadius: 18, display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
      <window.Icon name={name} size={size} color={color}/>
    </div>
  );
}

function MetaRow({ showPill }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px 8px 16px', borderBottom: `1px solid ${T.hairline}` }}>
      <span style={{ fontSize: 18, fontWeight: 800, color: T.ink, letterSpacing: -0.4, flexShrink: 0, fontFamily: '"Plus Jakarta Sans","Noto Sans TC",sans-serif' }}>
        <span style={{ fontVariantNumeric: 'tabular-nums' }}>4</span> 檔
      </span>
      <div style={{ width: 28, height: 28, borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.ink3, flexShrink: 0, marginLeft: 8 }}>
        <window.Icon name="refresh" size={16} color={T.ink3}/>
      </div>
      <span style={{ flex: 1, fontSize: 12, color: T.ink3, fontWeight: 500, marginLeft: 4 }}>更新於 今日 09:31</span>
      {showPill && (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, height: 32, borderRadius: 10, padding: '0 12px', marginRight: -4, background: T.ink, color: T.bg }}>
          <window.Icon name="wrench" size={16} color={T.bg}/>
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: -0.1 }}>設定</span>
        </div>
      )}
    </div>
  );
}

function StockList() {
  const link = 'oklch(0.42 0.10 245)';
  return (
    <div style={{ padding: '0 0 8px' }}>
      {ROWS.map((s, i) => {
        const up = s.chg >= 0;
        return (
          <div key={s.sym} style={{
            display: 'grid', gridTemplateColumns: '24px minmax(0,1fr) 76px 64px', gap: 8, alignItems: 'center',
            padding: '13px 16px 13px 4px', borderTop: i > 0 ? `1px solid ${T.hairline}` : 'none',
          }}>
            <div style={{ fontFamily: '"Plus Jakarta Sans",monospace', fontVariantNumeric: 'tabular-nums', fontSize: 12, fontWeight: 600, color: T.ink3, textAlign: 'center' }}>{i + 1}</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: '"Plus Jakarta Sans",sans-serif', fontSize: 15, fontWeight: 700, color: link, letterSpacing: -0.3, lineHeight: 1.15 }}>{s.sym}</div>
              <div style={{ fontSize: 12, color: T.ink2, lineHeight: 1.25, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.name}</div>
            </div>
            <div style={{ fontFamily: '"Plus Jakarta Sans",monospace', fontVariantNumeric: 'tabular-nums', fontSize: 14, fontWeight: 600, color: T.ink, textAlign: 'right' }}>${money(s.price)}</div>
            <div style={{ fontFamily: '"Plus Jakarta Sans",monospace', fontVariantNumeric: 'tabular-nums', fontSize: 14, fontWeight: 700, color: up ? T.up : T.down, textAlign: 'right' }}>{up ? '+' : ''}{s.chg.toFixed(2)}%</div>
          </div>
        );
      })}
    </div>
  );
}

function TabBar() {
  const tabs = [
    { label: '選股', icon: 'funnel', active: true },
    { label: '提醒', icon: 'bell' },
    { label: '通知', icon: 'megaphone' },
    { label: '設定', icon: 'settings' },
  ];
  return (
    <div style={{ display: 'flex', borderTop: `1px solid ${T.hairline}`, background: T.surface, paddingBottom: 20, flexShrink: 0 }}>
      {tabs.map(tb => (
        <div key={tb.label} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '10px 0 4px', color: tb.active ? T.ink : T.ink3 }}>
          <window.Icon name={tb.icon} size={22} color={tb.active ? T.ink : T.ink3} strokeWidth={tb.active ? 2.2 : 1.8} filled={tb.active}/>
          <span style={{ fontSize: 10.5, fontWeight: tb.active ? 700 : 500 }}>{tb.label}</span>
        </div>
      ))}
    </div>
  );
}

// The circular selection FAB (右下)
function FAB({ bottom = 22 }) {
  return (
    <div style={{
      position: 'absolute', right: 18, bottom, width: 52, height: 52, borderRadius: 26,
      background: T.ink, color: T.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 14px 26px -10px rgba(31,27,22,0.45), 0 2px 6px rgba(31,27,22,0.18)', zIndex: 20,
    }}>
      <window.Icon name="select" size={23} color={T.bg}/>
    </div>
  );
}

// ── Bottom-action variants ───────────────────────────────────────
// #1 Docked toolbar — no FAB; 設定 (left) + 選取 (right), thumb zone.
function DockedToolbar() {
  return (
    <div style={{ flexShrink: 0, borderTop: `1px solid ${T.hairline}`, background: T.bg, padding: '10px 14px 12px', display: 'flex', gap: 10 }}>
      <div style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, height: 48, borderRadius: 13, background: T.ink, color: T.bg, fontWeight: 700, fontSize: 15 }}>
        <window.Icon name="wrench" size={18} color={T.bg}/>篩選設定
      </div>
      <div style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, height: 48, borderRadius: 13, background: T.surfaceAlt, color: T.ink, fontWeight: 700, fontSize: 15, border: `1px solid ${T.hairline}` }}>
        <window.Icon name="select" size={18} color={T.ink}/>選取
      </div>
    </div>
  );
}

// #2 Peeking bottom sheet — collapsed sheet with grabber; drag up to edit.
function PeekingSheet() {
  return (
    <div style={{
      flexShrink: 0, background: T.surface, borderTop: `1px solid ${T.hairline}`,
      borderRadius: '18px 18px 0 0', boxShadow: '0 -12px 30px -18px rgba(31,27,22,0.4)',
      padding: '8px 16px 14px',
    }}>
      <div style={{ width: 40, height: 4, borderRadius: 2, background: T.hairline, margin: '2px auto 10px' }}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 34, height: 34, borderRadius: 17, background: T.ink, color: T.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <window.Icon name="wrench" size={17} color={T.bg}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: T.ink, letterSpacing: -0.2 }}>篩選條件</div>
          <div style={{ fontSize: 12, color: T.ink3, marginTop: 1 }}>已套用 4 項 · 股價、產業…</div>
        </div>
        <div style={{ display: 'inline-flex', color: T.ink3, transform: 'rotate(180deg)' }}>
          <window.Icon name="chevron-down" size={20} color={T.ink3}/>
        </div>
      </div>
    </div>
  );
}

// #3 Filter chips row — active conditions as chips + 編輯 at end.
function FilterChips() {
  const chips = ['股價 20~80', '產業 · 半導體', '外資買超', '成交量 >5k'];
  return (
    <div style={{ flexShrink: 0, borderTop: `1px solid ${T.hairline}`, background: T.bg, padding: '10px 0 12px' }}>
      <div style={{ display: 'flex', gap: 8, overflow: 'hidden', padding: '0 14px' }}>
        {chips.map(c => (
          <div key={c} style={{ flexShrink: 0, height: 34, display: 'inline-flex', alignItems: 'center', padding: '0 12px', borderRadius: 999, background: T.surfaceAlt, border: `1px solid ${T.hairline}`, fontSize: 13, fontWeight: 600, color: T.ink2, whiteSpace: 'nowrap' }}>{c}</div>
        ))}
        <div style={{ flexShrink: 0, height: 34, display: 'inline-flex', alignItems: 'center', gap: 5, padding: '0 13px', borderRadius: 999, background: T.ink, color: T.bg, fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap' }}>
          <window.Icon name="wrench" size={14} color={T.bg}/>設定
        </div>
      </div>
    </div>
  );
}

// #4 FAB speed-dial — single FAB, expanded showing 設定 / 選取.
function SpeedDial() {
  const item = (label, icon, dark) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end' }}>
      <span style={{ fontSize: 13, fontWeight: 700, color: T.ink, background: T.surface, padding: '5px 10px', borderRadius: 8, boxShadow: '0 4px 12px -4px rgba(31,27,22,0.3)' }}>{label}</span>
      <div style={{ width: 44, height: 44, borderRadius: 22, background: dark ? T.ink : T.surface, border: dark ? 'none' : `1px solid ${T.hairline}`, color: dark ? T.bg : T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 18px -8px rgba(31,27,22,0.4)' }}>
        <window.Icon name={icon} size={20} color={dark ? T.bg : T.ink}/>
      </div>
    </div>
  );
  return (
    <div style={{ position: 'absolute', right: 18, bottom: 22, zIndex: 20, display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-end' }}>
      {item('篩選設定', 'wrench', false)}
      {item('選取', 'select', false)}
      <div style={{ width: 52, height: 52, borderRadius: 26, background: T.ink, color: T.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 14px 26px -10px rgba(31,27,22,0.45)' }}>
        <window.Icon name="x" size={22} color={T.bg}/>
      </div>
    </div>
  );
}

// ── The phone screen, parameterised by variant ───────────────────
function Screen({ variant }) {
  const baseline = variant === 'baseline';
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.bg, position: 'relative', overflow: 'hidden' }}>
      <Header/>
      <MetaRow showPill={baseline}/>
      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}><StockList/></div>

      {variant === 'chips'    && <FilterChips/>}
      {variant === 'sheet'    && <PeekingSheet/>}
      {variant === 'toolbar'  && <DockedToolbar/>}

      <TabBar/>

      {(baseline || variant === 'chips' || variant === 'sheet') && <FAB bottom={variant === 'baseline' ? 88 : 92}/>}
      {variant === 'speeddial' && <SpeedDial/>}
    </div>
  );
}

// ── Frame with caption ───────────────────────────────────────────
const FRAMES = [
  { id: 'baseline',  title: '現況', sub: '設定在右上角 · 觸控目標小、拇指難搆', ref: '目前設計', flag: true },
  { id: 'toolbar',   title: '① 底部工具列', sub: '收起 FAB,設定 + 選取平權停靠底部', ref: 'iOS HIG · Files / Notes / Mail' },
  { id: 'sheet',     title: '② 上拉半頁', sub: '條件摘要露一角,上拉展開編輯 · 保留 FAB', ref: 'Apple / Google Maps · Uber' },
  { id: 'chips',     title: '③ 篩選 Chips 列', sub: '直接顯示已套用條件 · 末端「設定」· 保留 FAB', ref: 'Airbnb · Zillow · 蝦皮' },
  { id: 'speeddial', title: '④ FAB Speed-dial', sub: '單顆 FAB 展開設定 / 選取 · 底部最乾淨', ref: 'Material · Gmail / Docs' },
];

const DEV_W = 402, DEV_H = 874, GAP = 64, X0 = 56, Y0 = 150;

function Board() {
  return (
    <>
      {/* Title block */}
      <div style={{ position: 'absolute', left: X0, top: 44, width: 900 }}>
        <div style={{ fontFamily: '"Plus Jakarta Sans","Noto Sans TC",sans-serif', fontSize: 30, fontWeight: 800, color: '#1F1B16', letterSpacing: -0.6 }}>「設定」按鈕擺位 — 底部方案比較</div>
        <div style={{ fontSize: 15, color: '#6B6259', marginTop: 8, lineHeight: 1.6, fontWeight: 500 }}>四種大廠 review 可過的模式,解決右上角觸控目標小、拇指難搆的問題。灰底為情境示意,非最終互動。</div>
      </div>

      {FRAMES.map((f, i) => (
        <div key={f.id} style={{ position: 'absolute', left: X0 + i * (DEV_W + GAP), top: Y0, width: DEV_W }}>
          <div style={{ marginBottom: 18, minHeight: 78 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ fontFamily: '"Plus Jakarta Sans","Noto Sans TC",sans-serif', fontSize: 20, fontWeight: 800, color: '#1F1B16', letterSpacing: -0.3 }}>{f.title}</div>
              {f.flag && <span style={{ fontSize: 11, fontWeight: 700, color: T.down, background: T.downBg, padding: '2px 8px', borderRadius: 999 }}>待改善</span>}
            </div>
            <div style={{ fontSize: 13.5, color: '#6B6259', marginTop: 5, lineHeight: 1.5, fontWeight: 500 }}>{f.sub}</div>
            <div style={{ fontSize: 12, color: '#9A9289', marginTop: 4, fontWeight: 600 }}>參考 · {f.ref}</div>
          </div>
          <window.IOSDevice width={DEV_W} height={DEV_H}>
            <Screen variant={f.id}/>
          </window.IOSDevice>
        </div>
      ))}
    </>
  );
}

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