import { useState } from 'react'
import { Link } from 'react-router-dom'
import { api } from '../utils/api'

export default function Register() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [passwordConfirm, setPasswordConfirm] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [success, setSuccess] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError(null)

    // Validation
    if (!name || name.length < 2) {
      setError('Name muss mindestens 2 Zeichen lang sein')
      return
    }
    if (!email || !email.includes('@')) {
      setError('Ungültige E-Mail-Adresse')
      return
    }
    if (password.length < 8) {
      setError('Passwort muss mindestens 8 Zeichen lang sein')
      return
    }
    if (password !== passwordConfirm) {
      setError('Passwörter stimmen nicht überein')
      return
    }

    setLoading(true)
    try {
      await api.register(name, email, password)
      setSuccess(true)
    } catch (err) {
      setError(err.message || 'Registrierung fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }

  if (success) {
    return (
      <div style={{
        maxWidth:420, margin:'0 auto', padding:'60px 20px',
        textAlign:'center'
      }}>
        <div style={{
          background:'var(--accent-light)',
          border:'2px solid var(--accent)',
          borderRadius:16, padding:'40px 24px', marginBottom:24
        }}>
          <div style={{fontSize:48, marginBottom:16}}>✓</div>
          <h2 style={{marginBottom:12, color:'var(--accent-dark)'}}>
            Registrierung erfolgreich!
          </h2>
          <p style={{color:'var(--text2)', lineHeight:1.6}}>
            Wir haben dir eine E-Mail mit einem Bestätigungslink gesendet.
            Bitte prüfe dein Postfach und bestätige deine E-Mail-Adresse.
          </p>
        </div>

        <Link to="/login" className="btn btn-primary btn-full">
          Zum Login
        </Link>

        <p style={{fontSize:12, color:'var(--text3)', marginTop:20}}>
          Keine E-Mail erhalten? Prüfe auch deinen Spam-Ordner.
        </p>
      </div>
    )
  }

  return (
    <div style={{maxWidth:420, margin:'0 auto', padding:'40px 20px'}}>
      <h1 style={{textAlign:'center', marginBottom:8}}>Registrierung</h1>
      <p style={{textAlign:'center', color:'var(--text2)', marginBottom:32}}>
        Erstelle deinen Mitai Jinkendo Account
      </p>

      <form onSubmit={handleSubmit} className="card" style={{padding:24}}>
        {error && (
          <div style={{
            padding:'12px 16px', background:'#FCEBEB',
            border:'1px solid #D85A30', borderRadius:8,
            color:'#D85A30', fontSize:14, marginBottom:20
          }}>
            {error}
          </div>
        )}

        <div className="form-row">
          <label className="form-label">Name *</label>
          <input
            type="text"
            className="form-input"
            value={name}
            onChange={e => setName(e.target.value)}
            placeholder="Dein Name"
            disabled={loading}
            required
          />
        </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)}
            placeholder="deine@email.de"
            disabled={loading}
            required
          />
        </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)}
            placeholder="Mindestens 8 Zeichen"
            disabled={loading}
            required
          />
        </div>

        <div className="form-row">
          <label className="form-label">Passwort bestätigen *</label>
          <input
            type="password"
            className="form-input"
            value={passwordConfirm}
            onChange={e => setPasswordConfirm(e.target.value)}
            placeholder="Passwort wiederholen"
            disabled={loading}
            required
          />
        </div>

        <button
          type="submit"
          className="btn btn-primary btn-full"
          disabled={loading}
          style={{marginTop:8}}
        >
          {loading ? 'Registriere...' : 'Registrieren'}
        </button>

        <div style={{
          textAlign:'center', marginTop:24,
          paddingTop:20, borderTop:'1px solid var(--border)'
        }}>
          <span style={{color:'var(--text2)', fontSize:14}}>
            Bereits registriert?{' '}
          </span>
          <Link to="/login" style={{
            color:'var(--accent)', fontWeight:600, fontSize:14
          }}>
            Zum Login
          </Link>
        </div>
      </form>

      <p style={{
        fontSize:11, color:'var(--text3)', textAlign:'center',
        marginTop:20, lineHeight:1.6
      }}>
        Mit der Registrierung akzeptierst du unsere Nutzungsbedingungen
        und Datenschutzerklärung.
      </p>
    </div>
  )
}
