/* global React */
const { useState, useMemo } = React;

// Curated country list. Voltages are nominal residential AC.
// voltage   = single-phase (phase-to-neutral)  — normal wall outlets
// voltage3p = three-phase (line-to-line)       — big EV chargers, industrial
// Rates are approximate residential averages — easy for users to edit.
const COUNTRIES = [
  { code: 'TH', name: 'Thailand',      flag: '🇹🇭', voltage: 220, voltage3p: 380, currency: 'THB', symbol: '฿',   rate: 4.5, lat: 13.7563, lng: 100.5018 },
  { code: 'JP', name: 'Japan',         flag: '🇯🇵', voltage: 100, voltage3p: 200, currency: 'JPY', symbol: '¥',   rate: 30, lat: 35.6762, lng: 139.6503 },
  { code: 'US', name: 'United States', flag: '🇺🇸', voltage: 120, voltage3p: 208, currency: 'USD', symbol: '$',   rate: 0.16, lat: 37.0902, lng: -95.7129 },
  { code: 'GB', name: 'United Kingdom',flag: '🇬🇧', voltage: 230, voltage3p: 400, currency: 'GBP', symbol: '£',   rate: 0.27, lat: 55.3781, lng: -3.436 },
  { code: 'DE', name: 'Germany',       flag: '🇩🇪', voltage: 230, voltage3p: 400, currency: 'EUR', symbol: '€',   rate: 0.34, lat: 51.1657, lng: 10.4515 },
  { code: 'FR', name: 'France',        flag: '🇫🇷', voltage: 230, voltage3p: 400, currency: 'EUR', symbol: '€',   rate: 0.25, lat: 46.2276, lng: 2.2137 },
  { code: 'IT', name: 'Italy',         flag: '🇮🇹', voltage: 230, voltage3p: 400, currency: 'EUR', symbol: '€',   rate: 0.31, lat: 41.8719, lng: 12.5674 },
  { code: 'ES', name: 'Spain',         flag: '🇪🇸', voltage: 230, voltage3p: 400, currency: 'EUR', symbol: '€',   rate: 0.20, lat: 40.4637, lng: -3.7492 },
  { code: 'NL', name: 'Netherlands',   flag: '🇳🇱', voltage: 230, voltage3p: 400, currency: 'EUR', symbol: '€',   rate: 0.30, lat: 52.1326, lng: 5.2913 },
  { code: 'AU', name: 'Australia',     flag: '🇦🇺', voltage: 230, voltage3p: 400, currency: 'AUD', symbol: 'A$',  rate: 0.33, lat: -25.2744, lng: 133.7751 },
  { code: 'NZ', name: 'New Zealand',   flag: '🇳🇿', voltage: 230, voltage3p: 400, currency: 'NZD', symbol: 'NZ$', rate: 0.28, lat: -40.9006, lng: 174.886 },
  { code: 'CA', name: 'Canada',        flag: '🇨🇦', voltage: 120, voltage3p: 208, currency: 'CAD', symbol: 'C$',  rate: 0.13, lat: 56.1304, lng: -106.3468 },
  { code: 'MX', name: 'Mexico',        flag: '🇲🇽', voltage: 127, voltage3p: 220, currency: 'MXN', symbol: 'MX$', rate: 1.5, lat: 23.6345, lng: -102.5528 },
  { code: 'BR', name: 'Brazil',        flag: '🇧🇷', voltage: 127, voltage3p: 220, currency: 'BRL', symbol: 'R$',  rate: 0.75, lat: -14.235, lng: -51.9253 },
  { code: 'AR', name: 'Argentina',     flag: '🇦🇷', voltage: 220, voltage3p: 380, currency: 'ARS', symbol: '$',   rate: 30, lat: -38.4161, lng: -63.6167 },
  { code: 'CN', name: 'China',         flag: '🇨🇳', voltage: 220, voltage3p: 380, currency: 'CNY', symbol: '¥',   rate: 0.6, lat: 35.8617, lng: 104.1954 },
  { code: 'KR', name: 'South Korea',   flag: '🇰🇷', voltage: 220, voltage3p: 380, currency: 'KRW', symbol: '₩',   rate: 150, lat: 35.9078, lng: 127.7669 },
  { code: 'IN', name: 'India',         flag: '🇮🇳', voltage: 230, voltage3p: 415, currency: 'INR', symbol: '₹',   rate: 8, lat: 20.5937, lng: 78.9629 },
  { code: 'ID', name: 'Indonesia',     flag: '🇮🇩', voltage: 230, voltage3p: 400, currency: 'IDR', symbol: 'Rp',  rate: 1500, lat: -0.7893, lng: 113.9213 },
  { code: 'MY', name: 'Malaysia',      flag: '🇲🇾', voltage: 240, voltage3p: 415, currency: 'MYR', symbol: 'RM',  rate: 0.4, lat: 4.2105, lng: 101.9758 },
  { code: 'SG', name: 'Singapore',     flag: '🇸🇬', voltage: 230, voltage3p: 400, currency: 'SGD', symbol: 'S$',  rate: 0.32, lat: 1.3521, lng: 103.8198 },
  { code: 'PH', name: 'Philippines',   flag: '🇵🇭', voltage: 220, voltage3p: 380, currency: 'PHP', symbol: '₱',   rate: 11, lat: 12.8797, lng: 121.774 },
  { code: 'VN', name: 'Vietnam',       flag: '🇻🇳', voltage: 220, voltage3p: 380, currency: 'VND', symbol: '₫',   rate: 2500, lat: 14.0583, lng: 108.2772 },
  { code: 'TW', name: 'Taiwan',        flag: '🇹🇼', voltage: 110, voltage3p: 220, currency: 'TWD', symbol: 'NT$', rate: 3.5, lat: 23.6978, lng: 120.9605 },
  { code: 'HK', name: 'Hong Kong',     flag: '🇭🇰', voltage: 220, voltage3p: 380, currency: 'HKD', symbol: 'HK$', rate: 1.5, lat: 22.3193, lng: 114.1694 },
  { code: 'AE', name: 'UAE',           flag: '🇦🇪', voltage: 230, voltage3p: 400, currency: 'AED', symbol: 'AED', rate: 0.4, lat: 23.4241, lng: 53.8478 },
  { code: 'SA', name: 'Saudi Arabia',  flag: '🇸🇦', voltage: 230, voltage3p: 400, currency: 'SAR', symbol: 'SR',  rate: 0.2, lat: 23.8859, lng: 45.0792 },
  { code: 'ZA', name: 'South Africa',  flag: '🇿🇦', voltage: 230, voltage3p: 400, currency: 'ZAR', symbol: 'R',   rate: 3, lat: -30.5595, lng: 22.9375 },
  { code: 'EG', name: 'Egypt',         flag: '🇪🇬', voltage: 220, voltage3p: 380, currency: 'EGP', symbol: 'E£',  rate: 1.5, lat: 26.8206, lng: 30.8025 },
  { code: 'NG', name: 'Nigeria',       flag: '🇳🇬', voltage: 230, voltage3p: 400, currency: 'NGN', symbol: '₦',   rate: 70, lat: 9.082, lng: 8.6753 },
  { code: 'TR', name: 'Turkey',        flag: '🇹🇷', voltage: 230, voltage3p: 400, currency: 'TRY', symbol: '₺',   rate: 3, lat: 38.9637, lng: 35.2433 },
  { code: 'RU', name: 'Russia',        flag: '🇷🇺', voltage: 220, voltage3p: 380, currency: 'RUB', symbol: '₽',   rate: 5, lat: 61.524, lng: 105.3188 },
  { code: 'PL', name: 'Poland',        flag: '🇵🇱', voltage: 230, voltage3p: 400, currency: 'PLN', symbol: 'zł',  rate: 1.1, lat: 51.9194, lng: 19.1451 },
  { code: 'SE', name: 'Sweden',        flag: '🇸🇪', voltage: 230, voltage3p: 400, currency: 'SEK', symbol: 'kr',  rate: 1.5, lat: 60.1282, lng: 18.6435 },
  { code: 'NO', name: 'Norway',        flag: '🇳🇴', voltage: 230, voltage3p: 400, currency: 'NOK', symbol: 'kr',  rate: 1.2, lat: 60.472, lng: 8.4689 },
  { code: 'CH', name: 'Switzerland',   flag: '🇨🇭', voltage: 230, voltage3p: 400, currency: 'CHF', symbol: 'CHF', rate: 0.27, lat: 46.8182, lng: 8.2275 },
];

