import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const [isRegistering, setIsRegistering] = useState(false)
  
  const { login, register } = useAuth()
  const navigate = useNavigate()

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')
    setLoading(true)

    try {
      const result = isRegistering 
        ? await register(email, password, name || email.split('@')[0])
        : await login(email, password)
      
      if (result.success) {
        navigate('/tickets')
      } else {
        // Bessere Fehlermeldungen
        let errorMessage = result.error || 'Login fehlgeschlagen'
        
        if (errorMessage.includes('Invalid credentials') || errorMessage.includes('401')) {
          errorMessage = 'Ungültige Email oder Passwort. Bitte überprüfe deine Eingaben.'
        } else if (errorMessage.includes('User already exists')) {
          errorMessage = 'Ein Benutzer mit dieser Email existiert bereits. Bitte logge dich ein.'
          setIsRegistering(false)
        } else if (errorMessage.includes('User with the same email already exists')) {
          errorMessage = 'Diese Email ist bereits registriert. Bitte logge dich ein.'
          setIsRegistering(false)
        } else if (errorMessage.includes('Email/Password') || errorMessage.includes('auth')) {
          errorMessage = 'Email/Password Authentifizierung ist möglicherweise nicht aktiviert. Bitte überprüfe deine Appwrite-Konfiguration.'
        }
        
        setError(errorMessage)
      }
    } catch (err) {
      setError('Ein unerwarteter Fehler ist aufgetreten: ' + (err.message || 'Unbekannter Fehler'))
    } finally {
      setLoading(false)
    }
  }

  return (
    <div style={{ 
      minHeight: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      background: '#f1f1f1'
    }}>
      <div className="card" style={{ width: '400px' }}>
        <div className="card-header text-center">
          <h2>Webklar WOMS 2.0</h2>
        </div>
        <div className="card-body">
          <form onSubmit={handleSubmit}>
            {error && (
              <div className="bg-red text-white p-1 mb-2" style={{ borderRadius: '4px' }}>
                {error}
              </div>
            )}
            
            {isRegistering && (
              <div className="form-group">
                <label className="form-label">Name (optional)</label>
                <input
                  type="text"
                  className="form-control"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Dein Name"
                />
              </div>
            )}

            <div className="form-group">
              <label className="form-label">Email</label>
              <input
                type="email"
                className="form-control"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                placeholder="deine@email.com"
              />
            </div>

            <div className="form-group">
              <label className="form-label">Password</label>
              <input
                type="password"
                className="form-control"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                placeholder="••••••••"
                minLength={8}
              />
            </div>

            <button 
              type="submit" 
              className="btn btn-green"
              style={{ width: '100%', marginBottom: '10px' }}
              disabled={loading}
            >
              {loading 
                ? (isRegistering ? 'Registrierung läuft...' : 'Login läuft...') 
                : (isRegistering ? 'Registrieren' : 'Login')
              }
            </button>

            <button
              type="button"
              className="btn"
              style={{ 
                width: '100%', 
                background: 'transparent',
                border: '1px solid #ccc',
                color: '#333'
              }}
              onClick={() => {
                setIsRegistering(!isRegistering)
                setError('')
              }}
              disabled={loading}
            >
              {isRegistering 
                ? 'Bereits registriert? Hier einloggen' 
                : 'Noch kein Account? Hier registrieren'
              }
            </button>
          </form>
        </div>
      </div>
    </div>
  )
}