/* YeYe Expat Portal — PhoneInput with country picker */

const { useState: _pUseState, useEffect: _pUseEffect, useRef: _pUseRef } = React;

const YEYE_COUNTRIES = [
  { code: 'CZ', name: 'Czech Republic', dial: '420', flag: '🇨🇿' },
  { code: 'SK', name: 'Slovakia', dial: '421', flag: '🇸🇰' },
  { code: 'TR', name: 'Türkiye', dial: '90', flag: '🇹🇷' },
  { code: 'UA', name: 'Ukraine', dial: '380', flag: '🇺🇦' },
  { code: 'RU', name: 'Russia', dial: '7', flag: '🇷🇺' },
  { code: 'BY', name: 'Belarus', dial: '375', flag: '🇧🇾' },
  { code: 'KZ', name: 'Kazakhstan', dial: '7', flag: '🇰🇿' },
  { code: 'UZ', name: 'Uzbekistan', dial: '998', flag: '🇺🇿' },
  { code: 'GE', name: 'Georgia', dial: '995', flag: '🇬🇪' },
  { code: 'AZ', name: 'Azerbaijan', dial: '994', flag: '🇦🇿' },
  { code: 'AM', name: 'Armenia', dial: '374', flag: '🇦🇲' },
  { code: 'MD', name: 'Moldova', dial: '373', flag: '🇲🇩' },
  { code: 'PL', name: 'Poland', dial: '48', flag: '🇵🇱' },
  { code: 'DE', name: 'Germany', dial: '49', flag: '🇩🇪' },
  { code: 'AT', name: 'Austria', dial: '43', flag: '🇦🇹' },
  { code: 'HU', name: 'Hungary', dial: '36', flag: '🇭🇺' },
  { code: 'RO', name: 'Romania', dial: '40', flag: '🇷🇴' },
  { code: 'BG', name: 'Bulgaria', dial: '359', flag: '🇧🇬' },
  { code: 'GR', name: 'Greece', dial: '30', flag: '🇬🇷' },
  { code: 'HR', name: 'Croatia', dial: '385', flag: '🇭🇷' },
  { code: 'SI', name: 'Slovenia', dial: '386', flag: '🇸🇮' },
  { code: 'RS', name: 'Serbia', dial: '381', flag: '🇷🇸' },
  { code: 'IT', name: 'Italy', dial: '39', flag: '🇮🇹' },
  { code: 'ES', name: 'Spain', dial: '34', flag: '🇪🇸' },
  { code: 'PT', name: 'Portugal', dial: '351', flag: '🇵🇹' },
  { code: 'FR', name: 'France', dial: '33', flag: '🇫🇷' },
  { code: 'BE', name: 'Belgium', dial: '32', flag: '🇧🇪' },
  { code: 'NL', name: 'Netherlands', dial: '31', flag: '🇳🇱' },
  { code: 'GB', name: 'United Kingdom', dial: '44', flag: '🇬🇧' },
  { code: 'IE', name: 'Ireland', dial: '353', flag: '🇮🇪' },
  { code: 'DK', name: 'Denmark', dial: '45', flag: '🇩🇰' },
  { code: 'SE', name: 'Sweden', dial: '46', flag: '🇸🇪' },
  { code: 'NO', name: 'Norway', dial: '47', flag: '🇳🇴' },
  { code: 'FI', name: 'Finland', dial: '358', flag: '🇫🇮' },
  { code: 'EE', name: 'Estonia', dial: '372', flag: '🇪🇪' },
  { code: 'LV', name: 'Latvia', dial: '371', flag: '🇱🇻' },
  { code: 'LT', name: 'Lithuania', dial: '370', flag: '🇱🇹' },
  { code: 'CH', name: 'Switzerland', dial: '41', flag: '🇨🇭' },
  { code: 'US', name: 'United States', dial: '1', flag: '🇺🇸' },
  { code: 'CA', name: 'Canada', dial: '1', flag: '🇨🇦' },
  { code: 'MX', name: 'Mexico', dial: '52', flag: '🇲🇽' },
  { code: 'BR', name: 'Brazil', dial: '55', flag: '🇧🇷' },
  { code: 'AR', name: 'Argentina', dial: '54', flag: '🇦🇷' },
  { code: 'CN', name: 'China', dial: '86', flag: '🇨🇳' },
  { code: 'JP', name: 'Japan', dial: '81', flag: '🇯🇵' },
  { code: 'KR', name: 'South Korea', dial: '82', flag: '🇰🇷' },
  { code: 'VN', name: 'Vietnam', dial: '84', flag: '🇻🇳' },
  { code: 'TH', name: 'Thailand', dial: '66', flag: '🇹🇭' },
  { code: 'PH', name: 'Philippines', dial: '63', flag: '🇵🇭' },
  { code: 'ID', name: 'Indonesia', dial: '62', flag: '🇮🇩' },
  { code: 'MY', name: 'Malaysia', dial: '60', flag: '🇲🇾' },
  { code: 'SG', name: 'Singapore', dial: '65', flag: '🇸🇬' },
  { code: 'IN', name: 'India', dial: '91', flag: '🇮🇳' },
  { code: 'PK', name: 'Pakistan', dial: '92', flag: '🇵🇰' },
  { code: 'BD', name: 'Bangladesh', dial: '880', flag: '🇧🇩' },
  { code: 'LK', name: 'Sri Lanka', dial: '94', flag: '🇱🇰' },
  { code: 'IR', name: 'Iran', dial: '98', flag: '🇮🇷' },
  { code: 'IQ', name: 'Iraq', dial: '964', flag: '🇮🇶' },
  { code: 'SA', name: 'Saudi Arabia', dial: '966', flag: '🇸🇦' },
  { code: 'AE', name: 'United Arab Emirates', dial: '971', flag: '🇦🇪' },
  { code: 'IL', name: 'Israel', dial: '972', flag: '🇮🇱' },
  { code: 'EG', name: 'Egypt', dial: '20', flag: '🇪🇬' },
  { code: 'MA', name: 'Morocco', dial: '212', flag: '🇲🇦' },
  { code: 'DZ', name: 'Algeria', dial: '213', flag: '🇩🇿' },
  { code: 'TN', name: 'Tunisia', dial: '216', flag: '🇹🇳' },
  { code: 'NG', name: 'Nigeria', dial: '234', flag: '🇳🇬' },
  { code: 'KE', name: 'Kenya', dial: '254', flag: '🇰🇪' },
  { code: 'ZA', name: 'South Africa', dial: '27', flag: '🇿🇦' },
  { code: 'AU', name: 'Australia', dial: '61', flag: '🇦🇺' },
  { code: 'NZ', name: 'New Zealand', dial: '64', flag: '🇳🇿' },
];

