"use client";

import { Play, Pause, ChevronLeft, ChevronRight, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import { SPEEDS } from "@/lib/constants";

interface TimePlayerProps {
  step: number;
  onSlider: (value: number[]) => void;
  maxStep: number;
  day: number;
  hour: number;
  metaNumSteps: number;
  metaNumParticles: number;
  playing: boolean;
  speedIdx: number;
  togglePlay: () => void;
  stepBack: () => void;
  stepForward: () => void;
  restart: () => void;
  cycleSpeed: () => void;
  /** When set, show calendar date instead of "Day X" (e.g. "27 Aug 06:00") */
  dateLabel?: string | null;
  startLabel?: string | null;
  endLabel?: string | null;
}

export function TimePlayer({
  step,
  onSlider,
  maxStep,
  day,
  hour,
  metaNumSteps,
  metaNumParticles,
  playing,
  speedIdx,
  togglePlay,
  stepBack,
  stepForward,
  restart,
  cycleSpeed,
  dateLabel = null,
  startLabel = null,
  endLabel = null,
}: TimePlayerProps) {
  const timeDisplay = dateLabel ?? `Day ${day} · ${hour.toString().padStart(2, "0")}:00`;
  const sliderStart = startLabel ?? "Day 1 · 00:00";
  const sliderEnd = endLabel ?? `Day ${Math.floor(maxStep / 24) + 1} · ${(maxStep % 24).toString().padStart(2, "0")}:00`;

  return (
    <div className="absolute bottom-4 left-1/2 z-10 w-full max-w-2xl -translate-x-1/2 rounded-xl border border-slate-600/80 bg-slate-800/95 shadow-xl backdrop-blur-md overflow-hidden">
      <div className="px-3 py-2.5 space-y-2.5">
        <div className="flex items-center gap-2 flex-wrap">
          <div className="flex items-center gap-1">
            <Button
              size="icon"
              variant="outline"
              className="h-8 w-8 shrink-0 rounded-lg border-slate-600 bg-slate-700/80 text-slate-200 hover:bg-slate-600 hover:text-white"
              onClick={stepBack}
              disabled={step <= 0}
              title="Anterior (←)"
              aria-label="Step backward"
            >
              <ChevronLeft className="size-4" />
            </Button>
            <Button
              size="icon"
              className="h-10 w-10 shrink-0 rounded-xl bg-teal-500 hover:bg-teal-400 text-slate-900 shadow-md shadow-teal-500/30 focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 focus:ring-offset-slate-800"
              onClick={togglePlay}
              title={playing ? "Pausar (Espai)" : "Reproduir (Espai)"}
              aria-label={playing ? "Pause simulation" : "Play simulation"}
            >
              {playing ? (
                <Pause className="size-5" />
              ) : (
                <Play className="size-5 ml-0.5" />
              )}
            </Button>
            <Button
              size="icon"
              variant="outline"
              className="h-8 w-8 shrink-0 rounded-lg border-slate-600 bg-slate-700/80 text-slate-200 hover:bg-slate-600 hover:text-white"
              onClick={stepForward}
              disabled={step >= maxStep}
              title="Següent (→)"
              aria-label="Step forward"
            >
              <ChevronRight className="size-4" />
            </Button>
          </div>
          <div className="flex flex-col min-w-0">
            <span className="text-lg font-bold tabular-nums text-white leading-tight">
              {timeDisplay}
            </span>
            <span className="text-[11px] text-slate-400 leading-tight tabular-nums">
              Step {step + 1} / {metaNumSteps}
            </span>
          </div>
          <div className="flex items-center gap-1.5 ml-auto shrink-0">
            <Button
              variant="outline"
              size="sm"
              className="h-8 px-2.5 rounded-lg text-xs font-semibold border-slate-600 bg-slate-700/80 text-slate-200 hover:bg-slate-600 hover:text-white"
              onClick={restart}
              title="Reiniciar"
              aria-label="Restart from beginning"
            >
              <RotateCcw className="size-3.5 mr-1" />
              Restart
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="h-8 px-3 rounded-lg text-xs font-semibold border-slate-600 bg-slate-700/80 text-slate-200 hover:bg-slate-600 hover:text-white"
              onClick={cycleSpeed}
              title="Velocitat"
              aria-label={`Playback speed: ${SPEEDS[speedIdx]}x`}
            >
              ×{SPEEDS[speedIdx]}
            </Button>
          </div>
        </div>
        <div className="space-y-1">
          <Slider
            min={0}
            max={maxStep}
            step={1}
            value={[step]}
            onValueChange={onSlider}
            className="w-full py-2"
            aria-label="Simulation time"
          />
          <div className="flex justify-between text-[11px] text-slate-400 px-0.5">
            <span>{sliderStart}</span>
            <span>{sliderEnd}</span>
          </div>
        </div>
      </div>
    </div>
  );
}
