import React, { useState, useEffect } 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 [publicClubs, setPublicClubs] = useState([])
  const [requestedClubId, setRequestedClubId] = useState('')
  const [resending, setResending] = useState(false)

  const navigate = useNavigate()
  const { checkAuth } = useAuth()

  useEffect(() => {
    if (mode !== 'register') return
    api.listPublicClubsDirectory().then(setPublicClubs).catch(() => setPublicClubs([]))
  }, [mode])

  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)
        await checkAuth()
        navigate('/')
      } else {
        const extra =
          requestedClubId !== ''
            ? { requested_club_id: parseInt(requestedClubId, 10) }
            : {}
        await api.register(email, password, name, extra)
        setSuccess('Registrierung erfolgreich! Bitte prüfe deine E-Mails (auch Spam).')
        setMode('login')
        setPassword('')
        setRequestedClubId('')
      }
    } catch (err) {
      setError(err.message || 'Ein Fehler ist aufgetreten')
    } finally {
      setLoading(false)
    }
  }

  const handleResendVerification = async () => {
    if (!email.trim()) {
      setError('Zuerst die E-Mail-Adresse eintragen.')
      return
    }
    setError('')
    setResending(true)
    try {
      await api.resendVerification(email.trim().toLowerCase())
      setSuccess(
        'Wenn diese Adresse für einen noch unbestätigten Account existiert, erhältst du gleich eine E-Mail.'
      )
    } catch (err) {
      setError(err.message || 'Versand fehlgeschlagen')
    } finally {
      setResending(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
            type="button"
            className={mode === 'login' ? 'btn btn-primary' : 'btn btn-secondary'}
            onClick={() => {
              setMode('login')
              setError('')
              setRequestedClubId('')
            }}
            style={{ flex: 1 }}
          >
            Login
          </button>
          <button
            type="button"
            className={mode === 'register' ? 'btn btn-primary' : 'btn btn-secondary'}
            onClick={() => {
              setMode('register')
              setError('')
            }}
            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">Verein (optional)</label>
              <select
                className="form-input"
                value={requestedClubId}
                onChange={(e) => setRequestedClubId(e.target.value)}
              >
                <option value="">Kein Antrag / später</option>
                {publicClubs.map((c) => (
                  <option key={c.id} value={String(c.id)}>
                    {c.name}
                    {c.abbreviation ? ` (${c.abbreviation})` : ''}
                  </option>
                ))}
              </select>
              <p style={{ fontSize: '0.72rem', color: 'var(--text3)', marginTop: '0.35rem', lineHeight: 1.4 }}>
                Nach der E-Mail-Bestätigung kann der Vereinsadmin deinen Beitritt freigeben.
              </p>
            </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="8"
            />
          </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>

        {mode === 'login' && (
          <div
            style={{
              marginTop: '1.25rem',
              paddingTop: '1rem',
              borderTop: '1px solid var(--border)',
            }}
          >
            <button
              type="button"
              className="btn btn-secondary btn-full"
              disabled={resending || !email.trim()}
              onClick={handleResendVerification}
            >
              {resending ? 'Sende…' : 'Bestätigungs-Link erneut senden'}
            </button>
            <p
              style={{
                marginTop: '0.45rem',
                fontSize: '0.76rem',
                color: 'var(--text3)',
                lineHeight: 1.4,
                textAlign: 'center',
              }}
            >
              Nutzt die E-Mail-Adresse vom Formular — für noch nicht verifizierte Konten (Rate Limit 3&nbsp;h).
            </p>
          </div>
        )}
      </div>
    </div>
  )
}

export default LoginPage