import { useState } from 'react'
import { useAuth } from '../context/AuthContext'
import { ForgotPassword } from './PasswordRecovery'

export default function LoginScreen() {
  const { login } = useAuth()
  const [showForgot, setShowForgot] = useState(false)
  const [email,    setEmail]    = useState('')
  const [password, setPassword] = useState('')
  const [error,    setError]    = useState(null)
  const [loading,  setLoading]  = useState(false)

  if (showForgot) return (
    <div style={{minHeight:'100vh',display:'flex',flexDirection:'column',
      alignItems:'center',justifyContent:'center',background:'var(--bg)',padding:24}}>
      <div style={{width:'100%',maxWidth:380}}>
        <div style={{textAlign:'center',marginBottom:24}}>
          <div style={{fontSize:28,fontWeight:800,color:'var(--accent)',letterSpacing:2}}>
            Mitai <span style={{fontWeight:300}}>Jinkendo</span>
          </div>
        </div>
        <div className="card" style={{padding:24}}>
          <ForgotPassword onBack={()=>setShowForgot(false)}/>
        </div>
      </div>
    </div>
  )

  const handleLogin = async () => {
    if (!email.trim() || !password.trim()) {
      setError('E-Mail und Passwort eingeben'); return
    }
    setLoading(true); setError(null)
    try {
      await login({ email: email.trim().toLowerCase(), password: password })
      // Redirect to dashboard after successful login
      window.location.href = '/'
    } catch(e) {
      setError(e.message || 'Ungültige E-Mail oder Passwort')
    } finally { setLoading(false) }
  }

  return (
    <div style={{minHeight:'100vh',display:'flex',flexDirection:'column',
      alignItems:'center',justifyContent:'center',background:'var(--bg)',padding:24}}>
      <div style={{width:'100%',maxWidth:380}}>

        {/* Logo */}
        <div style={{textAlign:'center',marginBottom:32}}>
          <div style={{width:80,height:80,borderRadius:18,background:'#085041',
            margin:'0 auto 16px',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <img src="/icon-192.png" style={{width:64,height:64,borderRadius:12}} alt=""/>
          </div>
          <div style={{fontSize:28,fontWeight:800,color:'var(--accent)',letterSpacing:2}}>
            Mitai <span style={{fontWeight:300}}>Jinkendo</span>
          </div>
          <div style={{fontSize:11,color:'var(--text3)',letterSpacing:'0.15em',marginTop:4}}>
            身体 · KÖRPER · GESUNDHEIT · VITALITÄT
          </div>
        </div>

        {/* Login Card */}
        <div className="card" style={{padding:28}}>
          <div style={{fontSize:16,fontWeight:600,marginBottom:20,color:'var(--text1)'}}>
            Anmelden
          </div>

          <div style={{marginBottom:12}}>
            <label style={{fontSize:12,fontWeight:600,color:'var(--text3)',
              letterSpacing:'0.05em',display:'block',marginBottom:6}}>E-MAIL</label>
            <input type="email" className="form-input" placeholder="deine@email.de"
              value={email} onChange={e=>setEmail(e.target.value)}
              onKeyDown={e=>e.key==='Enter'&&document.getElementById('pw-input')?.focus()}
              style={{width:'100%',boxSizing:'border-box'}}
              autoFocus autoComplete="email"/>
          </div>

          <div style={{marginBottom:20}}>
            <label style={{fontSize:12,fontWeight:600,color:'var(--text3)',
              letterSpacing:'0.05em',display:'block',marginBottom:6}}>PASSWORT</label>
            <input id="pw-input" type="password" className="form-input"
              placeholder="Passwort oder PIN"
              value={password} onChange={e=>setPassword(e.target.value)}
              onKeyDown={e=>e.key==='Enter'&&handleLogin()}
              style={{width:'100%',boxSizing:'border-box'}}
              autoComplete="current-password"/>
          </div>

          {error && (
            <div style={{background:'rgba(216,90,48,0.1)',color:'#D85A30',fontSize:13,
              padding:'10px 14px',borderRadius:8,marginBottom:16,
              border:'1px solid rgba(216,90,48,0.2)'}}>
              {error}
            </div>
          )}

          <button className="btn btn-primary btn-full" onClick={handleLogin}
            disabled={loading} style={{marginBottom:12}}>
            {loading
              ? <><div className="spinner" style={{width:14,height:14}}/> Anmelden…</>
              : 'Anmelden'}
          </button>

          <button onClick={()=>setShowForgot(true)}
            style={{background:'none',border:'none',cursor:'pointer',
              fontSize:13,color:'var(--text3)',width:'100%',
              textAlign:'center',padding:'4px 0',textDecoration:'underline'}}>
            Passwort vergessen?
          </button>

          <div style={{
            marginTop:24, paddingTop:20,
            borderTop:'1px solid var(--border)',
            textAlign:'center'
          }}>
            <span style={{color:'var(--text2)',fontSize:14}}>
              Noch kein Account?{' '}
            </span>
            <a href="/register" style={{
              color:'var(--accent)',fontWeight:600,fontSize:14,
              textDecoration:'none'
            }}>
              Jetzt registrieren
            </a>
          </div>
        </div>

        <div style={{textAlign:'center',marginTop:20,fontSize:11,color:'var(--text3)'}}>
          人拳道 · Der menschliche Weg der Kampfkunst
        </div>
      </div>
    </div>
  )
}
