// Ruler strip rendered above the tracks. Click → seek, hover → timecode tooltip.

'use client';

import { formatTimeShort } from '@/lib/media';
import { RULER_HEIGHT } from './constants';

interface Props {
  duration: number;
  zoom: number;
  hoverTime: number | null;
}

export function Ruler({ duration, zoom, hoverTime }: Props) {
  const pxStep = 80;
  const candidates = [0.1, 0.5, 1, 2, 5, 10, 30, 60, 120, 300];
  let step = 1;
  for (const cand of candidates) {
    if (cand * zoom >= pxStep) {
      step = cand;
      break;
    }
  }
  const ticks: { t: number; major: boolean }[] = [];
  for (let t = 0; t <= duration; t += step / 5) {
    ticks.push({ t, major: Math.abs(t / step - Math.round(t / step)) < 0.001 });
  }

  return (
    <div className="absolute inset-0">
      {ticks.map(({ t, major }, i) => (
        <div
          key={i}
          className={`absolute top-0 bottom-0 ${major ? 'border-l border-capcut-border' : 'border-l border-capcut-border/40'}`}
          style={{ left: t * zoom }}
        >
          {major && (
            <span className="absolute top-1 left-1 text-[10px] text-capcut-muted font-mono">
              {formatTimeShort(t)}
            </span>
          )}
        </div>
      ))}
      {hoverTime !== null && (
        <div
          className="absolute top-0 bottom-0 pointer-events-none"
          style={{ left: hoverTime * zoom }}
        >
          <div className="w-px h-full bg-capcut-text/40" />
          <div className="absolute -top-1 left-1 text-[10px] font-mono text-capcut-text bg-capcut-panel px-1 rounded">
            {formatTimeShort(hoverTime)}
          </div>
        </div>
      )}
    </div>
  );
}

export { RULER_HEIGHT };