"use client";

import { useTranslations } from "next-intl";
import { useState } from "react";

import { ColorsCustomTab } from "@/components/studio/sidebar/ColorsCustomTab";
import { ColorsPalettesTab } from "@/components/studio/sidebar/ColorsPalettesTab";
import { ColorsTemplatePreviewCard } from "@/components/studio/sidebar/ColorsTemplatePreviewCard";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { COLOR_PALETTES } from "@/lib/studio-color-palettes";
import { cn } from "@/lib/utils";

export function ColorsSidebarContent() {
  const t = useTranslations("auto.componentsStudioSidebarColorsSidebarContent");
  const [activeColorIndex, setActiveColorIndex] = useState(0);

  const activePalette = COLOR_PALETTES[activeColorIndex] ?? COLOR_PALETTES[0]!;

  return (
    <aside
      className={cn(
        "flex h-full w-full flex-col overflow-hidden bg-white text-gray-900"
      )}
    >
      <div className="shrink-0 p-3">
        <ColorsTemplatePreviewCard
          palette={activePalette}
          paletteIndex={activeColorIndex}
        />
      </div>

      <Tabs defaultValue="palettes" className="flex min-h-0 flex-1 flex-col">
        <div className="shrink-0 px-3">
          <TabsList className="grid h-8 w-full grid-cols-2 rounded-full bg-gray-100 p-0.5">
            <TabsTrigger
              value="palettes"
              className="rounded-full text-[11px] data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
            >
              {t("palettesTab")}
            </TabsTrigger>
            <TabsTrigger
              value="custom"
              className="rounded-full text-[11px] data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm text-gray-500"
            >
              {t("customTab")}
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent
          value="palettes"
          className="mt-0 flex min-h-0 flex-1 flex-col px-3 focus-visible:outline-none"
        >
          <ColorsPalettesTab
            activeColorIndex={activeColorIndex}
            onSelectPalette={setActiveColorIndex}
          />
        </TabsContent>

        <TabsContent
          value="custom"
          className="mt-0 flex-1 overflow-y-auto px-3 focus-visible:outline-none"
        >
          <ColorsCustomTab />
        </TabsContent>
      </Tabs>
    </aside>
  );
}
