"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { SCENE_TRANSITION_OPTIONS } from "@/lib/scene-transition-options";
import type { SceneTransition } from "@/lib/studio-types";
import { cn } from "@/lib/utils";

interface SceneTransitionPickerProps {
  transitionType: SceneTransition;
  onChange: (transition: SceneTransition) => void;
}

export function SceneTransitionPicker({
  transitionType,
  onChange,
}: SceneTransitionPickerProps) {
  const t = useTranslations("auto.componentsStudioSceneTransitionPicker");
  const [open, setOpen] = useState(false);
  const activeOption =
    SCENE_TRANSITION_OPTIONS.find((option) => option.id === transitionType) ??
    SCENE_TRANSITION_OPTIONS[0];
  const ActiveIcon = activeOption.icon;

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          title={t("transition")}
          aria-label={t("transition")}
          className={cn(
            "flex h-6 w-6 items-center justify-center rounded-full border border-[#2a2d3e] bg-[#1a1d2e] text-[#8b91a7] transition-colors hover:border-[#3d4260] hover:bg-[#252938] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]",
            transitionType !== "none" && "border-[#4c6ef5]/60 text-[#7b9eff]"
          )}
        >
          <ActiveIcon className="h-3 w-3" aria-hidden />
        </button>
      </PopoverTrigger>
      <PopoverContent align="center" className="w-44 p-2">
        <p className="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-[#5c6278]">
          {t("transition")}
        </p>
        <ul className="space-y-0.5">
          {SCENE_TRANSITION_OPTIONS.map((option) => {
            const Icon = option.icon;
            return (
              <li key={option.id}>
                <button
                  type="button"
                  onClick={() => {
                    onChange(option.id);
                    setOpen(false);
                  }}
                  className={cn(
                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-gray-200 transition-colors hover:bg-[#252938] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4c6ef5]",
                    transitionType === option.id && "bg-[#252938] text-white"
                  )}
                >
                  <Icon className="h-4 w-4 shrink-0 text-[#8b91a7]" aria-hidden />
                  {option.label}
                </button>
              </li>
            );
          })}
        </ul>
      </PopoverContent>
    </Popover>
  );
}
