// brand-blue — 「發送驗證碼」這個動作該長成什麼形狀。
//
// 前四輪都在問「這顆 chip 該是什麼顏色」,四個答案都難看。原因不是選色差,
// 是問題問錯了:一個有填色的圓角方塊塞在輸入框的邊框裡面,就是兩個相距 4px
// 的圓角矩形各自有底色 —— 在任何配色下都會像貼上去的。
//
// 而且顏色這條路已經走到死角:不能藍(撞主 CTA)、不能灰(否決)、
// 不能綠紅琥珀(盤面語意佔走了)。所有顏色都不行 = 容器錯了。
//
// 這張比的是形狀,不是顏色。三個候選都拿掉「有填色的內嵌方塊」這件事。

function Cta({ label, disabled }) {
  const P = window.BRAND_BLUE_PALETTE;
  return (
    <button style={{
      width: '100%', borderRadius: 13, padding: '15px', border: 'none',
      background: disabled ? P.hairline : P.brand,
      color: disabled ? P.ink3 : '#fff',
      fontFamily: 'inherit', fontSize: 15.5, fontWeight: 700, letterSpacing: -0.2,
    }}>{label}</button>
  );
}

function Block({ tag, name, note, children }) {
  const P = window.BRAND_BLUE_PALETTE;
  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',
        }}>{tag}</span>
        <span style={{ fontSize: 13, fontWeight: 700, color: P.ink, letterSpacing: -0.2 }}>{name}</span>
      </div>
      <div style={{ fontSize: 11.5, color: P.ink3, lineHeight: 1.5, letterSpacing: -0.1, marginBottom: 10 }}>
        {note}
      </div>
      {children}
    </div>
  );
}

// ── 1 · 純文字動作。沒有第二個方塊,所以沒有 box-in-box ──
function TextAction({ label, tone }) {
  const P = window.BRAND_BLUE_PALETTE;
  return (
    <button style={{
      flexShrink: 0, border: 'none', background: 'transparent', padding: '9px 4px 9px 12px',
      color: tone === 'idle' ? P.ink3 : P.brand,
      fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700, letterSpacing: -0.1,
      whiteSpace: 'nowrap', cursor: tone === 'idle' ? 'default' : 'pointer',
    }}>{label}</button>
  );
}

function SendShape() {
  const P = window.BRAND_BLUE_PALETTE;
  const Field = window.BlueField;
  const code = { fontSize: 16, letterSpacing: 4, fontVariantNumeric: 'tabular-nums' };
  const plain = { fontSize: 16, letterSpacing: -0.2, fontVariantNumeric: 'tabular-nums' };

  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 }}>
          發送驗證碼 — 換形狀,不換顏色
        </div>
        <div style={{ fontSize: 12.5, color: P.ink2, marginBottom: 24, lineHeight: 1.55, letterSpacing: -0.1 }}>
          三個候選都拿掉「輸入框裡再放一個有底色的方塊」。logo 三個都一樣,省略。
        </div>

        {/* ────────────────────────────────────────────── */}
        <Block
          tag="1" name="純文字動作"
          note="chip 變成純文字。少一個框、少一個填色,顏色的問題直接消失 —— 文字連結跟實心按鈕本來就是兩種重量,不會互相搶。"
        >
          <Field
            label="信箱" type="email" value="andy@goodiehunter.com" onChange={() => {}}
            wrapperStyle={{ marginBottom: 12 }} inputStyle={plain}
          />
          <Field
            label="驗證碼" type="text" inputMode="numeric" maxLength={6}
            value="" onChange={() => {}} inputStyle={plain}
            wrapperStyle={{ marginBottom: 20 }}
            trailing={<TextAction label="發送驗證碼" tone="ready"/>}
          />
          <Cta label="登入" disabled/>
          <div style={{ fontSize: 11, color: P.ink3, marginTop: 8, letterSpacing: -0.1 }}>
            倒數中：<span style={{ color: P.ink2, fontWeight: 700 }}>56s 後重新發送</span>（同一個位置，轉灰）
          </div>
        </Block>

        {/* ────────────────────────────────────────────── */}
        <Block
          tag="2" name="兩階段 · 一頁只有一顆主鈕"
          note="還沒送出前根本沒有驗證碼欄 —— 那個空欄位現在是死的。送出後展開，主鈕從「發送驗證碼」變成「登入」。整頁永遠只有一顆主要動作。"
        >
          <div style={{ fontSize: 10.5, fontWeight: 700, color: P.ink3, marginBottom: 6 }}>階段一</div>
          <Field
            label="信箱" type="email" value="andy@goodiehunter.com" onChange={() => {}}
            wrapperStyle={{ marginBottom: 20 }} inputStyle={plain}
          />
          <Cta label="發送驗證碼"/>

          <div style={{ fontSize: 10.5, fontWeight: 700, color: P.ink3, margin: '22px 0 6px' }}>階段二</div>
          <Field
            label="信箱" type="email" value="andy@goodiehunter.com" onChange={() => {}}
            wrapperStyle={{ marginBottom: 12 }} inputStyle={plain}
          />
          <Field
            label="驗證碼" type="text" inputMode="numeric" maxLength={6}
            value="233124" onChange={() => {}} inputStyle={code}
            wrapperStyle={{ marginBottom: 20 }}
          />
          <Cta label="登入"/>
          <div style={{ textAlign: 'center', marginTop: 14, fontSize: 13, color: P.ink3, letterSpacing: -0.1 }}>
            56s 後可重新發送
          </div>
        </Block>

        {/* ────────────────────────────────────────────── */}
        <Block
          tag="3" name="重送移到欄位外"
          note="兩欄都留著，但輸入框裡什麼都不放，乾乾淨淨。重送是欄位下方右對齊的一行小字。"
        >
          <Field
            label="信箱" type="email" value="andy@goodiehunter.com" onChange={() => {}}
            wrapperStyle={{ marginBottom: 12 }} inputStyle={plain}
          />
          <Field
            label="驗證碼" type="text" inputMode="numeric" maxLength={6}
            value="233124" onChange={() => {}} inputStyle={code}
          />
          <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '9px 2px 20px' }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: P.brand, letterSpacing: -0.1, cursor: 'pointer' }}>
              重新發送驗證碼
            </span>
          </div>
          <Cta label="登入"/>
        </Block>

      </div>
    </div>
  );
}

Object.assign(window, { SendShape });