// edit-pill-variants.jsx — floating selection-pill variations for batch 收藏 / 加入提醒.
// Builds on edit-modes.jsx (STOCKS, Star, Ticker, NameCell, PriceCell, Checkbox, ScreenHead).

const { useState: pvS } = React;
const PT = () => window.flutterTokens;
const PV_BLUE = 'oklch(0.42 0.10 245)';

// shared multi-select list body (checkbox rows) + screen chrome
function PillScreen({ children, initial }) {
  const t = PT();
  const [sel, setSel] = pvS(() => new Set(initial));
  const toggle = (s) => setSel(p => { const n = new Set(p); n.has(s) ? n.delete(s) : n.add(s); return n; });
  return (
    <div style={{ height: '100%', background: t.bg, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <window.EMScreenHead title="台積電供應鏈" right={<button style={window.emIconRound(t)}><window.Icon name="more" size={18} color={t.ink}/></button>}/>
      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 92 }}>
        {window.EM_STOCKS.map((s) => {
          const chk = sel.has(s.sym);
          return (
            <button key={s.sym} onClick={() => toggle(s.sym)} style={{
              width: '100%', textAlign: 'left', background: chk ? t.surfaceAlt : 'transparent', border: 'none',
              cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 12,
              padding: '11px 16px', borderBottom: `1px solid ${t.hairline}`,
            }}>
              <window.EMCheckbox on={chk}/>
              <window.EMTicker sym={s.sym}/>
              <window.EMNameCell s={s}/>
              <window.EMPriceCell s={s}/>
            </button>
          );
        })}
      </div>
      {children(sel.size, () => setSel(new Set()))}
    </div>
  );
}

const pillWrap = { position: 'absolute', left: 0, right: 0, bottom: 22, display: 'flex', justifyContent: 'center', pointerEvents: 'none' };

// ── V1 · 深色膠囊＋文字標籤（icon 上字）────────────────────────────
function PillLabeled() {
  const t = PT();
  return (
    <PillScreen initial={['2330', '2454', '2382', '3034']}>
      {(n, clear) => (
        <div style={pillWrap}>
          <div style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 2, background: t.ink, borderRadius: 22, padding: '6px 6px', boxShadow: '0 12px 30px -8px rgba(31,27,22,0.5)' }}>
            <button onClick={clear} style={pvIcon()}><window.Icon name="x" size={19} color={t.bg}/></button>
            <span style={{ fontSize: 13, fontWeight: 700, color: t.bg, padding: '0 8px 0 4px', fontVariantNumeric: 'tabular-nums' }}>{n}</span>
            <button style={pvLabeled()}><window.EMStar filled color={t.bg} size={19}/><span style={pvLbl(t)}>收藏</span></button>
            <button style={pvLabeled()}><window.Icon name="bell" size={19} color={t.bg}/><span style={pvLbl(t)}>提醒</span></button>
          </div>
        </div>
      )}
    </PillScreen>
  );
}

// ── V2 · 淺色卡片膠囊（白底＋陰影，文字按鈕）──────────────────────
function PillLightCard() {
  const t = PT();
  return (
    <PillScreen initial={['2454', '3034']}>
      {(n, clear) => (
        <div style={pillWrap}>
          <div style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 6, background: t.surface, borderRadius: 18, padding: '8px 10px 8px 14px', border: `1px solid ${t.hairline}`, boxShadow: '0 14px 34px -10px rgba(31,27,22,0.32)' }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: t.ink2, marginRight: 2 }}>已選 <span style={{ fontFamily: '"Plus Jakarta Sans",monospace' }}>{n}</span></span>
            <button style={pvTextBtn(t)}><window.EMStar filled={false} color={t.ink} size={17}/>收藏</button>
            <button style={pvTextBtn(t, true)}><window.Icon name="bell" size={17} color={t.bg}/>加入提醒</button>
          </div>
        </div>
      )}
    </PillScreen>
  );
}

// ── V3 · 主操作優先（加入提醒 primary ＋ 收藏 secondary ＋ ✕）──────
function PillPrimary() {
  const t = PT();
  return (
    <PillScreen initial={['2330', '2317', '2382']}>
      {(n, clear) => (
        <div style={pillWrap}>
          <div style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 6, background: t.ink, borderRadius: 26, padding: '7px 7px 7px 16px', boxShadow: '0 12px 30px -8px rgba(31,27,22,0.5)' }}>
            <span style={{ fontSize: 13.5, fontWeight: 700, color: t.bg, marginRight: 2 }}>已選 {n}</span>
            <button style={pvIcon()}><window.EMStar filled color={t.bg} size={20}/></button>
            <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: t.bg, color: t.ink, border: 'none', borderRadius: 19, padding: '9px 16px', fontSize: 13.5, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>
              <window.Icon name="bell" size={17} color={t.ink}/>加入提醒
            </button>
          </div>
        </div>
      )}
    </PillScreen>
  );
}

