"use client";

import React, { useCallback } from "react";

interface TimelineBarProps {
  totalSteps: number;
  currentStep: number;
  currentTime: number; // unix ms of current event (for date display)
  isPlaying: boolean;
  speed: number;
  onStepChange: (step: number) => void;
  onPlayPause: () => void;
  onSpeedChange: (speed: number) => void;
}

function formatTimelineDate(ms: number): string {
  const d = new Date(ms);
  return d.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

export default function TimelineBar({
  totalSteps,
  currentStep,
  currentTime,
  isPlaying,
  speed,
  onStepChange,
  onPlayPause,
  onSpeedChange,
}: TimelineBarProps) {
  const handleSliderChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      onStepChange(Number(e.target.value));
    },
    [onStepChange]
  );

  const handleSpeedCycle = useCallback(() => {
    const next = speed === 1 ? 2 : speed === 2 ? 4 : 1;
    onSpeedChange(next);
  }, [speed, onSpeedChange]);

  const hasRange = totalSteps > 1;

  return (
    <div className="bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-lg border border-zinc-200 dark:border-zinc-700 shadow-sm px-3 py-2 min-w-[280px] max-w-[480px]">
      <div className="flex items-center gap-2">
        {/* Play/Pause button */}
        <button
          onClick={onPlayPause}
          disabled={!hasRange}
          className={`shrink-0 w-6 h-6 flex items-center justify-center rounded transition-colors ${
            isPlaying
              ? "text-emerald-500 hover:text-emerald-600"
              : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"
          } disabled:opacity-40 disabled:cursor-not-allowed`}
        >
          {isPlaying ? (
            <svg
              className="w-4 h-4"
              viewBox="0 0 16 16"
              fill="currentColor"
            >
              <rect x="3" y="2" width="3.5" height="12" rx="1" />
              <rect x="9.5" y="2" width="3.5" height="12" rx="1" />
            </svg>
          ) : (
            <svg
              className="w-4 h-4"
              viewBox="0 0 16 16"
              fill="currentColor"
            >
              <path d="M4 2l10 6-10 6V2z" />
            </svg>
          )}
        </button>

        {/* Scrubber slider */}
        <input
          type="range"
          min={0}
          max={Math.max(totalSteps - 1, 0)}
          value={currentStep}
          onChange={handleSliderChange}
          disabled={!hasRange}
          className="timeline-slider flex-1 h-4 disabled:opacity-40"
        />

        {/* Step counter + date */}
        <span className="shrink-0 text-xs text-zinc-500 dark:text-zinc-400 font-medium text-right whitespace-nowrap">
          <span className="text-zinc-400 dark:text-zinc-500">
            {currentStep + 1}/{totalSteps}
          </span>
          {" "}
          {formatTimelineDate(currentTime)}
        </span>

        {/* Speed toggle */}
        <button
          onClick={handleSpeedCycle}
          className={`shrink-0 px-1.5 py-0.5 text-[10px] font-semibold rounded transition-colors ${
            speed > 1
              ? "bg-emerald-500 text-white"
              : "text-zinc-500 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-200"
          }`}
        >
          {speed}x
        </button>
      </div>
    </div>
  );
}