"use client";

import { useTranslations } from "next-intl";
import {
  CATEGORY_ICON_PRESETS,
  CATEGORY_ICON_STYLES,
  DEFAULT_CATEGORY_ICON_STYLE,
  type CategoryIconPresetKind,
  type CategoryIconStyleId,
} from "@/lib/category-icon-presets";
import { CategoryPresetIcon } from "@/components/menu/category-preset-icon";
import { cn } from "@/lib/utils";

export type CategoryIconSelection = {
  iconPresetId: string | null;
  iconStyle: CategoryIconStyleId | null;
};

type CategoryPresetPickerProps = {
  value: CategoryIconSelection;
  onChange: (value: CategoryIconSelection) => void;
  className?: string;
};

export function CategoryPresetPicker({ value, onChange, className }: CategoryPresetPickerProps) {
  const t = useTranslations("menuAdmin");
  const activeStyle = value.iconStyle ?? DEFAULT_CATEGORY_ICON_STYLE;

  const setStyle = (style: CategoryIconStyleId) => {
    onChange({
      iconPresetId: value.iconPresetId,
      iconStyle: style,
    });
  };

  const setPreset = (presetId: string) => {
    onChange({
      iconPresetId: presetId,
      iconStyle: activeStyle,
    });
  };

  const clearPreset = () => {
    onChange({ iconPresetId: null, iconStyle: null });
  };

  const renderGroup = (kind: CategoryIconPresetKind, label: string) => {
    const presets = CATEGORY_ICON_PRESETS.filter((p) => p.kind === kind);
    return (
      <div className="space-y-2">
        <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground">
          {label}
        </p>
        <div className="flex flex-wrap gap-2">
          {presets.map((preset) => {
            const selected = value.iconPresetId === preset.id;
            return (
              <button
                key={preset.id}
                type="button"
                title={t(`iconPresets.${preset.id}`)}
                onClick={() => setPreset(preset.id)}
                className={cn(
                  "rounded-lg border p-1.5 transition-all active:scale-[0.98]",
                  selected
                    ? "border-[#0F6E56] bg-[#E1F5EE] ring-1 ring-[#0F6E56]/30"
                    : "border-border/80 bg-card hover:border-[#0F6E56]/40"
                )}
              >
                <CategoryPresetIcon presetId={preset.id} style={activeStyle} size="md" />
              </button>
            );
          })}
        </div>
      </div>
    );
  };

  return (
    <div className={cn("space-y-3 rounded-lg border border-border/80 bg-muted/20 p-3", className)}>
      <div className="space-y-2">
        <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground">
          {t("iconStyleLabel")}
        </p>
        <div className="flex flex-wrap gap-1.5">
          {CATEGORY_ICON_STYLES.map((style) => (
            <button
              key={style}
              type="button"
              onClick={() => setStyle(style)}
              className={cn(
                "rounded-md border px-2.5 py-1 text-xs font-medium transition-colors",
                activeStyle === style
                  ? "border-[#0F6E56] bg-[#E1F5EE] text-[#0F6E56]"
                  : "border-border/80 bg-card text-muted-foreground hover:border-[#0F6E56]/40"
              )}
            >
              {t(`iconStyles.${style}`)}
            </button>
          ))}
        </div>
      </div>

      {value.iconPresetId ? (
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span>{t("iconPreview")}</span>
          <CategoryPresetIcon
            presetId={value.iconPresetId}
            style={activeStyle}
            size="md"
          />
          <button
            type="button"
            className="text-[#0F6E56] underline-offset-2 hover:underline"
            onClick={clearPreset}
          >
            {t("clearIconPreset")}
          </button>
        </div>
      ) : null}

      {renderGroup("drink", t("iconPresetGroupDrinks"))}
      {renderGroup("food", t("iconPresetGroupFood"))}
    </div>
  );
}
