import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Mail, ArrowLeft, CheckCircle } from 'lucide-react';
import Button from '../components/ui/Button';
import Input from '../components/ui/Input';
import Card from '../components/ui/Card';
import axios from 'axios';

export default function PasswordResetRequest() {
  const [email, setEmail] = useState('');
  const [userType, setUserType] = useState<'admin' | 'portal'>('admin');
  const [isLoading, setIsLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      await axios.post('/api/auth/password-reset/request', { email, userType });
      setSent(true);
    } catch (err: any) {
      // Backend sendet absichtlich immer 200, aber Rate-Limit kann 429 senden
      if (err.response?.status === 429) {
        setError(err.response.data?.error || 'Zu viele Anfragen. Bitte später erneut versuchen.');
      } else {
        setSent(true); // Auch bei anderen Fehlern Erfolg anzeigen (Email-Enumeration-Schutz)
      }
    } finally {
      setIsLoading(false);
    }
  };

  if (sent) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-100">
        <Card className="w-full max-w-md">
          <div className="text-center">
            <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
            <h1 className="text-2xl font-bold text-gray-900 mb-2">E-Mail gesendet</h1>
            <p className="text-gray-600 mb-6">
              Wenn ein Konto mit der E-Mail <strong>{email}</strong> existiert, haben wir dir einen
              Link zum Zurücksetzen des Passworts gesendet. Der Link ist 2 Stunden gültig.
            </p>
            <p className="text-sm text-gray-500 mb-6">
              Nichts erhalten? Schau in den Spam-Ordner oder versuche es in ein paar Minuten erneut.
            </p>
            <Link to="/login">
              <Button variant="secondary" className="w-full">
                Zurück zum Login
              </Button>
            </Link>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <Card className="w-full max-w-md">
        <div className="text-center mb-6">
          <Mail className="w-10 h-10 text-blue-500 mx-auto mb-3" />
          <h1 className="text-2xl font-bold text-gray-900">Passwort vergessen?</h1>
          <p className="text-gray-600 mt-2 text-sm">
            Gib deine E-Mail-Adresse ein. Wir senden dir einen Link zum Zurücksetzen.
          </p>
        </div>

        {error && (
          <div className="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Konto-Typ</label>
            <div className="flex gap-4">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  name="userType"
                  checked={userType === 'admin'}
                  onChange={() => setUserType('admin')}
                />
                <span className="text-sm">Mitarbeiter</span>
              </label>
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="radio"
                  name="userType"
                  checked={userType === 'portal'}
                  onChange={() => setUserType('portal')}
                />
                <span className="text-sm">Kunde (Portal)</span>
              </label>
            </div>
          </div>

          <Input
            label="E-Mail"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            autoComplete="email"
            placeholder="deine@email.de"
          />

          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? 'Wird gesendet…' : 'Link zum Zurücksetzen senden'}
          </Button>

          <Link
            to="/login"
            className="flex items-center justify-center gap-1 text-sm text-gray-600 hover:text-gray-900"
          >
            <ArrowLeft className="w-4 h-4" />
            Zurück zum Login
          </Link>
        </form>
      </Card>
    </div>
  );
}