// Auth screens — shadcn/ui aesthetic
const AuthShell = ({ children }) => (
  <div className="auth-shell">
    <div className="auth-card">
      <div style={{display:'flex',justifyContent:'center',marginBottom:32}}><Logo/></div>
      {children}
    </div>
  </div>
);

const AuthScreen = ({ onAuth, onForgot, onRegister }) => (
  <AuthShell>
    <div className="auth-title">Welcome back</div>
    <div className="auth-sub">Enter your credentials to access your boards</div>
    <form onSubmit={(e)=>{e.preventDefault(); onAuth?.();}} style={{display:'flex',flexDirection:'column',gap:16}}>
      <div>
        <label className="label">Email</label>
        <input className="input" type="email" placeholder="name@example.com" defaultValue="linh@example.com"/>
      </div>
      <div>
        <div className="row between" style={{marginBottom:8}}>
          <label className="label" style={{margin:0}}>Password</label>
          <a onClick={onForgot} style={{fontSize:13, color:'var(--fg)', textDecoration:'underline', textUnderlineOffset:4, cursor:'pointer'}}>Forgot password?</a>
        </div>
        <input className="input" type="password" placeholder="••••••••" defaultValue="password"/>
      </div>
      <button className="btn btn-primary" type="submit" style={{width:'100%'}}>Sign in <Icon name="arrow" size={14}/></button>
    </form>
    <div className="muted" style={{textAlign:'center', fontSize:13, marginTop:24}}>
      Don't have an account? <a onClick={onRegister} style={{color:'var(--fg)', textDecoration:'underline', textUnderlineOffset:4, cursor:'pointer'}}>Create one</a>
    </div>
  </AuthShell>
);

const RegisterScreen = ({ onCreated, onBack }) => (
  <AuthShell>
    <div className="auth-title">Create your account</div>
    <div className="auth-sub">Use the email you registered for the course</div>
    <form onSubmit={(e)=>{e.preventDefault(); onCreated?.();}} style={{display:'flex',flexDirection:'column',gap:16}}>
      <div><label className="label">Display name</label><input className="input" placeholder="Linh Tran"/></div>
      <div><label className="label">Email</label><input className="input" type="email" placeholder="name@example.com"/></div>
      <div><label className="label">Password</label><input className="input" type="password" placeholder="At least 8 characters"/></div>
      <button className="btn btn-primary" type="submit" style={{width:'100%'}}>Create account</button>
    </form>
    <div className="muted" style={{textAlign:'center', fontSize:13, marginTop:24}}>
      Already have one? <a onClick={onBack} style={{color:'var(--fg)', textDecoration:'underline', textUnderlineOffset:4, cursor:'pointer'}}>Sign in</a>
    </div>
  </AuthShell>
);

const OtpScreen = ({ onVerify, onBack }) => {
  const [v, setV] = React.useState(['','','','','','']);
  return (
    <AuthShell>
      <div className="auth-title">Check your email</div>
      <div className="auth-sub">We sent a 6-digit code to <span style={{color:'var(--fg)'}}>linh@example.com</span></div>
      <div className="row" style={{gap:8, justifyContent:'center', marginBottom:20}}>
        {v.map((d,i)=>(
          <input key={i} className="input otp-cell" maxLength="1" value={d}
            onChange={e=>{ const nv=[...v]; nv[i]=e.target.value.slice(-1); setV(nv); }}/>
        ))}
      </div>
      <button className="btn btn-primary" onClick={onVerify} style={{width:'100%'}}>Verify and continue</button>
      <div className="row between" style={{marginTop:20, fontSize:13}}>
        <a onClick={onBack} style={{color:'var(--muted-fg)', cursor:'pointer'}}><Icon name="chevLeft" size={12}/> Back</a>
        <a style={{color:'var(--fg)', textDecoration:'underline', textUnderlineOffset:4, cursor:'pointer'}}>Resend code</a>
      </div>
    </AuthShell>
  );
};

const ForgotScreen = ({ onSent, onBack }) => (
  <AuthShell>
    <div className="auth-title">Forgot password?</div>
    <div className="auth-sub">Enter your email and we'll send a reset link</div>
    <form onSubmit={(e)=>{e.preventDefault(); onSent?.();}} style={{display:'flex',flexDirection:'column',gap:16}}>
      <div><label className="label">Email</label><input className="input" type="email" placeholder="name@example.com"/></div>
      <button className="btn btn-primary" type="submit" style={{width:'100%'}}>Send reset link</button>
    </form>
    <div style={{textAlign:'center', fontSize:13, marginTop:20}}>
      <a onClick={onBack} style={{color:'var(--muted-fg)', cursor:'pointer'}}><Icon name="chevLeft" size={12}/> Back to sign in</a>
    </div>
  </AuthShell>
);

const ResetScreen = ({ onDone, onBack }) => (
  <AuthShell>
    <div className="auth-title">Set new password</div>
    <div className="auth-sub">Choose a strong password you haven't used before</div>
    <form onSubmit={(e)=>{e.preventDefault(); onDone?.();}} style={{display:'flex',flexDirection:'column',gap:16}}>
      <div><label className="label">New password</label><input className="input" type="password" placeholder="At least 8 characters"/></div>
      <div><label className="label">Confirm password</label><input className="input" type="password" placeholder="Repeat new password"/></div>
      <button className="btn btn-primary" type="submit" style={{width:'100%'}}>Reset password</button>
    </form>
    <div style={{textAlign:'center', fontSize:13, marginTop:20}}>
      <a onClick={onBack} style={{color:'var(--muted-fg)', cursor:'pointer'}}><Icon name="chevLeft" size={12}/> Back to sign in</a>
    </div>
  </AuthShell>
);

Object.assign(window, { AuthScreen, RegisterScreen, OtpScreen, ForgotScreen, ResetScreen });