window.YEYE_COUNTRIES = YEYE_COUNTRIES;

function normalizePhoneLocal(raw) {
  return String(raw || '').replace(/[^\d]/g, '');
}

window.YEYE_PHONE = {
  countries: YEYE_COUNTRIES,
  findByCode(code) {
    return YEYE_COUNTRIES.find((c) => c.code === code) || YEYE_COUNTRIES[0];
  },
  toE164(countryCode, local) {
    const country = this.findByCode(countryCode);
    const digits = normalizePhoneLocal(local);
    if (!digits) return '';
    return `+${country.dial}${digits}`;
  },
  splitE164(value) {
    const raw = String(value || '').trim();
    if (!raw) return { country: 'CZ', local: '' };
    const digits = raw.replace(/[^\d+]/g, '');
    if (!digits.startsWith('+')) return { country: 'CZ', local: normalizePhoneLocal(digits) };
    const rest = digits.slice(1);
    const sorted = [...YEYE_COUNTRIES].sort((a, b) => b.dial.length - a.dial.length);
    for (const country of sorted) {
      if (rest.startsWith(country.dial)) {
        return { country: country.code, local: rest.slice(country.dial.length) };
      }
    }
    return { country: 'CZ', local: rest };
  },
};

function PhoneInput({ countryCode, localNumber, onCountryChange, onLocalChange, required, autoComplete, placeholder }) {
  const [open, setOpen] = _pUseState(false);
  const [search, setSearch] = _pUseState('');
  const ref = _pUseRef(null);
  const country = YEYE_PHONE.findByCode(countryCode);

  _pUseEffect(() => {
    function onDocClick(e) {
      if (!ref.current) return;
      if (!ref.current.contains(e.target)) {
        setOpen(false);
        setSearch('');
      }
    }
    if (open) document.addEventListener('mousedown', onDocClick);
    return () => document.removeEventListener('mousedown', onDocClick);
  }, [open]);

  const filtered = search.trim()
    ? YEYE_COUNTRIES.filter((c) => {
        const q = search.trim().toLowerCase();
        return c.name.toLowerCase().includes(q) || c.dial.includes(q.replace(/^\+/, '')) || c.code.toLowerCase().includes(q);
      })
    : YEYE_COUNTRIES;

  return (
    <div ref={ref} style={{ position: 'relative', display: 'flex', gap: 8, alignItems: 'stretch' }}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        style={{
          display: 'inline-flex', alignItems: 'center', gap: 6, height: 46,
          borderRadius: 12, border: '1px solid var(--line, #e5e3da)',
          padding: '0 12px', background: 'var(--surface, #f7f6f1)',
          fontSize: 14, color: 'var(--ink, #111827)', cursor: 'pointer',
          minWidth: 108, whiteSpace: 'nowrap',
        }}
        aria-label="Country code"
      >
        <span style={{ fontSize: 18, lineHeight: 1 }}>{country.flag}</span>
        <span style={{ fontWeight: 600 }}>+{country.dial}</span>
        <span style={{ marginLeft: 'auto', color: 'var(--muted, #6b7280)', fontSize: 12 }}>▾</span>
      </button>
      <input
        type="tel"
        value={localNumber}
        onChange={(e) => onLocalChange(normalizePhoneLocal(e.target.value))}
        required={required}
        autoComplete={autoComplete || 'tel-national'}
        placeholder={placeholder || ''}
        inputMode="numeric"
        style={{
          flex: 1, height: 46, borderRadius: 12,
          border: '1px solid var(--line, #e5e3da)', padding: '0 13px',
          fontSize: 14, background: 'var(--surface, #f7f6f1)',
          color: 'var(--ink, #111827)', outline: 'none', minWidth: 0,
        }}
      />
      {open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, marginTop: 6,
          background: '#fff', border: '1px solid var(--line, #e5e3da)',
          borderRadius: 12, boxShadow: '0 12px 32px rgba(0,0,0,.08)',
          zIndex: 60, width: 320, maxWidth: 'calc(100vw - 40px)',
          overflow: 'hidden', display: 'flex', flexDirection: 'column',
        }}>
          <input
            autoFocus
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search country or code"
            style={{
              height: 42, border: 'none', borderBottom: '1px solid var(--line, #e5e3da)',
              padding: '0 14px', fontSize: 14, outline: 'none', background: '#fff',
            }}
          />
          <div style={{ maxHeight: 260, overflowY: 'auto' }}>
            {filtered.length === 0 && (
              <div style={{ padding: '14px 16px', fontSize: 13, color: 'var(--muted, #6b7280)' }}>No match</div>
            )}
            {filtered.map((c) => (
              <button
                key={c.code}
                type="button"
                onClick={() => { onCountryChange(c.code); setOpen(false); setSearch(''); }}
                style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 10,
                  padding: '10px 14px', border: 'none', background: c.code === countryCode ? 'var(--surface, #f7f6f1)' : '#fff',
                  fontSize: 14, color: 'var(--ink, #111827)', cursor: 'pointer', textAlign: 'left',
                }}
              >
                <span style={{ fontSize: 18, lineHeight: 1 }}>{c.flag}</span>
                <span style={{ flex: 1 }}>{c.name}</span>
                <span style={{ color: 'var(--muted, #6b7280)', fontSize: 13 }}>+{c.dial}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.YEYE_PhoneInput = PhoneInput;