import { useState, useRef, useEffect } from 'react';
import { ChevronDown } from 'lucide-react';
import { useT } from '@/lib/i18n';

const PHONE_COUNTRIES = [
  { code: 'NL', dialCode: '+31', flag: '🇳🇱', name: { nl: 'Nederland', en: 'Netherlands' }, pattern: /^[1-9]\d{8}$/ },
  { code: 'BE', dialCode: '+32', flag: '🇧🇪', name: { nl: 'België', en: 'Belgium' }, pattern: /^[1-9]\d{7,8}$/ },
  { code: 'DE', dialCode: '+49', flag: '🇩🇪', name: { nl: 'Duitsland', en: 'Germany' }, pattern: /^[1-9]\d{6,13}$/ },
  { code: 'FR', dialCode: '+33', flag: '🇫🇷', name: { nl: 'Frankrijk', en: 'France' }, pattern: /^[1-9]\d{8}$/ },
  { code: 'LU', dialCode: '+352', flag: '🇱🇺', name: { nl: 'Luxemburg', en: 'Luxembourg' }, pattern: /^[1-9]\d{5,10}$/ },
  { code: 'AT', dialCode: '+43', flag: '🇦🇹', name: { nl: 'Oostenrijk', en: 'Austria' }, pattern: /^[1-9]\d{5,12}$/ },
  { code: 'ES', dialCode: '+34', flag: '🇪🇸', name: { nl: 'Spanje', en: 'Spain' }, pattern: /^[6-9]\d{8}$/ },
  { code: 'IT', dialCode: '+39', flag: '🇮🇹', name: { nl: 'Italië', en: 'Italy' }, pattern: /^[0-9]\d{5,11}$/ },
  { code: 'PT', dialCode: '+351', flag: '🇵🇹', name: { nl: 'Portugal', en: 'Portugal' }, pattern: /^[1-9]\d{8}$/ },
  { code: 'GB', dialCode: '+44', flag: '🇬🇧', name: { nl: 'Verenigd Koninkrijk', en: 'United Kingdom' }, pattern: /^[1-9]\d{9}$/ },
  { code: 'IE', dialCode: '+353', flag: '🇮🇪', name: { nl: 'Ierland', en: 'Ireland' }, pattern: /^[1-9]\d{6,9}$/ },
  { code: 'DK', dialCode: '+45', flag: '🇩🇰', name: { nl: 'Denemarken', en: 'Denmark' }, pattern: /^[1-9]\d{7}$/ },
  { code: 'SE', dialCode: '+46', flag: '🇸🇪', name: { nl: 'Zweden', en: 'Sweden' }, pattern: /^[1-9]\d{6,12}$/ },
  { code: 'NO', dialCode: '+47', flag: '🇳🇴', name: { nl: 'Noorwegen', en: 'Norway' }, pattern: /^[2-9]\d{7}$/ },
  { code: 'FI', dialCode: '+358', flag: '🇫🇮', name: { nl: 'Finland', en: 'Finland' }, pattern: /^[1-9]\d{5,11}$/ },
  { code: 'PL', dialCode: '+48', flag: '🇵🇱', name: { nl: 'Polen', en: 'Poland' }, pattern: /^[1-9]\d{8}$/ },
  { code: 'CZ', dialCode: '+420', flag: '🇨🇿', name: { nl: 'Tsjechië', en: 'Czechia' }, pattern: /^[1-9]\d{8}$/ },
  { code: 'CH', dialCode: '+41', flag: '🇨🇭', name: { nl: 'Zwitserland', en: 'Switzerland' }, pattern: /^[1-9]\d{8}$/ },
  { code: 'US', dialCode: '+1', flag: '🇺🇸', name: { nl: 'Verenigde Staten', en: 'United States' }, pattern: /^[2-9]\d{9}$/ },
];

