import { useEffect, useMemo, useRef, useState } from 'react';
import { Minus, Plus, Crosshair, X, PanelLeft, PanelRight } from 'lucide-react';
import { cn } from '@/lib/utils';
import { spotStatusKey, inferSpotMode, spotModeCategory } from '@/lib/spot';

// BandMap — vertical spectrum panel inspired by Log4OM.
// - Full band is always visible; zoom changes pixels-per-kHz, scroll
//   navigates the band (so 16× lets you read each spot, not crops the
//   band to a 22 kHz slice).
// - Labels sit at their actual frequency by default (straight horizontal
//   leader line). Only when two labels would visually overlap do we
//   bump the lower one down — its leader then becomes diagonal back to
//   the true frequency.

interface Spot {
  source_id?: number;
  source_name?: string;
  dx_call: string;
  freq_khz: number;
  freq_hz: number;
  band?: string;
  comment?: string;
  spotter?: string;
}

type SpotStatusEntry = { status: string; country?: string };

interface Props {
  band: string;
  spots: Spot[];
  spotStatus: Record<string, SpotStatusEntry>;
  currentFreqHz: number;
  onSpotClick: (s: Spot) => void;
  onClose?: () => void;
  side?: 'left' | 'right';
  onToggleSide?: () => void;
}

const BAND_RANGES: Record<string, [number, number]> = {
  '160m': [1800, 2000],
  '80m':  [3500, 3800],
  '60m':  [5350, 5450],
  '40m':  [7000, 7200],
  '30m':  [10100, 10150],
  '20m':  [14000, 14350],
  '17m':  [18068, 18168],
  '15m':  [21000, 21450],
  '12m':  [24890, 24990],
  '10m':  [28000, 29700],
  '6m':   [50000, 50500],
  '4m':   [70000, 70500],
  '2m':   [144000, 146000],
  '70cm': [430000, 440000],
};

const SEGMENT_COLORS: Record<string, [number, number, string][]> = {
  '160m': [[1800, 1838, 'fill-emerald-50'], [1838, 1840, 'fill-sky-50'],  [1840, 2000, 'fill-amber-50']],
  '80m':  [[3500, 3580, 'fill-emerald-50'], [3580, 3600, 'fill-sky-50'],  [3600, 3800, 'fill-amber-50']],
  '60m':  [[5350, 5450, 'fill-amber-50']],
  '40m':  [[7000, 7040, 'fill-emerald-50'], [7040, 7100, 'fill-sky-50'],  [7100, 7200, 'fill-amber-50']],
  '30m':  [[10100, 10130, 'fill-emerald-50'], [10130, 10150, 'fill-sky-50']],
  '20m':  [[14000, 14070, 'fill-emerald-50'], [14070, 14100, 'fill-sky-50'], [14100, 14350, 'fill-amber-50']],
  '17m':  [[18068, 18095, 'fill-emerald-50'], [18095, 18110, 'fill-sky-50'], [18110, 18168, 'fill-amber-50']],
  '15m':  [[21000, 21070, 'fill-emerald-50'], [21070, 21150, 'fill-sky-50'], [21150, 21450, 'fill-amber-50']],
  '12m':  [[24890, 24915, 'fill-emerald-50'], [24915, 24940, 'fill-sky-50'], [24940, 24990, 'fill-amber-50']],
  '10m':  [[28000, 28070, 'fill-emerald-50'], [28070, 28300, 'fill-sky-50'], [28300, 29700, 'fill-amber-50']],
  '6m':   [[50000, 50100, 'fill-emerald-50'], [50100, 50500, 'fill-amber-50']],
};

// Small coloured dot + label used in the band-map legend strip.
function LegendDot({ cls, label }: { cls: string; label: string }) {
  return (
    <span className="inline-flex items-center gap-1">
      <span className={cn('size-2 rounded-full', cls)} />
      {label}
    </span>
  );
}

// Human-readable label for a spot status — used in the pill hover tooltip
// so the operator can see WHY a spot is coloured the way it is.
function statusLabel(s: string): string {
  switch (s) {
    case 'new':      return 'NEW DXCC (entity never worked)';
    case 'new-band': return 'NEW BAND (entity not worked on this band)';
    case 'new-slot': return 'NEW SLOT (mode not worked on this band)';
    case 'worked':   return 'Worked (this band + mode already in log)';
    default:         return 'Entity not resolved';
  }
}

