import { useState } from 'react'
import LoginForm from './LoginForm'
import RegisterStep1 from './RegisterStep1'
import RegisterStep2 from './RegisterStep2'

const css = `
  :root {
    --bg: #F5F0E8; --surface: #FFFCF7; --border: #E2DAD0;
    --text: #2C2520; --muted: #9A8F85; --accent: #5C7A5E;
    --accent-lt: #EAF0EA; --danger: #C0544A; --danger-lt: #FBF0EF;
    --radius: 14px;
  }
  @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');
  @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
`

export default function AuthScreen() {
  const [mode, setMode] = useState(() => localStorage.getItem('hejyou_last_mode') || 'login')
  const [step, setStep] = useState('main')
  const [pendingUserId, setPendingUserId] = useState(null)
  const [pendingToken, setPendingToken] = useState(null)
  const [successName, setSuccessName] = useState('')

  const handleModeChange = (m) => {
    setMode(m); localStorage.setItem('hejyou_last_mode', m); setStep('main')
  }

  const handleNeedsProfile = (userId, token) => {
    setPendingUserId(userId); setPendingToken(token); setStep('profile')
  }

  return (
    <>
      <style>{css}</style>
      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', background: 'var(--bg)' }}>
        <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: '24px', padding: '48px 44px', width: '100%', maxWidth: '420px', boxShadow: '0 2px 40px rgba(44,37,32,0.06)', animation: 'fadeUp 0.3s ease' }}>

          {/* Brand */}
          <div style={{ textAlign: 'center', marginBottom: '36px' }}>
            <div style={{ width: '48px', height: '48px', background: 'var(--accent)', borderRadius: '50%', margin: '0 auto 14px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
                <circle cx="12" cy="12" r="10"/><path d="M8 12q2-5 4-4t4 4-4 4-4-4"/>
              </svg>
            </div>
            <h1 style={{ fontFamily: 'Lora, serif', fontSize: '22px', fontWeight: 500, letterSpacing: '-0.3px', color: 'var(--text)' }}>HejYou</h1>
            <p style={{ fontSize: '13px', color: 'var(--muted)', marginTop: '4px' }}>Sprachen lernen wie ein Kind</p>
          </div>

          {/* Toggle */}
          {step === 'main' && (
            <div style={{ display: 'flex', background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: '10px', padding: '3px', marginBottom: '32px', gap: '3px' }}>
              {['login', 'register'].map(m => (
                <button key={m} onClick={() => handleModeChange(m)} style={{
                  flex: 1, padding: '8px', border: 'none', borderRadius: '8px',
                  background: mode === m ? 'var(--surface)' : 'transparent',
                  fontFamily: 'DM Sans, sans-serif', fontSize: '13px', fontWeight: 500,
                  color: mode === m ? 'var(--text)' : 'var(--muted)', cursor: 'pointer',
                  boxShadow: mode === m ? '0 1px 4px rgba(44,37,32,0.08)' : 'none',
                  transition: 'all 0.2s',
                }}>
                  {m === 'login' ? 'Anmelden' : 'Registrieren'}
                </button>
              ))}
            </div>
          )}

          {/* Screens */}
          {step === 'main' && mode === 'login' && <LoginForm onNeedsProfile={handleNeedsProfile} />}
          {step === 'main' && mode === 'register' && <RegisterStep1 onSuccess={(id, t) => handleNeedsProfile(id, t)} />}
          {step === 'profile' && <RegisterStep2 userId={pendingUserId} userToken={pendingToken} onSuccess={(name) => { setSuccessName(name); setStep('success') }} />}

          {/* Erfolg */}
          {step === 'success' && (
            <div style={{ textAlign: 'center', padding: '24px 0' }}>
              <div style={{ width: '52px', height: '52px', background: 'var(--accent-lt)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
              </div>
              <strong style={{ fontFamily: 'Lora, serif', fontSize: '18px', display: 'block', marginBottom: '8px' }}>
                Willkommen, {successName}!
              </strong>
              <p style={{ fontSize: '14px', color: 'var(--muted)' }}>Dein Abenteuer beginnt jetzt.</p>
            </div>
          )}
        </div>
      </div>
    </>
  )
}
