"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import {
  Crop,
  MousePointer2,
  Pencil,
  Shapes,
  Sparkles,
  Type,
} from "lucide-react";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import type { ImageShapeKind, ImageTool } from "@/lib/image-editor-types";
import { useImageEditorStore } from "@/lib/image-editor-store";
import { cn } from "@/lib/utils";

const TOOLS: { id: ImageTool; labelKey: string; icon: typeof MousePointer2 }[] =
  [
    { id: "select", labelKey: "toolSelect", icon: MousePointer2 },
    { id: "crop", labelKey: "toolCrop", icon: Crop },
    { id: "text", labelKey: "toolText", icon: Type },
    { id: "shape", labelKey: "toolShape", icon: Shapes },
    { id: "draw", labelKey: "toolDraw", icon: Pencil },
    { id: "ai", labelKey: "toolAi", icon: Sparkles },
  ];

const SHAPES: { id: ImageShapeKind; labelKey: string }[] = [
  { id: "rect", labelKey: "shapeRectangle" },
  { id: "circle", labelKey: "shapeCircle" },
  { id: "line", labelKey: "shapeLine" },
  { id: "arrow", labelKey: "shapeArrow" },
];

export function ImageEditorToolbar() {
  const t = useTranslations("auto.componentsImageEditorImageEditorToolbar");
  const [shapeOpen, setShapeOpen] = useState(false);
  const activeTool = useImageEditorStore((s) => s.activeTool);
  const setActiveTool = useImageEditorStore((s) => s.setActiveTool);
  const setPendingShape = useImageEditorStore((s) => s.setPendingShape);
  const setAiModalOpen = useImageEditorStore((s) => s.setAiModalOpen);

  return (
    <aside className="flex w-14 shrink-0 flex-col items-center gap-1 border-r border-gray-800 bg-gray-900 py-3">
      {TOOLS.map((tool) => {
        const Icon = tool.icon;
        if (tool.id === "shape") {
          return (
            <Popover key={tool.id} open={shapeOpen} onOpenChange={setShapeOpen}>
              <PopoverTrigger asChild>
                <button
                  type="button"
                  title={t(tool.labelKey)}
                  onClick={() => setActiveTool("shape")}
                  className={cn(
                    "flex h-10 w-10 items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
                    activeTool === "shape"
                      ? "bg-primary-600 text-white"
                      : "text-gray-400 hover:bg-gray-800 hover:text-white"
                  )}
                >
                  <Icon className="h-4 w-4" />
                </button>
              </PopoverTrigger>
              <PopoverContent side="right" align="start" className="w-36">
                {SHAPES.map((shape) => (
                  <button
                    key={shape.id}
                    type="button"
                    onClick={() => {
                      setPendingShape(shape.id);
                      setActiveTool("shape");
                      setShapeOpen(false);
                    }}
                    className="flex w-full rounded-md px-2 py-2 text-left text-sm text-gray-200 hover:bg-gray-700"
                  >
                    {t(shape.labelKey)}
                  </button>
                ))}
              </PopoverContent>
            </Popover>
          );
        }

        return (
          <button
            key={tool.id}
            type="button"
            title={t(tool.labelKey)}
            onClick={() => {
              if (tool.id === "ai") {
                setAiModalOpen(true);
              } else {
                setActiveTool(tool.id);
              }
            }}
            className={cn(
              "flex h-10 w-10 items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
              activeTool === tool.id
                ? "bg-primary-600 text-white"
                : "text-gray-400 hover:bg-gray-800 hover:text-white"
            )}
          >
            <Icon className="h-4 w-4" />
          </button>
        );
      })}
    </aside>
  );
}
