/* page-auth.jsx — 三级页：登录 / 注册 (加入社区) */

const IcGit = (p) => <svg viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2C6.48 2 2 6.58 2 12.25c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.49v-1.7c-2.78.62-3.37-1.21-3.37-1.21-.45-1.18-1.11-1.49-1.11-1.49-.91-.64.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.56 2.36 1.11 2.94.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.27 2.75 1.05A9.4 9.4 0 0 1 12 6.84c.85 0 1.71.12 2.51.34 1.91-1.32 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.05.36.32.68.94.68 1.9v2.82c0 .27.18.6.69.49A10.26 10.26 0 0 0 22 12.25C22 6.58 17.52 2 12 2z" /></svg>;
const IcMail = (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><rect x="3" y="5" width="18" height="14" rx="2.5" /><path d="M4 7l8 6 8-6" /></svg>;

function AuthPage() {
  const db = useKadaDB();
  const [mode, setMode] = React.useState('register');
  const [agree, setAgree] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', password: '' });
  const [err, setErr] = React.useState('');
  const isReg = mode === 'register';
  const set = (k) => (e) => { setForm((f) => ({ ...f, [k]: e.target.value })); setErr(''); };
  const [busy, setBusy] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    const res = await (isReg ? db.register(form) : db.login(form));
    setBusy(false);
    if (res && res.ok) { setDone(true); } else { setErr((res && res.error) || '出错了，请重试'); }
  };

  if (done) {
    return (
      <div className="kc"><div className="auth-stage">
        <div className="auth-card nm-rise">
          <div className="done-card">
            <span className="check nm-rise"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg></span>
            <h3>{isReg ? '欢迎加入咔嗒Lab！' : '登录成功'}</h3>
            <p>{isReg ? '你的账号已创建。现在就去发第一帖，或逛逛技术广场吧。' : '很高兴又见到你，继续探索社区吧。'}</p>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="社区发帖.html" className="btn btn-accent btn-full">去发帖</a>
              <a href="咔哒Lab 首页.html" className="btn btn-full">回首页</a>
            </div>
          </div>
        </div>
      </div></div>
    );
  }

  return (
    <div className="kc"><div className="auth-stage">
      <div className="auth-card nm-rise">
        <div className="brand"><Logo height={30} /></div>
        <div className="auth-head">
          <h1>{isReg ? '加入咔嗒Lab' : '欢迎回来'}</h1>
          <p>{isReg ? '与全球 AI 社区、企业与开发者一起“咔嗒”一下' : '登录以继续你的社区之旅'}</p>
        </div>

        <div className="auth-tabs">
          <button className={isReg ? 'on' : ''} onClick={() => setMode('register')}>注册</button>
          <button className={!isReg ? 'on' : ''} onClick={() => setMode('login')}>登录</button>
        </div>

        <form onSubmit={submit}>
          {isReg && <div className="fld"><label>昵称</label><input className="input" required placeholder="给自己起个名字" value={form.name} onChange={set('name')} /></div>}
          <div className="fld"><label>邮箱</label><input className="input" type="email" required placeholder="you@example.com" value={form.email} onChange={set('email')} /></div>
          <div className="fld"><label>密码</label><input className="input" type="password" required placeholder={isReg ? '设置一个密码（至少 8 位）' : '输入密码'} value={form.password} onChange={set('password')} /></div>

          {err && <div className="auth-err" style={{ color: '#e0524d', fontSize: 13, margin: '-4px 0 14px', fontWeight: 500 }}>{err}</div>}

          {isReg ? (
            <div className="agree" onClick={() => setAgree(!agree)}>
              <span className={'box' + (agree ? ' on' : '')}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg></span>
              <span>我已阅读并同意 <a href="#" onClick={(e) => e.preventDefault()}>服务条款</a> 与 <a href="#" onClick={(e) => e.preventDefault()}>隐私政策</a></span>
            </div>
          ) : (
            <div style={{ textAlign: 'right', marginBottom: 18 }}><a className="auth-foot" style={{ margin: 0 }} href="#" onClick={(e) => e.preventDefault()}><span style={{ color: 'var(--accent)', fontWeight: 600, fontSize: 13 }}>忘记密码？</span></a></div>
          )}

          <button className="btn btn-accent btn-full" type="submit" disabled={(isReg && !agree) || busy} style={{ opacity: ((isReg && !agree) || busy) ? .55 : 1 }}>
            {busy ? '请稍候…' : (isReg ? '创建账号' : '登录')} <Arrow />
          </button>
        </form>

        <div className="divider">或使用</div>
        <div className="oauth">
          <span className="ob"><IcGit />GitHub</span>
          <span className="ob"><IcMail />邮箱链接</span>
        </div>

        <div className="auth-foot">
          {isReg ? <>已有账号？<a onClick={() => setMode('login')}>去登录</a></> : <>还没有账号？<a onClick={() => setMode('register')}>免费注册</a></>}
        </div>
      </div>
    </div></div>
  );
}

(window.__KADA_PAGES = window.__KADA_PAGES || {}).auth = { Comp: AuthPage, active: null };