"use client";

import {
  ArrowLeftRight,
  Keyboard,
  Layers2,
  Lightbulb,
  Mic2,
  Music2,
  Palette,
  Stamp,
  Type,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { useTranslations } from "next-intl";

import { toast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils";

export type StudioSidebarTool =
  | "scenes"
  | "audio"
  | "tts"
  | "colors"
  | "transitions"
  | "font"
  | "watermark";

const MAIN_DOCK_ITEMS: {
  id: StudioSidebarTool;
  labelKey: string;
  icon: LucideIcon;
}[] = [
  { id: "scenes", labelKey: "scenes", icon: Layers2 },
  { id: "audio", labelKey: "audio", icon: Music2 },
  { id: "tts", labelKey: "textToSpeech", icon: Mic2 },
  { id: "colors", labelKey: "colors", icon: Palette },
  { id: "transitions", labelKey: "transitions", icon: ArrowLeftRight },
  { id: "font", labelKey: "font", icon: Type },
  { id: "watermark", labelKey: "myWatermark", icon: Stamp },
];

interface StudioSidebarDockProps {
  activeTool: StudioSidebarTool;
  onToolChange: (tool: StudioSidebarTool) => void;
}

function DockToolButton({
  label,
  icon: Icon,
  isActive,
  onClick,
}: {
  label: string;
  icon: LucideIcon;
  isActive: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      aria-current={isActive ? "true" : undefined}
      className={cn(
        "relative flex h-[60px] w-14 shrink-0 flex-col items-center justify-center gap-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500",
        isActive
          ? "bg-blue-50 text-blue-600"
          : "text-gray-500 hover:bg-gray-100 hover:text-gray-700"
      )}
    >
      {isActive ? (
        <span
          className="absolute inset-y-0 left-0 w-[3px] bg-blue-600"
          aria-hidden
        />
      ) : null}
      <Icon className="h-5 w-5 shrink-0" aria-hidden />
      <span className="max-w-[52px] line-clamp-2 px-0.5 text-center text-[9px] font-medium leading-tight">
        {label}
      </span>
    </button>
  );
}

function DockIconButton({
  label,
  icon: Icon,
  onClick,
}: {
  label: string;
  icon: LucideIcon;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      className="flex h-10 w-10 shrink-0 items-center justify-center text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500"
    >
      <Icon className="h-5 w-5 shrink-0" aria-hidden />
    </button>
  );
}

export function StudioSidebarDock({
  activeTool,
  onToolChange,
}: StudioSidebarDockProps) {
  const t = useTranslations("auto.componentsStudioVideoStudioSidebarDock");

  return (
    <nav
      className="flex h-full w-14 shrink-0 flex-col border-r border-gray-200 bg-white py-2"
      aria-label={t("toolsNavLabel")}
    >
      {MAIN_DOCK_ITEMS.map((item) => (
        <DockToolButton
          key={item.id}
          label={t(item.labelKey)}
          icon={item.icon}
          isActive={activeTool === item.id}
          onClick={() => onToolChange(item.id)}
        />
      ))}

      <div className="min-h-0 flex-1" aria-hidden />

      <DockToolButton
        label={t("guideMe")}
        icon={Lightbulb}
        isActive={false}
        onClick={() => toast({ title: t("guideComingSoon") })}
      />

      <div className="flex justify-center py-1">
        <DockIconButton
          label={t("keyboardShortcuts")}
          icon={Keyboard}
          onClick={() =>
            toast({ title: t("keyboardShortcutsComingSoon") })
          }
        />
      </div>
    </nav>
  );
}
