import { useRef } from "react";

/** Сутки расчёта слотов: индекс (1-based), начало суток (мс, локально), метка ДД.ММ и число слотов. */
export type SlotDay = { index: number; dayMs: number; label: string; count: number };

type SlotDaySelectorProps = {
  days: SlotDay[];
  fromIndex: number;
  toIndex: number;
  onFromChange: (idx: number) => void;
  onToChange: (idx: number) => void;
};

/**
 * Двуручейный фильтр отображения слотов по суткам — визуально тот же ползунок, что «Витки» на
 * вкладке «Редактор» (классы map-pass-selector*). Накладывается на карту; сужает и таблицу, и сцену.
 */
export function SlotDaySelector({ days, fromIndex, toIndex, onFromChange, onToChange }: SlotDaySelectorProps) {
  const trackRef = useRef<HTMLDivElement>(null);
  const n = days.length;
  if (n === 0) return null;

  const fromDay = days[Math.max(0, Math.min(fromIndex - 1, n - 1))];
  const toDay = days[Math.max(0, Math.min(toIndex - 1, n - 1))];
  const isFullRange = fromIndex === 1 && toIndex === n;
  const countInRange = days
    .slice(fromIndex - 1, toIndex)
    .reduce((sum, day) => sum + day.count, 0);

  const pct = (idx: number): number => (n <= 1 ? 0 : ((idx - 1) / (n - 1)) * 100);
  const fromPct = pct(fromIndex);
  const toPct = pct(toIndex);

  const indexAt = (clientX: number): number => {
    const rect = trackRef.current?.getBoundingClientRect();
    if (!rect || n <= 1) return 1;
    return Math.round(Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)) * (n - 1)) + 1;
  };

  // Какой ползунок реально тянем. При наложении (fromIndex === toIndex) хват попадает на верхний
  // (to), но на правом краю он заперт fromIndex и не может уйти влево — поэтому при наложении
  // выбираем ползунок по направлению движения: влево → from (открыть диапазон), вправо → to.
  const dragRef = useRef<"from" | "to" | null>(null);

  const makeHandlers = (which: "from" | "to") => ({
    onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
      e.stopPropagation();
      dragRef.current = which;
      (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
    },
    onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
      if (!(e.currentTarget as HTMLDivElement).hasPointerCapture(e.pointerId)) return;
      const idx = indexAt(e.clientX);
      let active = dragRef.current;
      if (fromIndex === toIndex) {
        if (idx < fromIndex) active = "from";
        else if (idx > toIndex) active = "to";
        dragRef.current = active;
      }
      if (active === "from") {
        onFromChange(Math.max(1, Math.min(idx, toIndex)));
      } else {
        onToChange(Math.min(n, Math.max(idx, fromIndex)));
      }
    },
    onPointerUp(e: React.PointerEvent<HTMLDivElement>) {
      dragRef.current = null;
      (e.currentTarget as HTMLDivElement).releasePointerCapture(e.pointerId);
    },
  });

  const onTrackPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
    const idx = indexAt(e.clientX);
    if (Math.abs(idx - fromIndex) <= Math.abs(idx - toIndex)) {
      onFromChange(Math.max(1, Math.min(idx, toIndex)));
    } else {
      onToChange(Math.min(n, Math.max(idx, fromIndex)));
    }
  };

  return (
    <div className="map-pass-selector">
      <div className="map-pass-selector__header">
        <span className="map-pass-selector__title">Сутки</span>
        <span className="map-pass-selector__nums">
          {fromDay.label === toDay.label ? fromDay.label : `${fromDay.label}–${toDay.label}`}
        </span>
        <span className="map-pass-selector__times">слотов {countInRange}</span>
        {!isFullRange && (
          <button
            type="button"
            className="map-pass-selector__reset"
            title="Все сутки"
            onClick={() => { onFromChange(1); onToChange(n); }}
          >
            Все
          </button>
        )}
      </div>

      <div className="map-pass-selector__body" onPointerDown={onTrackPointerDown}>
        <div className="map-pass-selector__track" ref={trackRef}>
          <div
            className="map-pass-selector__fill"
            style={{ left: `${fromPct}%`, width: `${toPct - fromPct}%` }}
          />
          {days.map((day) => (
            <div
              key={day.index}
              className={`map-pass-selector__tick${day.index >= fromIndex && day.index <= toIndex ? " is-active" : ""}`}
              style={{ left: `${pct(day.index)}%` }}
            />
          ))}
          <div
            className="map-pass-selector__thumb"
            style={{ left: `${fromPct}%` }}
            {...makeHandlers("from")}
          />
          <div
            className="map-pass-selector__thumb"
            style={{ left: `${toPct}%` }}
            {...makeHandlers("to")}
          />
        </div>
      </div>
    </div>
  );
}