interface PhoneInputProps {
  value: string;
  onChange: (fullNumber: string) => void;
  defaultCountry?: string;
  className?: string;
  error?: string | null;
}

export function PhoneInput({ value, onChange, defaultCountry = 'NL', className, error }: PhoneInputProps) {
  const t = useT();
  const initialCountry = PHONE_COUNTRIES.find((c) => c.code === defaultCountry) || PHONE_COUNTRIES[0];
  const [selectedCountry, setSelectedCountry] = useState(() => {
    if (value) {
      const match = PHONE_COUNTRIES.find((c) => value.startsWith(c.dialCode));
      if (match) return match;
    }
    return initialCountry;
  });
  const [localNumber, setLocalNumber] = useState(() => {
    if (value && value.startsWith(selectedCountry.dialCode)) {
      return value.slice(selectedCountry.dialCode.length).trim();
    }
    return value.replace(/^\+\d+\s*/, '');
  });
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const handleNumberChange = (num: string) => {
    const cleaned = num.replace(/[^\d\s]/g, '');
    setLocalNumber(cleaned);
    onChange(`${selectedCountry.dialCode}${cleaned.replace(/\s/g, '')}`);
  };

  const handleCountrySelect = (country: typeof PHONE_COUNTRIES[0]) => {
    setSelectedCountry(country);
    setOpen(false);
    onChange(`${country.dialCode}${localNumber.replace(/\s/g, '')}`);
  };

  return (
    <div className={className}>
      <div className="flex">
        <div className="relative" ref={dropdownRef}>
          <button
            type="button"
            onClick={() => setOpen(!open)}
            className={`flex items-center gap-1 px-3 py-2.5 border border-r-0 rounded-l-md bg-muted/50 text-sm hover:bg-muted transition-colors ${
              error ? 'border-destructive' : 'border-border'
            }`}
          >
            <span className="text-base leading-none">{selectedCountry.flag}</span>
            <span className="text-xs text-muted-foreground">{selectedCountry.dialCode}</span>
            <ChevronDown className="w-3 h-3 text-muted-foreground" />
          </button>
          {open && (
            <div className="absolute z-50 top-full left-0 mt-1 w-64 max-h-60 overflow-y-auto bg-popover border border-border rounded-md shadow-lg">
              {PHONE_COUNTRIES.map((c) => (
                <button
                  key={c.code}
                  type="button"
                  onClick={() => handleCountrySelect(c)}
                  className={`w-full flex items-center gap-3 px-3 py-2 text-sm hover:bg-accent transition-colors text-left ${
                    c.code === selectedCountry.code ? 'bg-accent/50' : ''
                  }`}
                >
                  <span className="text-base leading-none">{c.flag}</span>
                  <span className="flex-1 truncate">{t(c.name.nl, c.name.en)}</span>
                  <span className="text-xs text-muted-foreground">{c.dialCode}</span>
                </button>
              ))}
            </div>
          )}
        </div>
        <input
          type="tel"
          value={localNumber}
          onChange={(e) => handleNumberChange(e.target.value)}
          placeholder="612345678"
          className={`flex-1 px-3 py-2.5 border rounded-r-md bg-background text-sm focus:ring-2 focus:ring-ring outline-none ${
            error ? 'border-destructive' : 'border-border'
          }`}
        />
      </div>
      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
    </div>
  );
}

export function validatePhone(fullNumber: string, lang: 'nl' | 'en' = 'nl'): string | null {
  if (!fullNumber || fullNumber.length <= 3) return null;
  const country = PHONE_COUNTRIES.find((c) => fullNumber.startsWith(c.dialCode));
  if (!country) return lang === 'en' ? 'Invalid country code' : 'Ongeldig landnummer';
  const local = fullNumber.slice(country.dialCode.length);
  if (!local) return null;
  if (!country.pattern.test(local)) return lang === 'en' ? 'Invalid phone number' : 'Ongeldig telefoonnummer';
  return null;
}