// brand-blue — 純文字「發送驗證碼」的狀態。定案版。
//
// 形狀:輸入框裡是純文字動作,不是有填色的方塊(見 send-shape)。
// 文案:永遠是「發送驗證碼」,倒數結束不換字 —— 所以「待命」跟「倒數結束」
// 是同一個狀態,四態塌成三態。
// 閘門:動作永遠可按,信箱有問題在點下去時才說(跳 alert)。灰掉會多洩漏
// 「這個信箱格式對不對」,而登入頁的整個設計是不讓外面知道帳號存不存在。

const BRAND = '#498DEB';

function TextAction({ label, tone }) {
  const P = window.BRAND_BLUE_PALETTE;
  return (
    <button style={{
      flexShrink: 0, border: 'none', background: 'transparent', padding: '9px 0 9px 12px',
      color: tone === 'ready' ? BRAND : P.ink3,
      fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700, letterSpacing: -0.1,
      whiteSpace: 'nowrap', cursor: tone === 'ready' ? 'pointer' : 'default',
    }}>{label}</button>
  );
}

function StateRow({ tag, name, note, email, code, label, tone }) {
  const P = window.BRAND_BLUE_PALETTE;
  const Field = window.BlueField;
  return (
    <div style={{ marginBottom: 24 }}>
      <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: 12.5, 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: 8 }}>
        {note}
      </div>
      <Field
        label="信箱" type="email" value={email} onChange={() => {}}
        wrapperStyle={{ marginBottom: 8 }}
        inputStyle={{ fontSize: 16, letterSpacing: -0.2 }}
      />
      <Field
        label="驗證碼" type="text" inputMode="numeric" maxLength={6}
        value={code} onChange={() => {}}
        wrapperStyle={{ padding: '0 14px' }}
        inputStyle={{ fontSize: 16, letterSpacing: code ? 4 : -0.2, fontVariantNumeric: 'tabular-nums' }}
        trailing={<TextAction label={label} tone={tone}/>}
      />
    </div>
  );
}

function SendStates() {
  const P = window.BRAND_BLUE_PALETTE;
  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: 22, lineHeight: 1.55, letterSpacing: -0.1 }}>
          文案永遠是「發送驗證碼」,倒數結束不換字,所以倒數結束 = 待命,不是第四個狀態。
        </div>

        <StateRow
          tag="1" name="可按" email="" code=""
          note="信箱空著也一樣是藍的。倒數跑完之後也回到這裡 —— 同一個狀態,不換文案。"
          label="發送驗證碼" tone="ready"
        />
        <StateRow
          tag="2" name="送出中" email="andy@goodiehunter.com" code=""
          note="⚠️ 目前 code 沒有這一態。很短暫，所以只換字、不放 icon。"
          label="發送中" tone="idle"
        />
        <StateRow
          tag="3" name="倒數中" email="andy@goodiehunter.com" code="2331"
          note="送出成功才開始。倒數是唯一的「已寄出」訊號，對每個信箱一致。"
          label="56s 後可發送" tone="idle"
        />

      </div>
    </div>
  );
}

Object.assign(window, { SendStates });