import { Popup } from 'react-map-gl/maplibre';
import { useTranslation } from 'react-i18next';
import type { KoreanAirport } from '../../services/airports';

const COUNTRY_COLOR: Record<string, { intl: string; domestic: string; flag: string; label: string }> = {
  KR: { intl: '#a78bfa', domestic: '#7c8aaa', flag: '🇰🇷', label: '한국' },
  CN: { intl: '#ef4444', domestic: '#b91c1c', flag: '🇨🇳', label: '중국' },
  JP: { intl: '#f472b6', domestic: '#9d174d', flag: '🇯🇵', label: '일본' },
  KP: { intl: '#f97316', domestic: '#c2410c', flag: '🇰🇵', label: '북한' },
  TW: { intl: '#10b981', domestic: '#059669', flag: '🇹🇼', label: '대만' },
};

function getColor(ap: KoreanAirport): string {
  const cc = COUNTRY_COLOR[ap.country ?? 'KR'] ?? COUNTRY_COLOR.KR;
  return ap.intl ? cc.intl : cc.domestic;
}

function getCountryInfo(ap: KoreanAirport) {
  return COUNTRY_COLOR[ap.country ?? 'KR'] ?? COUNTRY_COLOR.KR;
}

interface Props {
  selected: KoreanAirport | null;
  onClose: () => void;
}

export function KoreaAirportLayer({ selected, onClose }: Props) {
  const { t } = useTranslation();
  if (!selected) return null;
  const color = getColor(selected);
  const info = getCountryInfo(selected);
  return (
    <Popup longitude={selected.lng} latitude={selected.lat}
      onClose={onClose} closeOnClick={false}
      anchor="bottom" maxWidth="280px" className="gl-popup">
      <div className="popup-body-sm" style={{ minWidth: 200 }}>
        <div className="popup-header" style={{ background: color, color: '#000', gap: 6, padding: '6px 10px' }}>
          <span style={{ fontSize: 16 }}>{info.flag}</span>
          <strong style={{ fontSize: 13 }}>{selected.nameKo}</strong>
        </div>
        <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
          {selected.intl && (
            <span style={{
              background: color, color: '#000',
              padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
            }}>
              {t('airport.international')}
            </span>
          )}
          {selected.domestic && (
            <span style={{
              background: '#555', color: '#ccc',
              padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
            }}>
              {t('airport.domestic')}
            </span>
          )}
          <span style={{
            background: '#333', color: '#ccc',
            padding: '2px 8px', borderRadius: 3, fontSize: 10,
          }}>
            {info.label}
          </span>
        </div>
        <div className="popup-grid" style={{ gap: '2px 12px' }}>
          <div><span className="popup-label">IATA : </span><strong>{selected.id}</strong></div>
          <div><span className="popup-label">ICAO : </span><strong>{selected.icao}</strong></div>
        </div>
        <div style={{ marginTop: 6, fontSize: 10, color: '#999' }}>
          {selected.lat.toFixed(4)}°N, {selected.lng.toFixed(4)}°E
        </div>
        <div style={{ marginTop: 4, fontSize: 10, textAlign: 'right' }}>
          <a href={`https://www.flightradar24.com/airport/${selected.id.toLowerCase()}`}
            target="_blank" rel="noopener noreferrer" style={{ color: '#60a5fa' }}>
            Flightradar24 &rarr;
          </a>
        </div>
      </div>
    </Popup>
  );
}
