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

function LoginPage() {
  const [mode, setMode] = useState('login') // 'login' or 'register'
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [name, setName] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState('')

  const navigate = useNavigate()
  const { login: authLogin } = useAuth()

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

    try {
      if (mode === 'login') {
        const response = await api.login(email, password)
        localStorage.setItem('authToken', response.token)
        authLogin({ token: response.token, profile: response.profile })
        navigate('/')
      } else {
        await api.register(email, password, name)
        setSuccess('Registrierung erfolgreich! Bitte prüfe deine E-Mails.')
        setMode('login')
        setPassword('')
      }
    } catch (err) {
      setError(err.message || 'Ein Fehler ist aufgetreten')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="login-container" style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'var(--bg)',
      padding: '1rem'
    }}>
      <div className="card" style={{ maxWidth: '400px', width: '100%' }}>
        <h1 style={{ textAlign: 'center', marginBottom: '0.5rem' }}>
          🥋 Shinkan Jinkendo
        </h1>
        <p style={{ textAlign: 'center', color: 'var(--text2)', marginBottom: '2rem' }}>
          Trainer- und Vereinsplattform
        </p>

        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1.5rem' }}>
          <button
            className={mode === 'login' ? 'btn btn-primary' : 'btn btn-secondary'}
            onClick={() => setMode('login')}
            style={{ flex: 1 }}
          >
            Login
          </button>
          <button
            className={mode === 'register' ? 'btn btn-primary' : 'btn btn-secondary'}
            onClick={() => setMode('register')}
            style={{ flex: 1 }}
          >
            Registrieren
          </button>
        </div>

        <form onSubmit={handleSubmit}>
          {mode === 'register' && (
            <div className="form-row">
              <label className="form-label">Name</label>
              <input
                type="text"
                className="form-input"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required={mode === 'register'}
                placeholder="Dein Name"
              />
            </div>
          )}

          <div className="form-row">
            <label className="form-label">E-Mail</label>
            <input
              type="email"
              className="form-input"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              placeholder="name@beispiel.de"
            />
          </div>

          <div className="form-row">
            <label className="form-label">Passwort</label>
            <input
              type="password"
              className="form-input"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              placeholder="••••••••"
              minLength="6"
            />
          </div>

          {error && (
            <div style={{
              padding: '0.75rem',
              background: 'var(--danger)',
              color: 'white',
              borderRadius: '8px',
              marginBottom: '1rem'
            }}>
              {error}
            </div>
          )}

          {success && (
            <div style={{
              padding: '0.75rem',
              background: 'var(--accent)',
              color: 'white',
              borderRadius: '8px',
              marginBottom: '1rem'
            }}>
              {success}
            </div>
          )}

          <button
            type="submit"
            className="btn btn-primary btn-full"
            disabled={loading}
          >
            {loading ? 'Laden...' : mode === 'login' ? 'Anmelden' : 'Registrieren'}
          </button>
        </form>

        <p style={{ textAlign: 'center', color: 'var(--text3)', marginTop: '1.5rem', fontSize: '0.875rem' }}>
          v0.1.0 • Development
        </p>
      </div>
    </div>
  )
}

export default LoginPage