function statusStyle(s: string): { pill: string; bar: string; line: string; dot: string } {
  // pill = full pill background+text+border
  // bar  = thick left accent inside the pill
  // line = SVG leader stroke (visible on hover)
  // dot  = small marker on the freq scale
  switch (s) {
    case 'new':      return {
      pill: 'bg-rose-50 text-rose-900 border-rose-200 hover:bg-rose-100',
      bar:  'bg-rose-500',
      line: 'stroke-rose-400',
      dot:  'fill-rose-500',
    };
    case 'new-band': return {
      pill: 'bg-amber-50 text-amber-900 border-amber-200 hover:bg-amber-100',
      bar:  'bg-amber-500',
      line: 'stroke-amber-400',
      dot:  'fill-amber-500',
    };
    case 'new-slot': return {
      pill: 'bg-yellow-50 text-yellow-900 border-yellow-200 hover:bg-yellow-100',
      bar:  'bg-yellow-500',
      line: 'stroke-yellow-500',
      dot:  'fill-yellow-500',
    };
    case 'worked':   return {
      pill: 'bg-card text-muted-foreground border-border/60 hover:bg-muted/50',
      bar:  'bg-muted-foreground/30',
      line: 'stroke-border',
      dot:  'fill-border',
    };
    default:         return {
      pill: 'bg-card text-foreground border-border hover:bg-accent/40',
      bar:  'bg-primary/60',
      line: 'stroke-primary/50',
      dot:  'fill-primary/60',
    };
  }
}

// Pixels-per-kHz at each zoom step. Base 8 px/kHz means a stacked spot
// every 2.75 kHz fits without anti-overlap kicking in — comfortable for
// most bands. Higher levels are for fine inspection of crowded sub-bands.
const PX_PER_KHZ = [8, 16, 32, 64, 128, 256];
const SCALE_W = 56;
const PILL_H = 22;     // px — height of each callsign pill
const PILL_GAP = 32;   // px between scale border and first pill (room for leader)
const LABEL_W = 200;
const TOP_PAD = 14;    // px of breathing room above/below the band edges so
const BOT_PAD = 14;    // the top-most freq label isn't clipped at y=0
// Max DATA-class (digital: FT8/FT4/JS8/RTTY/PSK/…) pills drawn at once.
// These pile up on the watering-hole frequencies and otherwise spawn
// hundreds of spots that fan out and cover the whole map. ONLY digital is
// capped — CW and SSB are always shown in full. When more than this digital
// spots are in band we keep the most useful (new entities first, worked
// last; ties broken by closeness to the rig freq).
const MAX_VISIBLE_SPOTS = 30;

