/* 登录页 */
function Login() {
  const { dispatch } = useStore();
  const { go } = useNav();
  const [role, setRole] = React.useState('student');
  const [tab, setTab] = React.useState('login');
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [confirmPassword, setConfirmPassword] = React.useState('');
  const [nickname, setNickname] = React.useState('');
  const [grade, setGrade] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const feats = [
    { ico:Icons.edit, t:'三种录入方式', s:'手动 · 批量 · AI 拍照识别，录入零门槛' },
    { ico:Icons.chart, t:'智能学情诊断', s:'自动定位薄弱学科，输出个性化提升建议' },
    { ico:Icons.gift, t:'积分激励 + 多子女管理', s:'正向驱动学习，一个家长账号管理多名子女' },
  ];
  const gradeOptions = ['小学一年级','小学二年级','小学三年级','小学四年级','小学五年级','小学六年级','初一','初二','初三','高一','高二','高三'];
  const showTestAccounts = ['localhost', '127.0.0.1', ''].includes(window.location.hostname);
  const switchTab = (nextTab) => {
    if (loading) return;
    setTab(nextTab);
    setError('');
  };
  const submitAuth = async () => {
    if (loading) return;

    const name = username.trim();
    const pwd = password;
    const nick = nickname.trim();
    const stuGrade = grade.trim();
    const serverError = '服务器错误，请稍后再试';

    setError('');
    if (!name) {
      setError('请输入用户名');
      return;
    }
    if (!pwd) {
      setError('请输入密码');
      return;
    }
    if (tab === 'register') {
      if (pwd.length < 6) {
        setError('密码至少 6 位');
        return;
      }
      if (pwd !== confirmPassword) {
        setError('两次密码不一致');
        return;
      }
      if (!nick) {
        setError('请输入昵称');
        return;
      }
      if (role === 'student' && !stuGrade) {
        setError('请选择年级');
        return;
      }
    }

    setLoading(true);
    try {
      const payload = tab === 'login'
        ? { username: name, password: pwd }
        : { username: name, password: pwd, nickname: nick, role, grade: role === 'student' ? stuGrade : undefined };
      const response = await fetch(`/api/auth/${tab === 'login' ? 'login' : 'register'}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || !result.success) {
        setError(result.message || serverError);
        return;
      }
      const data = result.data || result;
      if (!data.token || !data.user || !data.user.role) {
        setError(serverError);
        return;
      }
      dispatch({
        type: 'AUTH_SUCCESS',
        token: data.token,
        user: data.user,
        children: data.children,
        nextPage: data.nextPage,
        message: tab === 'login' ? '登录成功' : '注册成功',
      });
      go(data.nextPage || 'home');
    } catch (e) {
      setError(serverError);
    } finally {
      setLoading(false);
    }
  };
  return <div className="auth">
    <section className="auth-brand">
      <span className="blob b1"></span><span className="blob b2"></span>
      <div className="auth-logo">
        <div className="lg"><Ico d={Icons.cap} size={26} style={{color:'#fff'}}/></div>
        <div className="nm">学情星<small>STUDENT GRADES</small></div>
      </div>
      <div className="auth-hero">
        <h1>记录每一次成绩，<br/>看见每一点进步。</h1>
        <p>多模式录入、智能学情分析、积分激励与暖心陪伴 —— 让学习的每一步都被看见、被鼓励。</p>
        <div className="auth-feats">
          {feats.map((f,i)=><div className="auth-feat" key={i}>
            <div className="fi"><Ico d={f.ico} size={21} style={{color:'#fff'}}/></div>
            <div><div className="ft">{f.t}</div><div className="fs">{f.s}</div></div>
          </div>)}
        </div>
      </div>
    </section>
    <section className="auth-form-wrap">
      <div className="auth-card">
        <div className="auth-tabs">
          <div className={'auth-tab '+(tab==='login'?'on':'')} onClick={()=>switchTab('login')}>登录</div>
          <div className={'auth-tab '+(tab==='register'?'on':'')} onClick={()=>switchTab('register')}>注册</div>
        </div>
        <div className="auth-h">{tab==='login'?'欢迎回来':'创建账号'}</div>
        <div className="auth-sub">{tab==='login'?'使用用户名和密码登录你的账号':'选择身份并完成注册，即可开始使用'}</div>

        {tab === 'register' && <>
          <div style={{fontSize:12.5,fontWeight:700,color:'var(--ink-2)',marginBottom:10}}>选择身份</div>
          <div className="role-choose">
            <div className={'role-opt '+(role==='student'?'on':'')} onClick={()=>{ if (!loading) setRole('student'); }}>
              <div className="ri bg-blue-soft"><Ico d={Icons.cap} size={20}/></div>
              <div className="rt">我是学生</div>
              <div className="rs">录入成绩、查看分析、积累积分</div>
            </div>
            <div className={'role-opt '+(role==='parent'?'on':'')} onClick={()=>{ if (!loading) setRole('parent'); }}>
              <div className="ri bg-orange-soft"><Ico d={Icons.users} size={20}/></div>
              <div className="rt">我是家长</div>
              <div className="rs">管理多名子女、查看学情、自定义激励</div>
            </div>
          </div>
        </>}

        <div className="field">
          <div className="input-icon">
            <Ico d="M4 20c0-4 3-7 8-7s8 3 8 7 M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10" size={18}/>
            <input className="input" value={username} onChange={e=>setUsername(e.target.value)} placeholder="请输入用户名" autoComplete="username"/>
          </div>
        </div>
        <div className="field">
          <div className="input-icon">
            <Ico d="M5 11h14v11H5z M8 11V7a4 4 0 0 1 8 0v4" size={18}/>
            <input className="input" type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="请输入密码" autoComplete={tab==='login'?'current-password':'new-password'}/>
          </div>
        </div>
        {tab === 'register' && <>
          <div className="field">
            <div className="input-icon">
              <Ico d="M5 11h14v11H5z M8 11V7a4 4 0 0 1 8 0v4" size={18}/>
              <input className="input" type="password" value={confirmPassword} onChange={e=>setConfirmPassword(e.target.value)} placeholder="请再次输入密码" autoComplete="new-password"/>
            </div>
          </div>
          <div className="field">
            <div className="input-icon">
              <Ico d="M4 19c2-4 5-6 8-6s6 2 8 6 M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8" size={18}/>
              <input className="input" value={nickname} onChange={e=>setNickname(e.target.value)} placeholder="请输入昵称" autoComplete="nickname"/>
            </div>
          </div>
          {role === 'student' && <div className="field">
            <div className="input-icon">
              <Ico d={Icons.cap} size={18}/>
              <select className="input" value={grade} onChange={e=>setGrade(e.target.value)}>
                <option value="">请选择年级</option>
                {gradeOptions.map(item => <option key={item} value={item}>{item}</option>)}
              </select>
            </div>
          </div>}
        </>}
        {error && <div className="auth-error" style={{marginBottom:12,color:'var(--coral)',fontSize:13,fontWeight:700}}>{error}</div>}
        {tab === 'login' && showTestAccounts && <div className="auth-meta">
          <div>测试账号：student / 123456，parent / 123456</div>
        </div>}
        <Button size="lg" className="" style={{width:'100%'}} onClick={submitAuth} disabled={loading}>
          {loading ? '处理中...' : (tab==='login'?'登录':'注册并登录')}
        </Button>
        <div className="auth-foot">登录即代表同意《用户协议》与《隐私政策》</div>
      </div>
    </section>
  </div>;
}
Object.assign(window, { Login });