// ── V4 · 近全寬底部浮動 bar（標籤按鈕＋分隔線）────────────────────
function PillWideBar() {
  const t = PT();
  return (
    <PillScreen initial={['2330', '2454']}>
      {(n, clear) => (
        <div style={{ position: 'absolute', left: 12, right: 12, bottom: 20, pointerEvents: 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'stretch', background: t.ink, borderRadius: 18, padding: 6, boxShadow: '0 14px 34px -10px rgba(31,27,22,0.4)' }}>
            <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px', color: t.bg, fontSize: 13, fontWeight: 700 }}>已選 {n}</div>
            <div style={{ flex: 1, display: 'flex' }}>
              <button style={pvBarBtn()}><window.EMStar filled color={t.bg} size={19}/>收藏</button>
              <div style={{ width: 1, background: 'rgba(255,255,255,0.16)', margin: '6px 0' }}/>
              <button style={pvBarBtn()}><window.Icon name="bell" size={19} color={t.bg}/>提醒</button>
            </div>
            <button onClick={clear} style={{ ...pvIcon(), alignSelf: 'center' }}><window.Icon name="x" size={18} color={t.bg}/></button>
          </div>
        </div>
      )}
    </PillScreen>
  );
}

// ── V5 · 膠囊＋上方滑出更多動作（堆疊）────────────────────────────
function PillStacked() {
  const t = PT();
  const [open, setOpen] = pvS(true);
  return (
    <PillScreen initial={['2330', '2454', '2382', '3034', '2317']}>
      {(n, clear) => (
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 22, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'none' }}>
          {open && (
            <div style={{ pointerEvents: 'auto', display: 'flex', flexDirection: 'column', background: t.surface, borderRadius: 16, padding: 6, border: `1px solid ${t.hairline}`, boxShadow: '0 14px 34px -10px rgba(31,27,22,0.3)', minWidth: 184 }}>
              <button style={pvSheetRow(t)}><window.EMStar filled={false} color={t.butterDk} size={19}/><span style={{ flex: 1, textAlign: 'left' }}>加入收藏</span></button>
              <button style={pvSheetRow(t)}><window.Icon name="bell" size={19} color={PV_BLUE}/><span style={{ flex: 1, textAlign: 'left' }}>建立到價提醒</span></button>
              <button style={pvSheetRow(t)}><window.Icon name="trash" size={19} color={t.coralDk}/><span style={{ flex: 1, textAlign: 'left', color: t.coralDk }}>從清單移除</span></button>
            </div>
          )}
          <div style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 4, background: t.ink, borderRadius: 999, padding: '7px 8px 7px 16px', boxShadow: '0 12px 30px -8px rgba(31,27,22,0.5)' }}>
            <span style={{ fontSize: 13.5, fontWeight: 700, color: t.bg, marginRight: 6 }}>已選 {n}</span>
            <button onClick={() => setOpen(o => !o)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: t.bg, color: t.ink, border: 'none', borderRadius: 16, padding: '8px 14px', fontSize: 13.5, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>
              操作<span style={{ display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 180ms' }}><window.Icon name="chevron-down" size={15} color={t.ink}/></span>
            </button>
            <button onClick={clear} style={pvIcon()}><window.Icon name="x" size={18} color={t.bg}/></button>
          </div>
        </div>
      )}
    </PillScreen>
  );
}

// ── style helpers ────────────────────────────────────────────────
function pvIcon() { return { width: 38, height: 38, borderRadius: 19, background: 'rgba(255,255,255,0.14)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }; }
function pvLabeled() { return { display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 2, background: 'rgba(255,255,255,0.14)', border: 'none', cursor: 'pointer', fontFamily: 'inherit', borderRadius: 16, padding: '7px 14px' }; }
function pvLbl(t) { return { fontSize: 10.5, fontWeight: 700, color: t.bg }; }
function pvTextBtn(t, primary) { return { display: 'inline-flex', alignItems: 'center', gap: 5, background: primary ? t.ink : t.surfaceAlt, color: primary ? t.bg : t.ink, border: primary ? 'none' : `1px solid ${t.hairline}`, borderRadius: 14, padding: '9px 13px', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }; }
function pvBarBtn() { return { flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, background: 'transparent', color: window.flutterTokens.bg, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700, padding: '10px 0' }; }
function pvSheetRow(t) { return { display: 'inline-flex', alignItems: 'center', gap: 11, background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'inherit', borderRadius: 11, padding: '11px 14px', fontSize: 14, fontWeight: 600, color: t.ink, width: '100%' }; }

Object.assign(window, { PillLabeled, PillLightCard, PillPrimary, PillWideBar, PillStacked });