"use client";

import { useTranslations } from "next-intl";

import { AdjustPanel } from "@/components/image-editor/panels/AdjustPanel";
import { FiltersPanel } from "@/components/image-editor/panels/FiltersPanel";
import { LayersPanel } from "@/components/image-editor/panels/LayersPanel";
import type { ImagePanelTab } from "@/lib/image-editor-types";
import { useImageEditorStore } from "@/lib/image-editor-store";
import { cn } from "@/lib/utils";

const TAB_IDS: { id: ImagePanelTab; labelKey: string }[] = [
  { id: "adjust", labelKey: "tabAdjust" },
  { id: "filters", labelKey: "tabFilters" },
  { id: "layers", labelKey: "tabLayers" },
];

export function ImageEditorRightPanel() {
  const t = useTranslations("auto.componentsImageEditorImageEditorRightPanel");
  const activePanelTab = useImageEditorStore((s) => s.activePanelTab);
  const setActivePanelTab = useImageEditorStore((s) => s.setActivePanelTab);

  return (
    <aside className="flex w-[280px] shrink-0 flex-col border-l border-gray-800 bg-gray-900">
      <div className="flex border-b border-gray-800">
        {TAB_IDS.map((tab) => (
          <button
            key={tab.id}
            type="button"
            onClick={() => setActivePanelTab(tab.id)}
            className={cn(
              "flex-1 px-2 py-3 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500",
              activePanelTab === tab.id
                ? "border-b-2 border-primary-500 text-white"
                : "text-gray-500 hover:text-gray-300"
            )}
          >
            {t(tab.labelKey)}
          </button>
        ))}
      </div>
      <div className="flex-1 overflow-y-auto p-4">
        {activePanelTab === "adjust" ? <AdjustPanel /> : null}
        {activePanelTab === "filters" ? <FiltersPanel /> : null}
        {activePanelTab === "layers" ? <LayersPanel /> : null}
      </div>
    </aside>
  );
}
