"use client";

import {
  ChevronDown,
  Copy,
  Minus,
  Plus,
  Square,
  Trash2,
} from "lucide-react";
import { useTranslations } from "next-intl";

import { Slider } from "@/components/ui/slider";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  formatTimelineTime,
  getProjectDuration,
  snapZoomLevel,
  TIMELINE_ZOOM_LEVELS,
} from "@/lib/studio-timeline";
import { useStudioStore } from "@/lib/studio-store";

export function TimelineControlBar() {
  const t = useTranslations("auto.componentsStudioTimelineTimelineControlBar");
  const scenes = useStudioStore((state) => state.scenes);
  const currentTime = useStudioStore((state) => state.currentTime);
  const pxPerSecond = useStudioStore((state) => state.pxPerSecond);
  const isPlaying = useStudioStore((state) => state.isPlaying);
  const selectedLayerId = useStudioStore((state) => state.selectedLayerId);
  const copyLayer = useStudioStore((state) => state.copyLayer);
  const deleteLayer = useStudioStore((state) => state.deleteLayer);
  const setCurrentTime = useStudioStore((state) => state.setCurrentTime);
  const setPxPerSecond = useStudioStore((state) => state.setPxPerSecond);
  const timelineZoomIn = useStudioStore((state) => state.timelineZoomIn);
  const timelineZoomOut = useStudioStore((state) => state.timelineZoomOut);
  const startPlayback = useStudioStore((state) => state.startPlayback);
  const stopPlayback = useStudioStore((state) => state.stopPlayback);

  const totalDuration = getProjectDuration(scenes);
  const canZoomOut = pxPerSecond > TIMELINE_ZOOM_LEVELS[0];
  const canZoomIn =
    pxPerSecond < TIMELINE_ZOOM_LEVELS[TIMELINE_ZOOM_LEVELS.length - 1];

  const handlePreview = (fromStart: boolean) => {
    if (fromStart) setCurrentTime(0);
    startPlayback();
  };

  return (
    <div className="flex h-11 shrink-0 items-center gap-3 border-b border-gray-200 bg-white px-4">
      <div className="flex items-center gap-1">
        <button
          type="button"
          disabled={!selectedLayerId}
          onClick={() => selectedLayerId && copyLayer(selectedLayerId)}
          className="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
          aria-label={t("copyLayer")}
        >
          <Copy className="h-4 w-4" />
        </button>
        <button
          type="button"
          disabled={!selectedLayerId}
          onClick={() => selectedLayerId && deleteLayer(selectedLayerId)}
          className="flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
          aria-label={t("deleteLayer")}
        >
          <Trash2 className="h-4 w-4" />
        </button>
      </div>

      <div className="h-5 w-px bg-gray-200" aria-hidden />

      {isPlaying ? (
        <button
          type="button"
          onClick={stopPlayback}
          className="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        >
          <Square className="h-3.5 w-3.5 fill-current" aria-hidden />
          {t("stop")}
        </button>
      ) : (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
            >
              {t("preview")}
              <ChevronDown className="h-3.5 w-3.5 opacity-70" aria-hidden />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start" className="w-44">
            <DropdownMenuItem onClick={() => handlePreview(false)}>
              {t("preview")}
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => handlePreview(true)}>
              {t("previewFromStart")}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )}

      <button
        type="button"
        onClick={() => setCurrentTime(0)}
        className="rounded px-1 font-mono text-sm tabular-nums text-gray-500 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
        title={t("seekToStart")}
      >
        {formatTimelineTime(currentTime)} | {formatTimelineTime(totalDuration)}
      </button>

      <div className="ml-auto flex items-center gap-2">
        <button
          type="button"
          onClick={timelineZoomOut}
          disabled={!canZoomOut}
          className="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-700 disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
          aria-label={t("zoomOut")}
        >
          <Minus className="h-3.5 w-3.5" />
        </button>
        <Slider
          className="w-24"
          min={30}
          max={120}
          step={30}
          value={[pxPerSecond]}
          onValueChange={([value]) => setPxPerSecond(snapZoomLevel(value))}
          aria-label={t("timelineZoom")}
        />
        <button
          type="button"
          onClick={timelineZoomIn}
          disabled={!canZoomIn}
          className="flex h-7 w-7 items-center justify-center rounded-md text-gray-400 hover:bg-gray-100 hover:text-gray-700 disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
          aria-label={t("zoomIn")}
        >
          <Plus className="h-3.5 w-3.5" />
        </button>
      </div>
    </div>
  );
}
