import * as React from 'react';
import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { User, Building2, Mail, Lock, Phone, CreditCard, ChevronRight, CheckCircle } from 'lucide-react';
import { TranslationSet } from '../types';

interface CreateAccountModalProps {
  isOpen: boolean;
  onClose: () => void;
  onRegister: (email: string, pass: string, name: string) => void;
  t: TranslationSet;
}

export default function CreateAccountModal({ isOpen, onClose, onRegister, t }: CreateAccountModalProps) {
  const [accountType, setAccountType] = useState<'private' | 'business'>('private');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [taxId, setTaxId] = useState(''); // CPR or CVR
  const [phone, setPhone] = useState('');
  const [plate, setPlate] = useState('');
  const [isSuccess, setIsSuccess] = useState(false);

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !email || !password || !taxId || !phone || !plate) {
      alert('Venligst udfyld alle felter markeret med stjerne / Please fill in all required fields.');
      return;
    }
    // Record credentials in parent local memory
    onRegister(email.trim().toLowerCase(), password, name.trim());
    setIsSuccess(true);
  };

  const handleCloseSuccess = () => {
    setIsSuccess(false);
    // Reset values
    setName('');
    setEmail('');
    setPassword('');
    setTaxId('');
    setPhone('');
    setPlate('');
    onClose();
  };

  return (
    <div id="create-acc-overlay" className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4 overflow-y-auto">
      <motion.div
        id="create-acc-box"
        initial={{ opacity: 0, scale: 0.95, y: 15 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.95 }}
        transition={{ duration: 0.3 }}
        className="w-full max-w-xl bg-white rounded-3xl shadow-2xl overflow-hidden border border-neutral-100 font-sans my-8"
      >
        <div className="p-8">
          <AnimatePresence mode="wait">
            {!isSuccess ? (
              <motion.div
                key="form-step"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
              >
                <div className="flex items-center justify-between border-b border-neutral-100 pb-5 mb-6">
                  <div>
                    <h3 className="text-2xl font-bold text-neutral-900 tracking-tight">{t.createAccountTitle}</h3>
                    <p className="text-xs text-neutral-400 font-mono mt-0.5">ESTABLISH PORTAL ACCOUNT</p>
                  </div>
                  <button
                    onClick={onClose}
                    className="h-8 w-8 rounded-full hover:bg-neutral-100 flex items-center justify-center text-neutral-400 hover:text-neutral-600 transition"
                  >
                    ✕
                  </button>
                </div>

                <form onSubmit={handleSubmit} className="space-y-5">
                  {/* Account Type Toggle */}
                  <div className="space-y-2">
                    <label className="block text-xs font-semibold uppercase tracking-wider text-neutral-500 font-mono">
                      {t.accountTypeLabel}
                    </label>
                    <div className="grid grid-cols-2 gap-3">
                      <button
                        type="button"
                        onClick={() => {
                          setAccountType('private');
                          setTaxId('');
                        }}
                        className={`flex items-center justify-center gap-2 py-3 px-4 rounded-xl border text-sm font-semibold transition-all ${
                          accountType === 'private'
                            ? 'bg-neutral-50 border-neutral-900 text-neutral-900'
                            : 'bg-white border-neutral-200 text-neutral-500 hover:border-neutral-300'
                        }`}
                      >
                        <User className="w-4 h-4" />
                        <span>{t.privateAccount}</span>
                      </button>

                      <button
                        type="button"
                        onClick={() => {
                          setAccountType('business');
                          setTaxId('');
                        }}
                        className={`flex items-center justify-center gap-2 py-3 px-4 rounded-xl border text-sm font-semibold transition-all ${
                          accountType === 'business'
                            ? 'bg-neutral-50 border-neutral-900 text-neutral-900'
                            : 'bg-white border-neutral-200 text-neutral-500 hover:border-neutral-300'
                        }`}
                      >
                        <Building2 className="w-4 h-4" />
                        <span>{t.businessAccount}</span>
                      </button>
                    </div>
                  </div>

                  {/* Multi-grid Inputs */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* Full Name */}
                    <div className="space-y-1.5 col-span-1 md:col-span-2">
                      <label htmlFor="reg-name" className="text-xs font-semibold text-neutral-600">{t.fullNameLabel}</label>
                      <input
                        id="reg-name"
                        type="text"
                        required
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        placeholder={t.fullNamePlaceholder}
                        className="w-full bg-neutral-50 border border-neutral-200 focus:border-neutral-900 rounded-xl px-4 py-2.5 text-sm outline-hidden transition"
                      />
                    </div>

                    {/* Email */}
                    <div className="space-y-1.5">
                      <label htmlFor="reg-email" className="text-xs font-semibold text-neutral-600">{t.emailLabel}</label>
                      <div className="relative flex items-center">
                        <Mail className="absolute left-3 w-4 h-4 text-neutral-300" />
                        <input
                          id="reg-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 focus:border-neutral-900 rounded-xl pl-9 pr-4 py-2.5 text-sm outline-hidden transition"
                        />
                      </div>
                    </div>

                    {/* Password */}
                    <div className="space-y-1.5">
                      <label htmlFor="reg-pass" className="text-xs font-semibold text-neutral-600">{t.passwordLabel}</label>
                      <div className="relative flex items-center">
                        <Lock className="absolute left-3 w-4 h-4 text-neutral-300" />
                        <input
                          id="reg-pass"
                          type="password"
                          required
                          value={password}
                          onChange={(e) => setPassword(e.target.value)}
                          placeholder={t.passwordPlaceholder}
                          className="w-full bg-neutral-50 border border-neutral-200 focus:border-neutral-900 rounded-xl pl-9 pr-4 py-2.5 text-sm outline-hidden transition"
                        />
                      </div>
                    </div>

                    {/* CPR or CVR based on toggle */}
                    <div className="space-y-1.5 animate-fade-in">
                      <label htmlFor="reg-taxid" className="text-xs font-semibold text-neutral-600">
                        {accountType === 'private' ? t.cprLabel : t.cvrLabel}
                      </label>
                      <input
                        id="reg-taxid"
                        type="text"
                        required
                        value={taxId}
                        onChange={(e) => setTaxId(e.target.value)}
                        placeholder={accountType === 'private' ? t.cprPlaceholder : t.cvrPlaceholder}
                        className="w-full bg-neutral-50 border border-neutral-200 focus:border-neutral-900 rounded-xl px-4 py-2.5 text-sm outline-hidden transition"
                      />
                    </div>

                    {/* Mobile Phone */}
                    <div className="space-y-1.5">
                      <label htmlFor="reg-phone" className="text-xs font-semibold text-neutral-600">{t.phoneLabel}</label>
                      <div className="relative flex items-center">
                        <Phone className="absolute left-3 w-3.5 h-3.5 text-neutral-300" />
                        <input
                          id="reg-phone"
                          type="tel"
                          required
                          value={phone}
                          onChange={(e) => setPhone(e.target.value)}
                          placeholder="+45 0000 0000"
                          className="w-full bg-neutral-50 border border-neutral-200 focus:border-neutral-900 rounded-xl pl-9 pr-4 py-2.5 text-sm outline-hidden transition"
                        />
                      </div>
                    </div>

                    {/* License plate (auto link) */}
                    <div className="space-y-1.5 col-span-1 md:col-span-2">
                      <label htmlFor="reg-plate" className="text-xs font-semibold text-neutral-600">
                        {t.vehicleLabel}
                      </label>
                      <div className="relative flex items-center">
                        <CreditCard className="absolute left-3 w-4 h-4 text-neutral-300" />
                        <input
                          id="reg-plate"
                          type="text"
                          required
                          value={plate}
                          onChange={(e) => setPlate(e.target.value.toUpperCase())}
                          placeholder={t.vehiclePlaceholder}
                          className="w-full bg-neutral-50 border border-neutral-200 focus:border-neutral-900 rounded-xl pl-9 pr-4 py-2.5 text-sm outline-hidden transition uppercase font-mono tracking-wider"
                        />
                      </div>
                    </div>
                  </div>

                  {/* Buttons */}
                  <div className="flex gap-4 pt-4 border-t border-neutral-100">
                    <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"
                    >
                      {t.btnBack}
                    </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 shadow-md"
                    >
                      <span>{t.btnSubmit}</span>
                      <ChevronRight className="w-4 h-4" />
                    </button>
                  </div>
                </form>
              </motion.div>
            ) : (
              <motion.div
                key="success-step"
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                className="text-center space-y-6 py-6"
              >
                <div className="w-16 h-16 bg-emerald-50 rounded-full flex items-center justify-center mx-auto border border-emerald-100 animate-pulse">
                  <CheckCircle className="w-10 h-10 text-emerald-500" />
                </div>
                <div className="space-y-2">
                  <h3 className="text-2xl font-bold text-neutral-950 tracking-tight">{t.regSuccessTitle}</h3>
                  <p className="text-sm text-neutral-500 max-w-sm mx-auto leading-relaxed">
                    {t.regSuccessSub}
                  </p>
                </div>
                <div className="p-4 bg-neutral-50 rounded-2xl border border-neutral-150 inline-block font-mono text-left space-y-1 text-xs text-neutral-600">
                  <div><span className="text-neutral-400">BRUGERNAVN:</span> {email}</div>
                  <div><span className="text-neutral-400">NAVN:</span> {name}</div>
                  <div><span className="text-neutral-400">KØRETØJ:</span> {plate}</div>
                </div>
                <button
                  onClick={handleCloseSuccess}
                  className="w-full max-w-xs bg-neutral-900 hover:bg-neutral-800 text-white py-3 px-6 rounded-xl text-sm font-semibold transition mx-auto block shadow-md"
                >
                  {t.btnGoToLogin}
                </button>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </motion.div>
    </div>
  );
}