// brand-blue — 登入頁改走品牌藍 + 冷灰中性階。未定案的比較稿。
//
// 為什麼顏色寫死在這裡而不是走 t.*:這組值還沒進 design_tokens/tokens.json。
// 定案之後才進 token graph,那時候這支檔案的 P 會整組消失、畫面改讀語意名。
// 在那之前寫死在 discussions/ 裡是這個目錄存在的理由。

const P = {
  // ── 品牌藍。人指定的三個值 ──
  brand:        '#498DEB',  // 品牌標準色
  brandLight:   '#36A3FF',  // logo 亮部
  brandDark:    '#0069D9',  // logo 深部
  brandSurface: '#E8EEFC',  // 參考圖裡驗證碼區塊的淡藍底

  // ── 冷灰中性階。量自參考圖(那是一封 email,不是 app 畫面)──
  canvas:   '#F3F4F6',  // 參考圖的外圍底色
  card:     '#FFFFFF',  // 參考圖的卡片
  ink:      '#1E293B',  // 參考圖的標題
  ink2:     '#64748B',  // 參考圖的副標
  ink3:     '#94A3B8',  // 參考圖的註腳
  hairline: '#E2E8F0',  // 邊框。參考圖沒有明顯邊框,取同一階冷灰

  // 「發送驗證碼」是純文字動作,不是有填色的方塊 —— 見 send-shape。
  // 所以它沒有自己的顏色:可按時是 brand,不可按時是 ink3。
};

const LOGO = '../../assets/brand/logo-mark.png';

// 資產已經裁到 alpha 邊界(447×519),所以圖的框就是圖案的框 —— 高度定了,
// 寬度是算出來的,不是量畫面量出來的。六角形左右是平邊、上下是尖角,所以高 > 寬。
const LOGO_ASPECT = 447 / 519;
const LOGO_HEIGHT = 88;

// ── FloatingField — label 在框內:空著且未聚焦時當 placeholder 置中,
//    聚焦或有值就縮小浮到左上。行為沿用 features/auth/login.jsx,只換配色。──
function BlueField({
  label, value, onChange, type = 'text', inputMode, maxLength,
  trailing, wrapperStyle, inputStyle,
}) {
  const [focused, setFocused] = React.useState(false);
  const floated = focused || (value != null && String(value).length > 0);
  return (
    <div style={{
      position: 'relative', display: 'flex', alignItems: 'center', gap: 8,
      background: wrapperStyle && wrapperStyle.background ? wrapperStyle.background : P.card,
      border: `1px solid ${focused ? P.brand : P.hairline}`,
      borderRadius: 13, padding: trailing ? '0 5px 0 14px' : '0 14px',
      boxShadow: focused ? `0 0 0 3px ${P.brand}1F` : 'none',
      transition: 'border-color 160ms ease, box-shadow 160ms ease',
      ...wrapperStyle,
    }}>
      <div style={{ position: 'relative', flex: 1, minWidth: 0 }}>
        <label style={{
          position: 'absolute', left: 0, right: 0, pointerEvents: 'none',
          color: floated ? P.ink2 : P.ink3, fontWeight: floated ? 700 : 500,
          letterSpacing: -0.1,
          fontSize: floated ? 11.5 : 15,
          top: floated ? 8 : '50%',
          transform: floated ? 'none' : 'translateY(-50%)',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          transition: 'top 160ms ease, font-size 160ms ease, transform 160ms ease, color 160ms ease',
        }}>{label}</label>
        <input
          type={type} inputMode={inputMode} maxLength={maxLength}
          value={value} onChange={onChange}
          onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
          style={{
            width: '100%', boxSizing: 'border-box', border: 'none', outline: 'none',
            background: 'transparent', fontFamily: 'inherit', fontSize: 15, color: P.ink,
            letterSpacing: -0.2, padding: '25px 0 9px', ...inputStyle,
          }}
        />
      </div>
      {trailing}
    </div>
  );
}

