import { Popup } from 'react-map-gl/maplibre';
import type { Port } from '../../data/ports';

const COUNTRY_STYLE: Record<string, { color: string; flag: string; label: string }> = {
  KR: { color: '#3b82f6', flag: '🇰🇷', label: '한국' },
  CN: { color: '#ef4444', flag: '🇨🇳', label: '중국' },
  JP: { color: '#f472b6', flag: '🇯🇵', label: '일본' },
  KP: { color: '#f97316', flag: '🇰🇵', label: '북한' },
  TW: { color: '#10b981', flag: '🇹🇼', label: '대만' },
};

function getStyle(p: Port) {
  return COUNTRY_STYLE[p.country] || COUNTRY_STYLE.KR;
}

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

export function PortLayer({ selected, onClose }: Props) {
  if (!selected) return null;
  const s = getStyle(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: s.color, color: '#fff', gap: 6, padding: '6px 10px' }}>
          <span style={{ fontSize: 16 }}>{s.flag}</span>
          <strong style={{ fontSize: 13 }}>⚓ {selected.nameKo}</strong>
        </div>
        <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
          <span style={{
            background: s.color, color: '#fff',
            padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
          }}>
            {selected.type === 'major' ? '주요항만' : '항만'}
          </span>
          <span style={{
            background: '#333', color: '#ccc',
            padding: '2px 8px', borderRadius: 3, fontSize: 10,
          }}>
            {s.label}
          </span>
        </div>
        <div className="popup-grid" style={{ gap: '2px 12px' }}>
          <div><span className="popup-label">항구 : </span><strong>{selected.nameKo}</strong></div>
          <div><span className="popup-label">영문 : </span>{selected.name}</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.marinetraffic.com/en/ais/details/ports/${selected.id}`}
            target="_blank" rel="noopener noreferrer" style={{ color: '#60a5fa' }}>
            MarineTraffic &rarr;
          </a>
        </div>
      </div>
    </Popup>
  );
}