function findCountry(code) {
  return COUNTRIES.find((c) => c.code === code) || COUNTRIES[0];
}

// Format a money amount using the country's currency.
function formatMoney(amount, country) {
  if (amount == null || !Number.isFinite(amount)) return '—';
  // For currencies where decimals don't make sense at small magnitudes (JPY, KRW, VND, IDR), drop them.
  const noDecimal = ['JPY', 'KRW', 'VND', 'IDR', 'NGN', 'CLP', 'HUF'].includes(country.currency);
  const digits = noDecimal ? 0 : (amount >= 100 ? 0 : 2);
  const num = amount.toLocaleString(undefined, {
    minimumFractionDigits: digits,
    maximumFractionDigits: digits,
  });
  return country.symbol + num;
}

// Country picker — modal sheet
function CountryPicker({ open, onSelect, onClose, currentCode, firstRun, lang, languageOverride, onLanguageChange, autoLangFor }) {
  const [q, setQ] = useState('');
  const t = (key, ...args) => window.translate(lang || 'en', key, ...args);
  const filtered = useMemo(() => {
    const s = q.trim().toLowerCase();
    if (!s) return COUNTRIES;
    return COUNTRIES.filter(
      (c) => c.name.toLowerCase().includes(s) || c.code.toLowerCase().includes(s)
    );
  }, [q]);

  if (!open) return null;

  const langs = window.SUPPORTED_LANGS || [];
  const autoCode = autoLangFor ? autoLangFor(currentCode) : 'en';
  const autoLabel = (langs.find((l) => l.code === autoCode) || {}).native || autoCode.toUpperCase();

  return (
    <div className="cp-overlay" onClick={firstRun ? undefined : onClose}>
      <div className="cp-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="cp-head">
          <div>
            <div className="cp-title">
              {firstRun ? t('picker.welcome') : t('picker.change')}
            </div>
            <div className="cp-sub">
              {firstRun ? t('picker.welcome.sub') : t('picker.change.sub')}
            </div>
          </div>
          {!firstRun && (
            <button className="cp-close" onClick={onClose} aria-label="Close">×</button>
          )}
        </div>

        {/* Language selector */}
        {onLanguageChange && (
          <div className="cp-lang">
            <span className="cp-lang-label">{t('picker.language')}</span>
            <div className="cp-lang-row">
              <button
                className={"cp-lang-chip" + (!languageOverride ? " cp-lang-chip--active" : "")}
                onClick={() => onLanguageChange(null)}
              >
                <span className="cp-lang-auto">auto</span>
                <span className="cp-lang-native">{autoLabel}</span>
              </button>
              {langs.map((l) => (
                <button
                  key={l.code}
                  className={"cp-lang-chip" + (languageOverride === l.code ? " cp-lang-chip--active" : "")}
                  onClick={() => onLanguageChange(l.code)}
                >
                  <span className="cp-lang-native">{l.native}</span>
                </button>
              ))}
            </div>
          </div>
        )}

        <div className="cp-search">
          <input
            type="text"
            placeholder={t('picker.search')}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            autoFocus
          />
        </div>
        <div className="cp-list">
          {filtered.map((c) => (
            <button
              key={c.code}
              className={"cp-row" + (c.code === currentCode ? " cp-row--active" : "")}
              onClick={() => onSelect(c)}
            >
              <span className="cp-flag">{c.flag}</span>
              <span className="cp-name">{c.name}</span>
              <span className="cp-specs">
                <span className="cp-volt">{c.voltage}V</span>
                <span className="cp-curr">{c.currency}</span>
              </span>
            </button>
          ))}
          {filtered.length === 0 && (
            <div className="cp-empty">{t('picker.empty')}</div>
          )}
        </div>
      </div>
    </div>
  );
}

// Country chip in header
function CountryChip({ country, onClick, lang }) {
  const t = (key, ...args) => window.translate(lang || 'en', key, ...args);
  return (
    <button className="country-chip" onClick={onClick}>
      <span className="country-chip-flag">{country.flag}</span>
      <span className="country-chip-name">{country.name}</span>
      <span className="country-chip-specs">
        <span>{country.voltage}V</span>
        <span className="dot" />
        <span>{country.currency}</span>
      </span>
      <span className="country-chip-edit">{t('chip.change')}</span>
    </button>
  );
}

window.COUNTRIES = COUNTRIES;
window.findCountry = findCountry;
window.formatMoney = formatMoney;
window.CountryPicker = CountryPicker;
window.CountryChip = CountryChip;