/* ============================================================
   AUTH — Sign in / Sign up
   ============================================================ */
function AuthShell({ eyebrow, title, sub, children, footer }) {
  return (
    <div style={{ background: 'linear-gradient(160deg, var(--cream-deep), var(--blush-soft))', minHeight: '72vh', display: 'grid', placeItems: 'center', padding: 'clamp(48px,8vw,96px) var(--gutter)' }}>
      <div style={{ width: '100%', maxWidth: 460, background: 'var(--ivory)', borderRadius: 'var(--r-xl)', padding: 'clamp(28px,5vw,44px)', boxShadow: 'var(--shadow-lg)' }}>
        <p className="eyebrow">{eyebrow}</p>
        <h1 style={{ fontSize: 'clamp(30px,4vw,44px)', margin: '10px 0 8px' }}>{title}</h1>
        {sub && <p className="muted" style={{ marginBottom: 26, fontSize: 15 }}>{sub}</p>}
        {children}
        {footer && <div style={{ marginTop: 24, textAlign: 'center', fontSize: 14.5, color: 'var(--ink-soft)' }}>{footer}</div>}
      </div>
    </div>
  );
}

function SignInPage() {
  const { signIn, nav, user, toast } = useStore();
  const [form, setForm] = useState({ email: '', password: '' });
  const [error, setError] = useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  useEffect(() => { if (user) nav('account'); }, [user]);

  const submit = (e) => {
    e.preventDefault();
    if (!form.email || !form.password) { setError('Please enter your email and password.'); return; }
    const ok = signIn(form.email, form.password);
    if (ok) { toast('Welcome back', 'check'); nav('account'); }
    else setError('We couldn’t find an account with those details.');
  };

  return (
    <AuthShell
      eyebrow="My Account"
      title={<>Welcome <em style={{ fontStyle: 'italic' }}>back</em></>}
      sub="Sign in to track your orders and revisit your saved pieces."
      footer={<>New here? <button className="link-u" onClick={() => nav('signup')} style={{ color: 'var(--gold-deep)', fontWeight: 500 }}>Create an account</button></>}
    >
      <form onSubmit={submit}>
        <div className="field" style={{ marginBottom: 16 }}><label>Email</label><input className="input" type="email" value={form.email} onChange={e => { set('email', e.target.value); setError(''); }} placeholder="you@email.com" /></div>
        <div className="field" style={{ marginBottom: 8 }}><label>Password</label><input className="input" type="password" value={form.password} onChange={e => { set('password', e.target.value); setError(''); }} placeholder="••••••••" /></div>
        <div style={{ textAlign: 'right', marginBottom: 18 }}><button type="button" className="link-u" style={{ fontSize: 13, color: 'var(--ink-soft)' }}>Forgot password?</button></div>
        {error && <p style={{ color: 'var(--blush)', fontSize: 13.5, marginBottom: 14 }}>{error}</p>}
        <button className="btn btn-gold btn-block btn-lg" type="submit">Sign in</button>
      </form>
    </AuthShell>
  );
}

function SignUpPage() {
  const { signUp, nav, user, toast } = useStore();
  const [form, setForm] = useState({ firstName: '', lastName: '', email: '', phone: '', password: '' });
  const [error, setError] = useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  useEffect(() => { if (user) nav('account'); }, [user]);

  const submit = (e) => {
    e.preventDefault();
    if (!form.firstName || !form.lastName || !form.email || !form.password) { setError('Please fill in all required fields.'); return; }
    const users = JSON.parse(localStorage.getItem('hpn_users') || '[]');
    if (users.some(u => u.email.toLowerCase() === form.email.toLowerCase())) { setError('An account with this email already exists.'); return; }
    signUp(form);
    toast('Account created', 'check');
    nav('account');
  };

  return (
    <AuthShell
      eyebrow="Create Account"
      title={<>Join the <em style={{ fontStyle: 'italic' }}>atelier</em></>}
      sub="Save your favourites and track every order from received to delivered."
      footer={<>Already have an account? <button className="link-u" onClick={() => nav('signin')} style={{ color: 'var(--gold-deep)', fontWeight: 500 }}>Sign in</button></>}
    >
      <form onSubmit={submit}>
        <div className="form-row" style={{ marginBottom: 16 }}>
          <div className="field"><label>First name</label><input className="input" value={form.firstName} onChange={e => { set('firstName', e.target.value); setError(''); }} placeholder="Alex" /></div>
          <div className="field"><label>Last name</label><input className="input" value={form.lastName} onChange={e => { set('lastName', e.target.value); setError(''); }} placeholder="Morgan" /></div>
        </div>
        <div className="field" style={{ marginBottom: 16 }}><label>Email</label><input className="input" type="email" value={form.email} onChange={e => { set('email', e.target.value); setError(''); }} placeholder="you@email.com" /></div>
        <div className="field" style={{ marginBottom: 16 }}><label>Phone <span style={{ color: 'var(--ink-faint)', fontWeight: 400 }}>(optional)</span></label><input className="input" value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="+234 …" /></div>
        <div className="field" style={{ marginBottom: 18 }}><label>Password</label><input className="input" type="password" value={form.password} onChange={e => { set('password', e.target.value); setError(''); }} placeholder="Choose a password" /></div>
        {error && <p style={{ color: 'var(--blush)', fontSize: 13.5, marginBottom: 14 }}>{error}</p>}
        <button className="btn btn-gold btn-block btn-lg" type="submit">Create account</button>
      </form>
    </AuthShell>
  );
}

Object.assign(window, { SignInPage, SignUpPage, AuthShell });