import { VESSEL_TYPES } from "../../entities/vessel/model/meta";
import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
import type { MouseEvent } from "react";

type Props = {
  vessels: DerivedLegacyVessel[];
  selectedMmsi: number | null;
  highlightedMmsiSet?: number[];
  onToggleHighlightMmsi: (mmsi: number) => void;
  onSelectMmsi: (mmsi: number) => void;
  onHoverMmsi?: (mmsi: number) => void;
  onClearHover?: () => void;
};

export function VesselList({
  vessels,
  selectedMmsi,
  highlightedMmsiSet = [],
  onToggleHighlightMmsi,
  onSelectMmsi,
  onHoverMmsi,
  onClearHover,
}: Props) {
  const handlePrimaryAction = (e: MouseEvent, mmsi: number) => {
    if (e.shiftKey || e.ctrlKey || e.metaKey) {
      onToggleHighlightMmsi(mmsi);
      return;
    }
    onSelectMmsi(mmsi);
  };

  function isFiniteNumber(x: unknown): x is number {
  return typeof x === "number" && Number.isFinite(x);
}

  const sorted = vessels
    .slice()
    .sort((a, b) => (isFiniteNumber(b.sog) ? b.sog : -1) - (isFiniteNumber(a.sog) ? a.sog : -1))
    .slice(0, 80);

  return (
    <div className="vlist">
      {sorted.map((v) => {
        const meta = VESSEL_TYPES[v.shipCode];
        const primarySegs = meta.speedProfile.filter((s) => s.primary);
        const inRange =
          v.sog !== null && primarySegs.length ? primarySegs.some((s) => v.sog! >= s.range[0] && v.sog! <= s.range[1]) : false;

        const sc = v.state.isFishing ? "#22C55E" : (v.sog ?? 0) > 3 ? "#3B82F6" : "#64748B";
        const speedColor = inRange ? "#22C55E" : (v.sog ?? 0) > 5 ? "#3B82F6" : "var(--muted)";
        const hasPair = v.pairPermitNo ? "⛓" : "";
        const sel = selectedMmsi === v.mmsi;
        const hl = highlightedMmsiSet.includes(v.mmsi);

        return (
          <div
            key={v.mmsi}
            className={`vi ${sel ? "sel" : ""} ${hl ? "hl" : ""}`}
            onClick={(e) => handlePrimaryAction(e, v.mmsi)}
            onMouseEnter={() => onHoverMmsi?.(v.mmsi)}
            onMouseLeave={() => onClearHover?.()}
            title={v.name}
          >
            <div className="dot" style={{ background: meta.color, boxShadow: v.state.isFishing ? `0 0 3px ${meta.color}` : undefined }} />
            <div className="nm">
              {hasPair}
              {v.permitNo}
            </div>
            <div className="sp" style={{ color: speedColor }}>
              {v.sog !== null ? v.sog.toFixed(1) : "?"}kt
            </div>
            <div className="st" style={{ background: `${sc}22`, color: sc }}>
              {v.state.label}
            </div>
          </div>
        );
      })}
      {sorted.length === 0 ? <div style={{ fontSize: 11, color: "var(--muted)" }}>(표시할 대상 선박 없음)</div> : null}
    </div>
  );
}