import { Popup } from 'react-map-gl/maplibre';
import { useTranslation } from 'react-i18next';
import { CG_TYPE_LABEL } from '../../services/coastGuard';
import type { CoastGuardFacility, CoastGuardType } from '../../services/coastGuard';

const TYPE_COLOR: Record<CoastGuardType, string> = {
  hq: '#ff6b6b',
  regional: '#ffa94d',
  station: '#4dabf7',
  substation: '#69db7c',
  vts: '#da77f2',
  navy: '#3b82f6',
};

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

export function CoastGuardLayer({ selected, onClose }: Props) {
  const { t } = useTranslation();
  if (!selected) return null;
  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: TYPE_COLOR[selected.type],
          color: selected.type === 'vts' ? '#fff' : '#000',
          gap: 6, padding: '6px 10px',
        }}>
          {selected.type === 'navy' ? (
            <span style={{ fontSize: 16 }}>⚓</span>
          ) : selected.type === 'vts' ? (
            <span style={{ fontSize: 16 }}>📡</span>
          ) : (
            <span style={{ fontSize: 16 }}>🚔</span>
          )}
          <strong style={{ fontSize: 13 }}>{selected.name}</strong>
        </div>
        <div style={{ display: 'flex', gap: 4, marginBottom: 6 }}>
          <span style={{
            background: TYPE_COLOR[selected.type],
            color: selected.type === 'vts' ? '#fff' : '#000',
            padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
          }}>
            {CG_TYPE_LABEL[selected.type]}
          </span>
          <span style={{
            background: '#333', color: '#4dabf7',
            padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
          }}>
            {t('coastGuard.agency')}
          </span>
        </div>
        <div style={{ fontSize: 10, color: '#999' }}>
          {selected.lat.toFixed(4)}°N, {selected.lng.toFixed(4)}°E
        </div>
      </div>
    </Popup>
  );
}