function BrandBlueLogin() {
  const [email, setEmail] = React.useState('');
  const [code, setCode] = React.useState('233124');
  const [countdown, setCountdown] = React.useState(0);

  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
  const codeValid = code.trim().length === 6;

  React.useEffect(() => {
    if (countdown <= 0) return;
    const id = setTimeout(() => setCountdown(c => c - 1), 1000);
    return () => clearTimeout(id);
  }, [countdown]);

  return (
    <div style={{
      height: '100%', background: P.canvas, overflowY: 'auto',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '0 28px', maxWidth: 440, width: '100%', margin: '0 auto', boxSizing: 'border-box',
      }}>
        {/* ── Logo + 字樣。透明去背,所以沒有圓角也沒有陰影 ——
             圓角會裁到圖案的角,而矩形陰影畫在非矩形的圖背後會露餡。 ── */}
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 36,
        }}>
          <img
            src={LOGO} alt=""
            style={{
              height: LOGO_HEIGHT, width: Math.round(LOGO_HEIGHT * LOGO_ASPECT), display: 'block',
            }}
          />
          <div style={{
            marginTop: 14,
            fontFamily: "'Plus Jakarta Sans', 'Noto Sans TC', sans-serif",
            fontSize: 20, fontWeight: 700, color: P.ink, letterSpacing: -0.4,
          }}>Goodie Hunter</div>
        </div>

        {/* ── 信箱 ── */}
        <BlueField
          label="信箱" type="email" inputMode="email"
          value={email} onChange={(e) => setEmail(e.target.value)}
          wrapperStyle={{ marginBottom: 12 }}
        />

        {/* ── 驗證碼。欄位維持白底,只有寬字距的大數字跟信箱區分開 ── */}
        <BlueField
          label="驗證碼" type="text" inputMode="numeric" maxLength={6}
          value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
          wrapperStyle={{ marginBottom: 24, padding: '0 14px' }}
          inputStyle={{
            fontSize: 16, letterSpacing: code ? 4 : -0.2, fontVariantNumeric: 'tabular-nums',
          }}
          trailing={
            // 永遠可按的藍字。信箱有問題在點下去時才說 —— 灰掉會多洩漏
            // 「這個信箱格式對不對」,而登入頁的整個設計是不外洩帳號存不存在。
            <button
              disabled={countdown > 0}
              style={{
                flexShrink: 0, border: 'none', background: 'transparent',
                padding: '9px 0 9px 12px',
                color: countdown > 0 ? P.ink3 : P.brand,
                fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700, letterSpacing: -0.1,
                cursor: countdown > 0 ? 'default' : 'pointer', whiteSpace: 'nowrap',
                transition: 'color 160ms ease',
              }}
            >{countdown > 0 ? `${countdown}s 後可發送` : '發送驗證碼'}</button>
          }
        />

        {/* ── 登入。整頁唯一一塊飽和藍 ── */}
        <button
          disabled={!codeValid}
          style={{
            width: '100%', borderRadius: 13, padding: '15px', border: 'none',
            background: codeValid ? P.brand : P.hairline,
            color: codeValid ? '#fff' : P.ink3,
            fontFamily: 'inherit', fontSize: 15.5, fontWeight: 700, letterSpacing: -0.2,
            cursor: codeValid ? 'pointer' : 'default',
            transition: 'background 160ms ease, color 160ms ease',
          }}
        >登入</button>

        {/* ── 註冊提示 ── */}
        <div style={{ marginTop: 20, textAlign: 'center', fontSize: 13.5, color: P.ink3, letterSpacing: -0.1 }}>
          還沒有帳號？
          <span style={{ color: P.brand, fontWeight: 700, cursor: 'pointer', marginLeft: 2 }}>立即註冊</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BrandBlueLogin, BlueField, BRAND_BLUE_PALETTE: P });