// app/page-auth.jsx — Sign in / Sign up + light profile (My reviews).

function PageAuth() {
  const app = useApp();
  const mode = app.route.name; // 'signin' | 'signup'
  const isUp = mode === 'signup';
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');

  const submit = (e) => {
    e.preventDefault();
    const display = isUp ? (name.trim() || email.split('@')[0]) : (email.split('@')[0] || 'Listener');
    app.signIn(display);
    app.showToast(isUp ? 'Welcome to Scholia' : 'Signed in');
    navigate('/');
  };

  const inputStyle = { width: '100%', border: '1px solid var(--rule-strong)', borderRadius: 4, background: '#fff', padding: '13px 15px', fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink)', outline: 'none' };
  const Label = ({ children }) => <span className="c-eyebrow" style={{ display: 'block', marginBottom: 8 }}>{children}</span>;

  return (
    <div className="coda" style={{ width: '100%', minHeight: '100%' }}>
      <Nav active="" />
      <main style={{ maxWidth: 440, margin: '0 auto', padding: '64px 20px 80px' }}>
        <div className="c-eyebrow" style={{ marginBottom: 12 }}>{isUp ? 'Create an account' : 'Welcome back'}</div>
        <h1 className="c-serif" style={{ fontSize: 40, lineHeight: 1.02, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 10 }}>
          {isUp ? 'Join the almanac' : 'Sign in'}
        </h1>
        <p style={{ fontSize: 15.5, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 32 }}>
          {isUp ? 'Rate recordings, write reviews, and add your voice to the fan score.' : 'Pick up where you left off.'}
        </p>

        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {isUp && (
            <div>
              <Label>Display name</Label>
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Marian Albright" style={inputStyle} />
            </div>
          )}
          <div>
            <Label>Email</Label>
            <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" style={inputStyle} />
          </div>
          <div>
            <Label>Password</Label>
            <input type="password" required value={pw} onChange={(e) => setPw(e.target.value)} placeholder="••••••••" style={inputStyle} />
          </div>
          <button className="c-btn" style={{ padding: '13px 20px', marginTop: 4 }} type="submit">{isUp ? 'Create account' : 'Sign in'}</button>
        </form>

        <div style={{ marginTop: 26, paddingTop: 22, borderTop: '1px solid var(--rule)', fontSize: 14.5, color: 'var(--ink-2)' }}>
          {isUp ? 'Already a member? ' : 'New to Scholia? '}
          <span className="c-link clickable" onClick={() => navigate(isUp ? '/signin' : '/signup')}>{isUp ? 'Sign in' : 'Create an account'}</span>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function PageMe() {
  const app = useApp();
  React.useEffect(() => { if (!app.user) navigate('/signin'); }, [app.user]);
  if (!app.user) return null;
  const reviews = app.myReviews;

  return (
    <div className="coda" style={{ width: '100%', minHeight: '100%' }}>
      <Nav active="" />
      <main className="app-wrap" style={{ paddingTop: 48, paddingBottom: 8 }}>
        <header style={{ display: 'flex', alignItems: 'center', gap: 22, paddingBottom: 30, borderBottom: '1px solid var(--rule)' }}>
          <div className="avatar" style={{ width: 64, height: 64, flex: '0 0 64px', fontSize: 27, cursor: 'default' }}>{app.user.initial}</div>
          <div>
            <h1 className="c-serif" style={{ fontSize: 38, fontWeight: 500, letterSpacing: '-0.02em' }}>{app.user.name}</h1>
            <div className="c-mono" style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>{app.user.handle} · {reviews.length} review{reviews.length === 1 ? '' : 's'}</div>
          </div>
        </header>

        <section style={{ paddingTop: 30 }}>
          <h2 className="c-serif" style={{ fontSize: 24, fontWeight: 500, marginBottom: 18 }}>Your reviews</h2>
          {reviews.length === 0 ? (
            <div style={{ padding: '36px 0' }}>
              <p className="c-serif" style={{ fontSize: 22, fontStyle: 'italic', color: 'var(--ink-2)', marginBottom: 18 }}>You haven’t reviewed anything yet.</p>
              <button className="c-btn" onClick={() => navigate('/')}>Find a recording to review</button>
            </div>
          ) : reviews.map((rv, i) => (
            <div key={i} className="clickable" onClick={() => navigate('/recording/' + rv.recording.id)}
              style={{ display: 'flex', gap: 18, padding: '18px 0', borderBottom: '1px solid var(--rule)' }}>
              <Ring value={rv.score} kind="fan" size={48} />
              <div style={{ flex: 1 }}>
                <div className="c-serif" style={{ fontSize: 18, fontWeight: 500 }}>{rv.recording.work.title} — {rv.recording.conductor || rv.recording.soloist}</div>
                <div className="c-mono" style={{ fontSize: 11.5, color: 'var(--ink-3)', margin: '3px 0 8px' }}>{rv.recording.year} · {rv.recording.label} · {rv.when}</div>
                <p style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.5 }}>{rv.text}</p>
              </div>
            </div>
          ))}
        </section>
      </main>
      <Footer />
    </div>
  );
}

Object.assign(window, { PageAuth, PageMe });