import { Popup } from 'react-map-gl/maplibre';
import { NK_LAUNCH_TYPE_META } from '../../data/nkLaunchSites';
import type { NKLaunchSite } from '../../data/nkLaunchSites';

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

export function NKLaunchLayer({ selected, onClose }: Props) {
  if (!selected) return null;
  const meta = NK_LAUNCH_TYPE_META[selected.type];
  return (
    <Popup longitude={selected.lng} latitude={selected.lat}
      onClose={onClose} closeOnClick={false}
      anchor="bottom" maxWidth="320px" className="gl-popup">
      <div className="popup-body-sm" style={{ minWidth: 240 }}>
        <div className="popup-header" style={{ background: meta.color, color: '#fff', gap: 6, padding: '6px 10px' }}>
          <span style={{ fontSize: 16 }}>🇰🇵</span>
          <strong style={{ fontSize: 13 }}>{meta.icon} {selected.nameKo}</strong>
        </div>
        <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
          <span style={{
            background: meta.color, color: '#fff',
            padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
          }}>
            {meta.label}
          </span>
          <span style={{
            background: '#f97316', color: '#fff',
            padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
          }}>
            북한
          </span>
        </div>
        <div style={{ fontSize: 11, color: '#ccc', lineHeight: 1.4, marginBottom: 6 }}>
          {selected.description}
        </div>
        {selected.recentUse && (
          <div style={{ fontSize: 10, color: '#f87171', marginBottom: 4 }}>
            최근: {selected.recentUse}
          </div>
        )}
        <div style={{ fontSize: 11, color: 'var(--kcg-muted)', marginBottom: 4 }}>
          {selected.name}
        </div>
        <div style={{ fontSize: 10, color: '#999' }}>
          {selected.lat.toFixed(4)}°N, {selected.lng.toFixed(4)}°E
        </div>
      </div>
    </Popup>
  );
}
