import * as React from 'react';
import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Mail, CheckCircle, ArrowRight, ShieldAlert } from 'lucide-react';
import { TranslationSet } from '../types';

interface ForgotPasswordModalProps {
  isOpen: boolean;
  onClose: () => void;
  t: TranslationSet;
}

export default function ForgotPasswordModal({ isOpen, onClose, t }: ForgotPasswordModalProps) {
  const [email, setEmail] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim()) {
      setIsSubmitted(true);
    }
  };

  return (
    <div id="forgot-overlay" className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs p-4">
      <motion.div
        id="forgot-modal-box"
        initial={{ opacity: 0, scale: 0.95, y: 10 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.95, y: 10 }}
        className="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden border border-neutral-100 font-sans text-neutral-800"
      >
        <div className="p-8">
          <AnimatePresence mode="wait">
            {!isSubmitted ? (
              <motion.form
                key="form"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                onSubmit={handleSubmit}
                className="space-y-6"
              >
                <div className="text-center">
                  <div className="w-12 h-12 bg-emerald-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-emerald-100">
                    <ShieldAlert className="w-6 h-6 text-emerald-600" />
                  </div>
                  <h3 className="text-xl font-bold text-neutral-950 tracking-tight">Kodet nulstilling</h3>
                  <p className="text-sm text-neutral-500 mt-2 leading-relaxed">
                    Indtast din registrerede mailadresse nedenfor. Vi sender dig øjeblikkeligt et link til at nulstille din adgangskode.
                  </p>
                </div>

                <div className="space-y-2">
                  <label htmlFor="reset-email" className="block text-xs font-semibold uppercase tracking-wider text-neutral-500 font-mono">
                    {t.emailLabel}
                  </label>
                  <div className="relative flex items-center">
                    <Mail className="absolute left-3.5 w-4 h-4 text-neutral-300" />
                    <input
                      id="reset-email"
                      type="email"
                      required
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder={t.emailPlaceholder}
                      className="w-full bg-neutral-50 border border-neutral-200 hover:border-neutral-300 focus:border-neutral-900 focus:bg-white rounded-xl py-3 pl-11 pr-4 text-sm text-neutral-800 outline-hidden transition-all duration-150"
                    />
                  </div>
                </div>

                <div className="flex gap-3">
                  <button
                    type="button"
                    onClick={onClose}
                    className="w-1/3 bg-neutral-100 hover:bg-neutral-200 text-neutral-700 py-3 rounded-xl text-sm font-semibold transition"
                  >
                    Annuller
                  </button>
                  <button
                    type="submit"
                    className="w-2/3 bg-[#00965e] hover:bg-[#007a4c] text-white py-3 rounded-xl text-sm font-semibold flex items-center justify-center gap-2 transition"
                  >
                    <span>Nulstil kode</span>
                    <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
              </motion.form>
            ) : (
              <motion.div
                key="success"
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                className="text-center space-y-5 py-4"
              >
                <div className="w-14 h-14 bg-emerald-50 rounded-full flex items-center justify-center mx-auto border border-emerald-100">
                  <CheckCircle className="w-8 h-8 text-emerald-600 animate-bounce" />
                </div>
                <h3 className="text-xl font-bold text-neutral-950 tracking-tight">E-mail afsendt!</h3>
                <p className="text-sm text-neutral-500 leading-relaxed max-w-sm mx-auto">
                  En e-mail med instruktioner til nulstilling af din adgangskode er blevet sendt til <strong className="text-neutral-800">{email}</strong>. Check venligst din indbakke og spam-mappe.
                </p>
                <button
                  onClick={() => {
                    setIsSubmitted(false);
                    onClose();
                  }}
                  className="w-full bg-neutral-900 hover:bg-neutral-800 text-white py-3 rounded-xl text-sm font-semibold transition mt-2"
                >
                  Gå tilbage til login
                </button>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </motion.div>
    </div>
  );
}