export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose, side = 'right', onToggleSide }: Props) {
  const range = BAND_RANGES[band];
  const segments = SEGMENT_COLORS[band] ?? [];
  const [zoomIdx, setZoomIdx] = useState(0);
  const scrollerRef = useRef<HTMLDivElement | null>(null);
  const [containerH, setContainerH] = useState(400);

  useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const ro = new ResizeObserver(() => setContainerH(el.clientHeight));
    ro.observe(el);
    setContainerH(el.clientHeight);
    return () => ro.disconnect();
  }, []);

  const fallback: [number, number] = range ?? [0, 1];
  const [lo, hi] = fallback;
  const span = hi - lo;
  const pxPerKHz = PX_PER_KHZ[zoomIdx];

  // Anti-overlap layout: each label wants to sit at its true freq, but
  // never closer than PILL_H from the previous one. Sorted top-to-bottom
  // (highest freq first). Dedup by callsign (latest wins) so multi-cluster
  // duplicates don't stack identical pills.
  //
  // Returns placed labels + the required content height (the natural
  // band height OR the bottom of the last bumped label, whichever is
  // larger). When more labels stack than fit in the band's natural pixel
  // span, totalH grows so scrolling reveals them.
  type Placed = { spot: Spot; freqY: number; labelY: number };
  const { placed, totalH, hidden } = useMemo<{ placed: Placed[]; totalH: number; hidden: number }>(() => {
    // innerH is the band's stretched pixel span; total adds top+bottom
    // padding so the edge freq labels aren't clipped at y=0 / y=H.
    const innerH = Math.max(containerH - TOP_PAD - BOT_PAD, span * pxPerKHz);
    if (!range) return { placed: [], totalH: innerH + TOP_PAD + BOT_PAD, hidden: 0 };
    const seen = new Set<string>();
    const inBand: Spot[] = [];
    for (const s of spots) {
      if (s.freq_khz < lo || s.freq_khz > hi) continue;
      if (seen.has(s.dx_call)) continue;
      seen.add(s.dx_call);
      inBand.push(s);
    }

    // Only DATA-class spots (every digital mode — FT8/FT4/JS8/RTTY/PSK/…)
    // are capped — they're what floods the watering-hole frequencies. We key
    // off the mode CATEGORY (not a literal "FT8" string) because many FT8
    // spots carry no mode word and the band-plan fallback labels them the
    // generic "DATA" rather than "FT8". CW and SSB are always shown in full.
    const isFlood = (s: Spot) => spotModeCategory(inferSpotMode(s.comment ?? '', s.freq_hz)) === 'DATA';
    const ftSpots = inBand.filter(isFlood);
    const otherSpots = inBand.filter((s) => !isFlood(s));

    // Rank a DATA spot by usefulness (new entity → unworked → worked); ties
    // break by proximity to the rig frequency. Keep the top MAX_VISIBLE_SPOTS.
    const rank = (s: Spot) => {
      const k = spotStatusKey(s.dx_call, s.band ?? '', s.comment ?? '', s.freq_hz);
      switch (spotStatus[k]?.status ?? '') {
        case 'new':      return 0;
        case 'new-band': return 1;
        case 'new-slot': return 2;
        case 'worked':   return 4;
        default:         return 3;
      }
    };
    let keptFt = ftSpots;
    let hiddenCount = 0;
    if (ftSpots.length > MAX_VISIBLE_SPOTS) {
      const rigK = currentFreqHz ? currentFreqHz / 1000 : (lo + hi) / 2;
      keptFt = [...ftSpots]
        .sort((a, b) => {
          const r = rank(a) - rank(b);
          if (r !== 0) return r;
          return Math.abs(a.freq_khz - rigK) - Math.abs(b.freq_khz - rigK);
        })
        .slice(0, MAX_VISIBLE_SPOTS);
      hiddenCount = ftSpots.length - keptFt.length;
    }
    const filtered = [...otherSpots, ...keptFt];
    filtered.sort((a, b) => b.freq_khz - a.freq_khz);

    // Desired pill-CENTRE Y for each spot = its true frequency's Y.
    const desired = filtered.map(
      (s) => TOP_PAD + (1 - (s.freq_khz - lo) / span) * innerH,
    );

    // Non-overlapping label placement via isotonic regression (pool-
    // adjacent-violators). We want centres c_0 ≤ c_1 ≤ … with
    // c_{i+1} − c_i ≥ PILL_H, minimising the squared displacement from each
    // label's desired centre. Substituting q_i = c_i − i·PILL_H turns the
    // gap constraint into "q non-decreasing", which PAVA solves exactly in
    // one pass. The win over the old greedy push-down: a tight cluster is
    // centred on its mean, so its labels fan out symmetrically ABOVE and
    // below the frequency (Log4OM style) instead of all spilling downward.
    const n = filtered.length;
    type Block = { sum: number; count: number; start: number };
    const blocks: Block[] = [];
    for (let i = 0; i < n; i++) {
      // e_i = desired_i − i·PILL_H is the target for the substituted q.
      let cur: Block = { sum: desired[i] - i * PILL_H, count: 1, start: i };
      while (blocks.length > 0) {
        const prev = blocks[blocks.length - 1];
        if (prev.sum / prev.count <= cur.sum / cur.count) break;
        blocks.pop();
        cur = { sum: prev.sum + cur.sum, count: prev.count + cur.count, start: prev.start };
      }
      blocks.push(cur);
    }
    const centers = new Array<number>(n);
    for (const b of blocks) {
      const mean = b.sum / b.count; // optimal q for the whole block
      for (let i = b.start; i < b.start + b.count; i++) centers[i] = mean + i * PILL_H;
    }
    // Centres are non-decreasing, so centers[0] is the topmost. Shift the
    // whole set down by any overflow above the band edge so the first label
    // isn't clipped (preserves the ≥ PILL_H spacing).
    const shift = n > 0 ? Math.max(0, TOP_PAD - (centers[0] - PILL_H / 2)) : 0;

    const out: Placed[] = [];
    for (let i = 0; i < n; i++) {
      out.push({ spot: filtered[i], freqY: desired[i], labelY: centers[i] + shift - PILL_H / 2 });
    }
    const lastLabelBottom = out.length ? out[out.length - 1].labelY + PILL_H : 0;
    return {
      placed: out,
      totalH: Math.max(innerH + TOP_PAD + BOT_PAD, lastLabelBottom + BOT_PAD),
      hidden: hiddenCount,
    };
  }, [spots, range, lo, hi, span, pxPerKHz, containerH, spotStatus, currentFreqHz]);

  // freqToY for elements rendered outside the memo (ticks, rig pointer).
  // Must mirror the same offset so the rig triangle sits on the right kHz.
  const innerH = Math.max(containerH - TOP_PAD - BOT_PAD, span * pxPerKHz);
  const freqToY = (kHz: number) => TOP_PAD + (1 - (kHz - lo) / span) * innerH;

  // Auto-centre on the rig frequency when the map opens or the band changes
  // (once per band, so it doesn't fight the user's manual scrolling). Waits
  // for the scroller height to be measured and a valid in-band rig freq.
  const centeredForRef = useRef<string>('');
  useEffect(() => {
    if (!range || containerH <= 0 || currentFreqHz <= 0) return;
    const kHz = currentFreqHz / 1000;
    if (kHz < lo || kHz > hi) return;
    if (centeredForRef.current === band) return;
    const el = scrollerRef.current;
    if (!el) return;
    centeredForRef.current = band;
    el.scrollTop = Math.max(0, freqToY(kHz) - containerH / 2);
    // freqToY is recomputed each render; intentionally excluded from deps.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [band, containerH, currentFreqHz, range, lo, hi]);

  useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const onWheel = (e: WheelEvent) => {
      if (!range) return;
      if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        setZoomIdx((z) => Math.max(0, Math.min(PX_PER_KHZ.length - 1, z + (e.deltaY > 0 ? -1 : 1))));
      }
    };
    el.addEventListener('wheel', onWheel, { passive: false });
    return () => el.removeEventListener('wheel', onWheel);
  }, [range]);

  if (!range) {
    return (
      <div className="h-full w-full flex flex-col items-center justify-center text-xs text-muted-foreground p-3 bg-muted/20">
        <div className="text-sm font-semibold mb-1">Band map</div>
        Not configured for {band || '—'}.
      </div>
    );
  }

  // Tick step (where small marks land) and label step (where the kHz
  // number is printed) are decoupled so the scale shows ~10-20 numeric
  // labels per viewport regardless of zoom — at base 8 px/kHz we want
  // labels every 25 kHz, not every 250.
  let tickStep = 50;
  let labelStep = 100;
  if (pxPerKHz >= 4)   { tickStep = 25; labelStep = 50;  }
  if (pxPerKHz >= 8)   { tickStep = 5;  labelStep = 25;  }
  if (pxPerKHz >= 16)  { tickStep = 2;  labelStep = 10;  }
  if (pxPerKHz >= 32)  { tickStep = 1;  labelStep = 5;   }
  if (pxPerKHz >= 64)  { tickStep = 1;  labelStep = 2;   }
  if (pxPerKHz >= 128) { tickStep = 1;  labelStep = 1;   }
  const ticks: number[] = [];
  for (let t = Math.ceil(lo / tickStep) * tickStep; t <= hi; t += tickStep) ticks.push(t);

  function recenterOnRig() {
    if (!scrollerRef.current || currentFreqHz <= 0) return;
    const y = freqToY(currentFreqHz / 1000);
    scrollerRef.current.scrollTop = Math.max(0, y - containerH / 2);
  }

  const currentKHz = currentFreqHz ? currentFreqHz / 1000 : 0;
  const showRigPointer = currentKHz >= lo && currentKHz <= hi;
  const rigY = freqToY(currentKHz);

  return (
    <div className="h-full w-full flex flex-col min-h-0 bg-card">
      <div className="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/40 border-b border-border flex items-center gap-1 shrink-0">
        <span className="flex-1">Map · {band}</span>
        <button type="button" onClick={() => setZoomIdx((z) => Math.max(0, z - 1))} disabled={zoomIdx === 0}
          className="size-5 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
          title="Zoom out">
          <Minus className="size-3" />
        </button>
        <span className="font-mono text-[10px] w-12 text-center">{pxPerKHz}px/kHz</span>
        <button type="button" onClick={() => setZoomIdx((z) => Math.min(PX_PER_KHZ.length - 1, z + 1))} disabled={zoomIdx === PX_PER_KHZ.length - 1}
          className="size-5 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
          title="Zoom in">
          <Plus className="size-3" />
        </button>
        <button type="button" onClick={recenterOnRig}
          className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
          title="Scroll to current rig frequency">
          <Crosshair className="size-3" />
        </button>
        {onToggleSide && (
          <button type="button" onClick={onToggleSide}
            className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
            title={side === 'right' ? 'Move band map to the left' : 'Move band map to the right'}>
            {side === 'right' ? <PanelLeft className="size-3" /> : <PanelRight className="size-3" />}
          </button>
        )}
        {onClose && (
          <button type="button" onClick={onClose}
            className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
            title="Hide band map">
            <X className="size-3" />
          </button>
        )}
      </div>

      <div ref={scrollerRef} className="flex-1 overflow-y-auto overflow-x-hidden relative">
        <div className="relative" style={{ height: totalH, minWidth: SCALE_W + PILL_GAP + LABEL_W }}>
          {/* Scale background segments — stretched to total height */}
          <svg
            className="absolute top-0 left-0 pointer-events-none"
            width={SCALE_W}
            height={totalH}
            preserveAspectRatio="none"
          >
            {segments.map(([s, e, cls], i) => {
              const y1 = freqToY(Math.min(e, hi));
              const y2 = freqToY(Math.max(s, lo));
              return <rect key={i} x={0} y={y1} width={SCALE_W} height={Math.max(0, y2 - y1)} className={cls} />;
            })}
            <line x1={SCALE_W - 0.5} y1={0} x2={SCALE_W - 0.5} y2={totalH} className="stroke-border" strokeWidth={1} />
          </svg>

          {/* Tick marks + freq labels */}
          {ticks.map((t) => {
            const y = freqToY(t);
            const major = t % labelStep === 0;
            return (
              <div key={t} className="absolute left-0 flex items-center pointer-events-none" style={{ top: y, transform: 'translateY(-50%)', width: SCALE_W }}>
                <div className={cn('border-t', major ? 'w-full border-foreground/40' : 'w-3 border-border/60')} />
                {major && (
                  <span className="absolute left-1 text-[10px] font-mono text-muted-foreground/90 bg-card/80 px-0.5">
                    {t.toLocaleString()}
                  </span>
                )}
              </div>
            );
          })}

          {/* Dots on the scale + leader lines (always-on, subtle) + rig pointer */}
          <svg className="absolute inset-0 pointer-events-none" width="100%" height={totalH} preserveAspectRatio="none">
            {placed.map((p, i) => {
              const k = spotStatusKey(p.spot.dx_call, p.spot.band ?? '', p.spot.comment ?? '', p.spot.freq_hz);
              const st = spotStatus[k]?.status ?? '';
              const style = statusStyle(st);
              const labelMidY = p.labelY + PILL_H / 2;
              const bumped = Math.abs(p.freqY - labelMidY) > 0.5;
              return (
                <g key={`l-${i}-${p.spot.dx_call}`}>
                  {/* Small dot on the scale where the spot actually is */}
                  <circle cx={SCALE_W - 2} cy={p.freqY} r={3} className={style.dot} />
                  {/* Leader line — solid+full opacity when straight,
                      dashed+lower opacity when diagonal (bumped) so the
                      eye distinguishes "this is the real freq" from
                      "this label was nudged to fit". */}
                  <line
                    x1={SCALE_W + 1}
                    y1={p.freqY}
                    x2={SCALE_W + PILL_GAP - 2}
                    y2={labelMidY}
                    className={cn(style.line, bumped && 'opacity-60')}
                    strokeWidth={bumped ? 1 : 1.5}
                    strokeDasharray={bumped ? '2 2' : ''}
                  />
                </g>
              );
            })}
            {showRigPointer && (
              <>
                {/* Triangle pointer + soft horizontal target line */}
                <polygon
                  points={`${SCALE_W - 6},${rigY - 5} ${SCALE_W + 1},${rigY} ${SCALE_W - 6},${rigY + 5}`}
                  className="fill-primary drop-shadow-sm"
                />
                <line
                  x1={SCALE_W + 1}
                  y1={rigY}
                  x2="100%"
                  y2={rigY}
                  className="stroke-primary/30"
                  strokeWidth={1}
                  strokeDasharray="4 4"
                />
              </>
            )}
          </svg>

          {/* Pills absolutely positioned at their (anti-overlapped) Y */}
          {placed.map((p, i) => {
            const k = spotStatusKey(p.spot.dx_call, p.spot.band ?? '', p.spot.comment ?? '', p.spot.freq_hz);
            const entry = spotStatus[k];
            const st = entry?.status ?? '';
            const style = statusStyle(st);
            const mode = inferSpotMode(p.spot.comment ?? '', p.spot.freq_hz);
            return (
              <button
                key={`${p.spot.freq_khz}-${p.spot.dx_call}-${i}`}
                type="button"
                onClick={() => onSpotClick(p.spot)}
                style={{ top: p.labelY, left: SCALE_W + PILL_GAP, height: PILL_H }}
                className={cn(
                  'absolute inline-flex items-stretch overflow-hidden rounded-md border shadow-sm cursor-pointer transition-all',
                  'hover:translate-x-0.5 hover:shadow',
                  style.pill,
                )}
                title={`${p.spot.dx_call}${entry?.country ? ' · ' + entry.country : ''} · ${p.spot.freq_khz.toFixed(1)} kHz · ${statusLabel(st)}${p.spot.comment ? ' · ' + p.spot.comment : ''}${p.spot.spotter ? ' · de ' + p.spot.spotter : ''}`}
              >
                {/* Status accent strip on the left */}
                <span className={cn('w-1 shrink-0', style.bar)} aria-hidden />
                <span className="flex items-center gap-1.5 px-2 font-mono text-[11px] font-bold leading-none">
                  <span>{p.spot.dx_call}</span>
                  {mode && (
                    <span className="text-[9px] font-normal text-current/70 bg-current/10 rounded px-1 py-px">
                      {mode}
                    </span>
                  )}
                </span>
              </button>
            );
          })}
        </div>
      </div>
      {/* Colour legend — what each pill colour means. */}
      <div className="px-3 py-1 flex flex-wrap items-center gap-x-2.5 gap-y-0.5 text-[9px] text-muted-foreground bg-muted/20 border-t border-border">
        <LegendDot cls="bg-rose-400" label="New DXCC" />
        <LegendDot cls="bg-amber-400" label="New band" />
        <LegendDot cls="bg-yellow-300" label="New slot (mode)" />
        <LegendDot cls="bg-muted-foreground/30" label="Worked" />
      </div>
      <div className="px-3 py-1 text-[9px] text-muted-foreground bg-muted/30 border-t border-border font-mono text-center shrink-0">
        scroll · ctrl+wheel = zoom · ◎ = jump to rig
        {hidden > 0 && <span className="text-amber-600"> · {hidden} FT8/FT4 spot{hidden > 1 ? 's' : ''} hidden — top {MAX_VISIBLE_SPOTS} kept (CW/SSB all shown)</span>}
      </div>
    </div>
  );
}