// country-cascade.jsx — Componentă reutilizabilă pentru câmpurile Țară / Județ / Oraș.
// Toate cele 3 dropdown-uri folosesc același <CustomDropdown> intern → comportament 100% identic.
// Expune window.CountryCascade.

const { useState: useStateCC, useEffect: useEffectCC, useMemo: useMemoCC, useRef: useRefCC } = React;

function _ccNormalize(s) {
  return (s || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');
}

// ─── CustomDropdown — dropdown identic peste tot ─────────────────
function CustomDropdown({ value, onChange, options, placeholder, searchable = false, disabled = false }) {
  const [open, setOpen] = useStateCC(false);
  const [query, setQuery] = useStateCC(value || '');
  const wrapRef = useRefCC(null);

  // Sincronizează query cu value extern
  useEffectCC(() => { setQuery(value || ''); }, [value]);

  // Click în afara → închide și restabilește query
  useEffectCC(() => {
    const handler = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) {
        setOpen(false);
        if (searchable) setQuery(value || '');
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [value, searchable]);

  const filtered = useMemoCC(() => {
    if (!searchable) return options;
    const q = _ccNormalize(query);
    if (!q) return options;
    return options.filter(o => _ccNormalize(o).includes(q));
  }, [options, query, searchable]);

  const handleSelect = (opt) => {
    onChange(opt);
    setOpen(false);
    setQuery(opt);
  };

  const chevronStyle = {
    position: 'absolute', right: 14, top: 0, bottom: 0,
    display: 'flex', alignItems: 'center',
    pointerEvents: 'none',
    color: 'var(--txt-2)', fontSize: 10,
  };

  const triggerDivStyle = {
    width: '100%', paddingRight: 36,
    display: 'flex', alignItems: 'center',
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.5 : 1,
  };

  const listStyle = {
    position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 4,
    background: '#0a0a0a', border: '.5px solid var(--line)', borderRadius: 8,
    maxHeight: 220, overflowY: 'auto', overscrollBehavior: 'contain',
    zIndex: 50, boxShadow: '0 8px 24px rgba(0,0,0,.5)',
  };

  return (
    <div ref={wrapRef} style={{ position: 'relative' }}>
      {searchable && !disabled ? (
        <input
          className="input"
          value={query}
          onChange={e => { setQuery(e.target.value); setOpen(true); }}
          onClick={() => { if (!open) { setQuery(''); setOpen(true); } }}
          onFocus={() => { if (!open) { setQuery(''); setOpen(true); } }}
          placeholder={placeholder}
          autoComplete="off"
          style={{ width: '100%', paddingRight: 36, cursor: open ? 'text' : 'pointer' }}
        />
      ) : (
        <div
          onClick={() => !disabled && setOpen(o => !o)}
          className="input"
          style={triggerDivStyle}
        >
          <span style={{ flex: 1, color: value ? 'var(--txt-0)' : 'var(--txt-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {value || placeholder}
          </span>
        </div>
      )}
      <span style={chevronStyle}>▼</span>

      {open && !disabled && (
        <div style={listStyle}>
          {filtered.length === 0 ? (
            <div style={{ padding: '10px 16px', fontSize: 13, color: 'var(--txt-3)' }}>Niciun rezultat</div>
          ) : filtered.map(opt => {
            const isSel = opt === value;
            return (
              <div
                key={opt}
                onClick={() => handleSelect(opt)}
                style={{
                  padding: '10px 16px', cursor: 'pointer', fontSize: 14,
                  color: isSel ? 'var(--accent-1)' : 'var(--txt-1)',
                  background: isSel ? 'rgba(82,242,15,.08)' : 'transparent',
                  fontWeight: isSel ? 500 : 400,
                }}
                onMouseEnter={e => { if (!isSel) e.currentTarget.style.background = 'rgba(255,255,255,.05)'; }}
                onMouseLeave={e => { if (!isSel) e.currentTarget.style.background = 'transparent'; }}
              >
                {opt}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ─── CountryCascade ──────────────────────────────────────────────
function CountryCascade({
  country, county, city,
  setCountry, setCounty, setCity,
  required = true,
  showLabels = true,
}) {
  const [cityOther, setCityOther] = useStateCC(false);

  const isRO = country === 'România';
  const roCityList = (isRO && county) ? (window.GEO_DATA.ro_cities_by_county[county] || []) : [];
  const hasRoCities = roCityList.length > 0;

  // La schimbare județ/țară: detectează automat dacă orașul existent e în afara listei
  useEffectCC(() => {
    if (hasRoCities) {
      if (city && !roCityList.includes(city)) setCityOther(true);
      else setCityOther(false);
    } else {
      setCityOther(false);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [county, isRO]);

  const handleCountryChange = (val) => {
    if (val !== country) {
      setCounty('');
      setCity('');
      setCityOther(false);
    }
    setCountry(val);
  };

  const handleCountyChange = (val) => {
    setCounty(val);
    setCity('');
    setCityOther(false);
  };

  const handleCityChange = (val) => {
    if (val === 'Altul...') {
      setCityOther(true);
      setCity('');
    } else {
      setCityOther(false);
      setCity(val);
    }
  };

  const star = required ? ' *' : '';
  const labelStyle = { fontSize: 12, color: 'var(--txt-2)', fontWeight: 500, marginBottom: 6, display: 'block' };

  const countryOptions = useMemoCC(() => window.GEO_DATA.countries.map(c => c.name), []);
  const cityOptions = hasRoCities ? [...roCityList, 'Altul...'] : [];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }} className="cc-grid">
      {/* TARA */}
      <div>
        {showLabels && <label style={labelStyle}>{'Țară' + star}</label>}
        <CustomDropdown
          value={country}
          onChange={handleCountryChange}
          options={countryOptions}
          placeholder="Selectează țara"
          searchable={true}
        />
      </div>

      {/* JUDET */}
      <div>
        {showLabels && <label style={labelStyle}>{isRO ? 'Județ' + star : 'Județ / Stat / Regiune'}</label>}
        {isRO ? (
          <CustomDropdown
            value={county}
            onChange={handleCountyChange}
            options={window.GEO_DATA.ro_counties}
            placeholder="Selectează județul"
            searchable={false}
          />
        ) : (
          <input
            className="input"
            value={county || ''}
            onChange={e => setCounty(e.target.value)}
            placeholder="ex: California, Bayern"
            autoComplete="off"
            style={{ width: '100%' }}
          />
        )}
      </div>

      {/* ORAS */}
      <div>
        {showLabels && <label style={labelStyle}>{isRO ? 'Oraș' + star : 'Oraș'}</label>}
        {hasRoCities ? (
          <>
            <CustomDropdown
              value={cityOther ? 'Altul...' : city}
              onChange={handleCityChange}
              options={cityOptions}
              placeholder="Selectează orașul"
              searchable={false}
            />
            {cityOther && (
              <input
                className="input"
                value={city || ''}
                onChange={e => setCity(e.target.value)}
                placeholder="Scrie numele orașului tău..."
                autoComplete="off"
                style={{ width: '100%', marginTop: 8 }}
              />
            )}
          </>
        ) : (
          <input
            className="input"
            value={city || ''}
            onChange={e => setCity(e.target.value)}
            placeholder={isRO ? 'Numele orașului' : 'Oraș'}
            autoComplete="off"
            style={{ width: '100%' }}
          />
        )}
      </div>

      <style>{`@media (max-width: 600px) { .cc-grid { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

window.CustomDropdown = CustomDropdown;
window.CountryCascade = CountryCascade;