// Claimmee 登录 / 注册 — 微信 + 手机号验证码。合成演示，不真实发送/校验。
const L = window.ClaimmeeDesignSystem_e4fda8;

function Login() {
  const [tab, setTab] = React.useState('phone');
  const [phone, setPhone] = React.useState('');
  const [code, setCode] = React.useState('');
  const [sent, setSent] = React.useState(0);
  const valid = /^1\d{10}$/.test(phone);

  React.useEffect(() => {
    if (sent <= 0) return;
    const t = setTimeout(() => setSent((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [sent]);

  const login = () => { window.ClaimmeeMkt._user = { phone: phone || 'wechat' }; window.ClaimmeeNav && window.ClaimmeeNav('account'); };

  const inputStyle = { width: '100%', border: '1px solid var(--border-input)', borderRadius: 'var(--radius-md)', padding: '0.9rem 1rem', fontFamily: 'var(--font-sans)', fontSize: '1rem', minHeight: 'var(--tap-min)', boxSizing: 'border-box' };

  return (
    <div style={{ minHeight: 'calc(100vh - 58px)', background: 'var(--grad-page)', display: 'grid', placeItems: 'center', padding: '40px 16px' }}>
      <div style={{ width: 'min(440px, 100%)' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <img src="../../assets/logo-mark.svg" alt="Claimmee" style={{ height: 52 }} />
          <h1 style={{ margin: '16px 0 4px', fontSize: '1.7rem', fontWeight: 900, color: 'var(--slate-900)', letterSpacing: '-0.02em' }}>登录 / 注册</h1>
          <p style={{ margin: 0, color: 'var(--text-muted)' }}>登录后管理你的案件与进度</p>
        </div>

        <L.Panel style={{ display: 'grid', gap: 18 }}>
          <div style={{ display: 'flex', gap: 6, background: 'var(--surface-sunken)', padding: 5, borderRadius: 'var(--radius-pill)' }}>
            {[['phone', '手机号登录'], ['wechat', '微信登录']].map(([k, l]) => (
              <button key={k} onClick={() => setTab(k)} style={{ flex: 1, padding: '0.6rem', borderRadius: 'var(--radius-pill)', border: 0, cursor: 'pointer', fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: '0.92rem', background: tab === k ? 'var(--white)' : 'transparent', color: tab === k ? 'var(--teal-700)' : 'var(--slate-500)', boxShadow: tab === k ? 'var(--shadow-xs)' : 'none', transition: 'all var(--dur-base) var(--ease-out)' }}>{l}</button>
            ))}
          </div>

          {tab === 'phone' ? (
            <React.Fragment>
              <label style={{ display: 'grid', gap: 8, fontWeight: 750, color: 'var(--slate-700)' }}>手机号
                <input value={phone} onChange={(e) => setPhone(e.target.value.replace(/\D/g, '').slice(0, 11))} placeholder="请输入 11 位手机号" inputMode="numeric" style={inputStyle} />
              </label>
              <label style={{ display: 'grid', gap: 8, fontWeight: 750, color: 'var(--slate-700)' }}>验证码
                <div style={{ display: 'flex', gap: 10 }}>
                  <input value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))} placeholder="6 位验证码" inputMode="numeric" style={{ ...inputStyle, flex: 1 }} />
                  <L.Button variant="secondary" disabled={!valid || sent > 0} onClick={() => setSent(60)}>{sent > 0 ? `${sent}s 后重发` : '获取验证码'}</L.Button>
                </div>
              </label>
              <L.Button variant="primary" size="lg" fullWidth disabled={!valid || code.length < 4} onClick={login}>登录 / 注册</L.Button>
              <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '0.8rem', textAlign: 'center' }}>演示模式：任意 11 位手机号 + 任意验证码即可登录</p>
            </React.Fragment>
          ) : (
            <div style={{ display: 'grid', gap: 16, justifyItems: 'center', padding: '8px 0 4px' }}>
              <div style={{ width: 176, height: 176, borderRadius: 'var(--radius-xl)', background: 'var(--white)', border: '1px solid var(--border-subtle)', display: 'grid', placeItems: 'center', position: 'relative', overflow: 'hidden' }}>
                {/* 合成二维码占位 */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(11, 1fr)', gap: 2, width: 132, height: 132 }}>
                  {Array.from({ length: 121 }).map((_, i) => {
                    const corner = (r, c) => r < 3 && c < 3 || r < 3 && c > 7 || r > 7 && c < 3;
                    const r = Math.floor(i / 11), c = i % 11;
                    const on = corner(r, c) || (((r * 7 + c * 13 + r * c) % 3) === 0);
                    return <div key={i} style={{ background: on ? 'var(--slate-900)' : 'transparent', borderRadius: 1 }} />;
                  })}
                </div>
                <div style={{ position: 'absolute', width: 40, height: 40, borderRadius: 10, background: 'var(--teal-700)', display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 900, border: '3px solid #fff' }}>C</div>
              </div>
              <div style={{ textAlign: 'center', color: 'var(--text-muted)', lineHeight: 1.6 }}>打开微信扫一扫<br />扫描二维码登录</div>
              <L.Button variant="primary" fullWidth onClick={login}>模拟扫码完成（演示）</L.Button>
            </div>
          )}
        </L.Panel>

        <p style={{ margin: '18px 0 0', textAlign: 'center', color: 'var(--text-muted)', fontSize: '0.82rem', lineHeight: 1.6 }}>登录即代表同意 <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--teal-700)', fontWeight: 700 }}>服务条款</a> 与 <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--teal-700)', fontWeight: 700 }}>隐私政策</a>。本页为合成演示，不真实发送短信或采集信息。</p>
      </div>
    </div>
  );
}

window.Login = Login;