// brand-blue — 「發送驗證碼」active 用第二個色相(非藍、非灰)。
//
// dim 已定案走 P3 的模型:底跟字各自退一階,兩個值分開指定,不是 opacity。
// 所以每一個候選都是四個值 —— active 的底/字、dim 的底/字。
//
// 候選全部來自 tokens.json 已有的 strategy 六色(ref.<hue>.200 當底、.600 當字)。
// 不自己配新色的理由:那六個刻意共用約 0.10 chroma / 0.85 lightness,
// 那是它們看起來像同一組的原因;憑眼睛加第七個一定會跟其他畫面對不起來。
//
// ⚠️ 這個 app 裡多數色相已經有語意,選之前要知道自己在踩誰:
//   綠 = 漲(trend.gain)   紅 = 跌(trend.loss)
//   琥珀 = 台股徽章        藍 = 美股徽章 + 品牌色

const HUE_OPTIONS = [
  {
    key: 'L', name: 'Lilac 紫',
    token: 'lilac200 / lilac600',
    note: '六色裡唯一沒有語意包袱的。跟藍是鄰居,和諧但一眼分得開。',
    bg: '#D8C7F9', fg: '#8864C0',
    dimBg: '#EDE6FB', dimFg: '#B0A0CE',
  },
  {
    key: 'B', name: 'Butter 金',
    token: 'butter200 / butter600',
    note: '最跳,最像「這是一個動作」。但它跟台股徽章的琥珀同一個方向。',
    bg: '#FBDF93', fg: '#BA8400',
    dimBg: '#FDF2D3', dimFg: '#C9AE6B',
  },
  {
    key: 'M', name: 'Mint 青綠',
    token: 'mint200 / mint600',
    note: '乾淨、冷,跟冷灰底最合。代價:在股票 app 裡綠會被讀成「漲」。',
    bg: '#9FE2C4', fg: '#249C74',
    dimBg: '#D5F2E4', dimFg: '#89C3AC',
  },
  {
    key: 'S', name: 'Sky 青',
    token: 'sky200 / sky600',
    note: '比品牌藍青得多,但仍在藍的家族裡 —— 算不算「不是藍色」你決定。',
    bg: '#A2DAF6', fg: '#0086B1',
    dimBg: '#DCF0FB', dimFg: '#84B8CE',
  },
];

function Chip({ bg, fg, label = '發送驗證碼' }) {
  return (
    <button style={{
      flexShrink: 0, borderRadius: 9, padding: '9px 14px', border: 'none',
      background: bg, color: fg,
      fontFamily: 'inherit', fontSize: 13, fontWeight: 700, letterSpacing: -0.1,
      whiteSpace: 'nowrap',
    }}>{label}</button>
  );
}

function HueRow({ option }) {
  const P = window.BRAND_BLUE_PALETTE;
  const Field = window.BlueField;
  const Half = ({ label, chip }) => (
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 10.5, fontWeight: 700, color: P.ink3, marginBottom: 5 }}>{label}</div>
      <Field
        label="驗證碼" type="text" inputMode="numeric" maxLength={6}
        value="" onChange={() => {}}
        inputStyle={{ fontSize: 16, letterSpacing: -0.2, fontVariantNumeric: 'tabular-nums' }}
        trailing={chip}
      />
    </div>
  );
  return (
    <div style={{ marginBottom: 30 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, marginBottom: 2 }}>
        <span style={{
          fontSize: 11, fontWeight: 700, color: P.card, background: P.ink2,
          borderRadius: 5, padding: '2px 6px',
        }}>{option.key}</span>
        <span style={{ fontSize: 13, fontWeight: 700, color: P.ink, letterSpacing: -0.2 }}>{option.name}</span>
        <span style={{ fontSize: 10.5, color: P.ink3 }}>{option.token}</span>
      </div>
      <div style={{ fontSize: 11.5, color: P.ink3, lineHeight: 1.5, letterSpacing: -0.1, marginBottom: 8 }}>
        {option.note}
      </div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
        <Half label="ACTIVE" chip={<Chip bg={option.bg} fg={option.fg}/>}/>
        <Half label="DIM" chip={<Chip bg={option.dimBg} fg={option.dimFg}/>}/>
      </div>
      {/* 主 CTA。這一輪要判斷的就是這個色相會不會跟品牌藍打架 */}
      <button style={{
        width: '100%', borderRadius: 13, padding: '15px', border: 'none',
        background: P.brand, color: '#fff',
        fontFamily: 'inherit', fontSize: 15.5, fontWeight: 700, letterSpacing: -0.2,
      }}>登入</button>
    </div>
  );
}

function SendActiveOptions() {
  const P = window.BRAND_BLUE_PALETTE;
  const Field = window.BlueField;
  return (
    <div style={{ height: '100%', background: P.canvas, overflowY: 'auto' }}>
      <div style={{ padding: '78px 28px 40px', maxWidth: 440, margin: '0 auto', boxSizing: 'border-box' }}>

        <div style={{ fontSize: 15, fontWeight: 700, color: P.ink, marginBottom: 4, letterSpacing: -0.2 }}>
          發送驗證碼 — active 換第二個色相
        </div>
        <div style={{ fontSize: 12.5, color: P.ink2, marginBottom: 22, lineHeight: 1.55, letterSpacing: -0.1 }}>
          四個候選都取自 tokens.json 既有的 strategy 六色。dim 走 P3:底跟字各退一階。
        </div>

        {HUE_OPTIONS.map(o => <HueRow key={o.key} option={o}/>)}

        <div style={{ height: 1, background: P.hairline, margin: '4px 0 26px' }}/>

        <div style={{ fontSize: 15, fontWeight: 700, color: P.ink, marginBottom: 4, letterSpacing: -0.2 }}>
          倒數中的樣子
        </div>
        <div style={{ fontSize: 12.5, color: P.ink2, marginBottom: 20, lineHeight: 1.55, letterSpacing: -0.1 }}>
          文案變長、塊變寬,dim 的差別跟短文案下不一樣,所以單獨看一次。
        </div>
        {HUE_OPTIONS.map(o => (
          <div key={o.key} style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, color: P.ink3, marginBottom: 5 }}>{o.key} · {o.name}</div>
            <Field
              label="驗證碼" type="text" inputMode="numeric" maxLength={6}
              value="233124" onChange={() => {}}
              inputStyle={{ fontSize: 16, letterSpacing: 4, fontVariantNumeric: 'tabular-nums' }}
              trailing={<Chip bg={o.dimBg} fg={o.dimFg} label="56s 後重新發送"/>}
            />
          </div>
        ))}

      </div>
    </div>
  );
}

Object.assign(window, { SendActiveOptions, HUE_OPTIONS });