"use client";

import { useTranslations } from "next-intl";

import { cn } from "@/lib/utils";
import {
  TEMPLATE_CATEGORIES,
  TEMPLATE_COLORS,
  TEMPLATE_STYLES,
  type TemplateCategoryFilter,
  type TemplateColorId,
  type TemplateStyle,
} from "@/lib/templates-catalog";

export interface TemplatesSidebarProps {
  category: TemplateCategoryFilter;
  style: TemplateStyle | null;
  color: TemplateColorId | null;
  onCategoryChange: (category: TemplateCategoryFilter) => void;
  onStyleChange: (style: TemplateStyle | null) => void;
  onColorChange: (color: TemplateColorId | null) => void;
  className?: string;
}

export function TemplatesSidebar({
  category,
  style,
  color,
  onCategoryChange,
  onStyleChange,
  onColorChange,
  className,
}: TemplatesSidebarProps) {
  const t = useTranslations("auto.componentsTemplatesTemplatesSidebar");
  return (
    <aside className={cn("space-y-8", className)}>
      <div>
        <h2 className="font-heading text-sm font-semibold text-neutral-900">
          {t("categoryHeading")}
        </h2>
        <ul className="mt-3 space-y-1">
          {TEMPLATE_CATEGORIES.map((item) => (
            <li key={item}>
              <button
                type="button"
                onClick={() => onCategoryChange(item)}
                className={cn(
                  "w-full rounded-lg px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
                  category === item
                    ? "bg-primary-50 font-medium text-primary-700"
                    : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
                )}
              >
                {item}
              </button>
            </li>
          ))}
        </ul>
      </div>

      <div>
        <h2 className="font-heading text-sm font-semibold text-neutral-900">
          {t("styleHeading")}
        </h2>
        <ul className="mt-3 space-y-1">
          {TEMPLATE_STYLES.map((item) => (
            <li key={item}>
              <button
                type="button"
                onClick={() =>
                  onStyleChange(style === item ? null : item)
                }
                className={cn(
                  "w-full rounded-lg px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
                  style === item
                    ? "bg-primary-50 font-medium text-primary-700"
                    : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
                )}
              >
                {item}
              </button>
            </li>
          ))}
        </ul>
      </div>

      <div>
        <h2 className="font-heading text-sm font-semibold text-neutral-900">
          {t("colorHeading")}
        </h2>
        <div className="mt-3 flex flex-wrap gap-2">
          {TEMPLATE_COLORS.map((swatch) => (
            <button
              key={swatch.id}
              type="button"
              onClick={() =>
                onColorChange(color === swatch.id ? null : swatch.id)
              }
              aria-label={swatch.label}
              aria-pressed={color === swatch.id}
              className={cn(
                "h-8 w-8 rounded-full border-2 border-white shadow-sm transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
                swatch.className,
                color === swatch.id &&
                  "ring-2 ring-primary-600 ring-offset-2 scale-110"
              )}
            />
          ))}
        </div>
      </div>
    </aside>
  );
}
