import { Popup } from 'react-map-gl/maplibre';
import { useTranslation } from 'react-i18next';
import { PIRACY_LEVEL_COLOR, PIRACY_LEVEL_LABEL } from '../../services/piracy';
import type { PiracyZone } from '../../services/piracy';

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

export function PiracyLayer({ 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="340px" className="gl-popup">
      <div className="min-w-[260px] font-mono text-xs">
        <div style={{
          background: PIRACY_LEVEL_COLOR[selected.level],
        }} className="-mx-2.5 -mt-2.5 mb-2 flex items-center gap-1.5 rounded-t px-2.5 py-1.5 text-xs font-bold text-white">
          <span className="text-sm">☠️</span>
          {selected.nameKo}
        </div>

        <div className="mb-1.5 flex flex-wrap gap-1">
          <span style={{
            background: PIRACY_LEVEL_COLOR[selected.level],
          }} className="rounded-sm px-1.5 py-px text-[10px] font-bold text-white">
            {PIRACY_LEVEL_LABEL[selected.level]}
          </span>
          <span className="rounded-sm bg-kcg-card px-1.5 py-px text-[10px] text-kcg-muted">
            {selected.name}
          </span>
          {selected.recentIncidents != null && (
            <span style={{
              color: PIRACY_LEVEL_COLOR[selected.level],
              border: `1px solid ${PIRACY_LEVEL_COLOR[selected.level]}44`,
            }} className="rounded-sm bg-kcg-card px-1.5 py-px text-[10px] font-bold">
              {t('piracy.recentIncidents', { count: selected.recentIncidents })}
            </span>
          )}
        </div>

        <div className="mb-1.5 text-[11px] leading-relaxed text-kcg-text-secondary">
          {selected.description}
        </div>
        <div className="text-[10px] leading-snug text-[#999]">
          {selected.detail}
        </div>
        <div className="mt-1.5 text-[9px] text-kcg-dim">
          {selected.lat.toFixed(2)}°N, {selected.lng.toFixed(2)}°E
        </div>
      </div>
    </Popup>
  );
}
