import { useState } from 'react';
import { ZONE_IDS, ZONE_META } from "../../entities/zone/model/meta";
import { LEGACY_CODE_COLORS_HEX, OVERLAY_RGB, rgbToHex, rgba } from "../../shared/lib/map/palette";
import { SHIP_KIND_ORDER, SHIP_KIND_LABELS, SHIP_KIND_COLORS } from "../../shared/lib/map/shipKind";

export function MapLegend() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="map-legend">
      <button
        className="flex w-full cursor-pointer items-center justify-between border-none bg-transparent p-0 text-left"
        onClick={() => setIsOpen((v) => !v)}
      >
        <span className="lt" style={{ marginBottom: 0 }}>범례</span>
        <span className="text-[9px] text-wing-muted">{isOpen ? '▾' : '▸'}</span>
      </button>

      {isOpen && (
        <>
          <div className="lt" style={{ marginTop: 6 }}>수역</div>
          {ZONE_IDS.map((z) => (
            <div key={z} className="li">
              <div className="ls" style={{ background: `${ZONE_META[z].color}33`, border: `1px solid ${ZONE_META[z].color}` }} />
              {ZONE_META[z].name}
            </div>
          ))}

          <div className="lt" style={{ marginTop: 8 }}>기타 AIS 선박(선종)</div>
          {SHIP_KIND_ORDER.filter((c) => c !== '000028').map((code) => (
            <div key={code} className="li">
              <div className="ls" style={{ background: SHIP_KIND_COLORS[code], borderRadius: 999 }} />
              {SHIP_KIND_LABELS[code]}
            </div>
          ))}

          <div className="lt" style={{ marginTop: 8 }}>CN Permit(업종)</div>
          <div className="li">
            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.PT, borderRadius: 999 }} />
            PT 본선
          </div>
          <div className="li">
            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX["PT-S"], borderRadius: 999 }} />
            PT-S 부속선
          </div>
          <div className="li">
            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.GN, borderRadius: 999 }} />
            GN 유망
          </div>
          <div className="li">
            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.OT, borderRadius: 999 }} />
            OT 1척식
          </div>
          <div className="li">
            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.PS, borderRadius: 999 }} />
            PS 위망
          </div>
          <div className="li">
            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.FC, borderRadius: 999 }} />
            FC 운반선
          </div>
          <div className="li">
            <div className="ls" style={{ background: LEGACY_CODE_COLORS_HEX.C21, borderRadius: 999 }} />
            C21
          </div>

          <div className="lt" style={{ marginTop: 8 }}>밀도(3D)</div>
          <div className="li" style={{ color: "var(--muted)" }}>
            Hexagon: 화면 내 AIS 포인트 집계
          </div>

          <div className="lt" style={{ marginTop: 8 }}>연결선</div>
          <div className="li">
            <div style={{ width: 20, height: 2, background: rgba(OVERLAY_RGB.pairNormal, 0.35), borderRadius: 1 }} />
            PT↔PT-S 쌍 (정상)
          </div>
          <div className="li">
            <div style={{ width: 14, height: 14, borderRadius: "50%", border: `1px solid ${rgba(OVERLAY_RGB.pairNormal, 0.6)}` }} />
            쌍 연결범위
          </div>
          <div className="li">
            <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.pairWarn), borderRadius: 1 }} />
            쌍 이격 경고 (&gt;3NM)
          </div>
          <div className="li">
            <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.fcTransfer), borderRadius: 1 }} />
            FC 환적 연결 (dashed)
          </div>
          <div className="li">
            <div style={{ width: 14, height: 14, borderRadius: "50%", border: `1px solid ${rgba(OVERLAY_RGB.fleetRange, 0.75)}`, opacity: 0.8 }} />
            선단 범위
          </div>
          <div className="li">
            <div style={{ width: 20, height: 2, background: rgbToHex(OVERLAY_RGB.suspicious), borderRadius: 1 }} />
            FC 환적 연결 (의심)
          </div>
          <div className="li">
            <div
              style={{
                width: 20,
                height: 2,
                borderRadius: 1,
                background: "repeating-linear-gradient(to right, rgba(226,232,240,0.55), rgba(226,232,240,0.55) 4px, rgba(0,0,0,0) 4px, rgba(0,0,0,0) 7px)",
              }}
            />
            예측 벡터 (15분)
          </div>
        </>
      )}
    </div>
  );
}
