"use client";

import { Check } from "lucide-react";
import { cn } from "@/lib/utils";
import { ICON_KEYS, SWATCHES, type IconKey, type Swatch } from "@/shared/appearance";
import { AppIcon } from "./app-icon";
import { swatchStyle } from "./swatch";
import { tr } from "@/i18n/tr";

/** Renk seçici (radio grubu, klavye ile gezilebilir). */
export function SwatchPicker({
  value,
  onChange,
  labelledBy,
}: {
  value: Swatch;
  onChange: (v: Swatch) => void;
  labelledBy: string;
}) {
  return (
    <div role="radiogroup" aria-labelledby={labelledBy} className="flex flex-wrap gap-2">
      {SWATCHES.map((s) => (
        <button
          key={s}
          type="button"
          role="radio"
          aria-checked={value === s}
          aria-label={tr.swatches[s]}
          title={tr.swatches[s]}
          onClick={() => onChange(s)}
          style={swatchStyle(s)}
          className="flex size-8 items-center justify-center rounded-full bg-(--swatch) text-background ring-offset-2 ring-offset-background outline-none focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:ring-2 aria-checked:ring-(--swatch)"
        >
          {value === s ? <Check className="size-4" /> : null}
        </button>
      ))}
    </div>
  );
}

/** İkon seçici; seçili renkle önizler. */
export function IconPicker({
  value,
  color,
  onChange,
  labelledBy,
}: {
  value: IconKey;
  color: Swatch;
  onChange: (v: IconKey) => void;
  labelledBy: string;
}) {
  return (
    <div
      role="radiogroup"
      aria-labelledby={labelledBy}
      style={swatchStyle(color)}
      className="grid max-h-44 grid-cols-8 gap-1 overflow-y-auto rounded-lg border p-1.5 sm:grid-cols-10"
    >
      {ICON_KEYS.map((key) => (
        <button
          key={key}
          type="button"
          role="radio"
          aria-checked={value === key}
          aria-label={key}
          onClick={() => onChange(key)}
          className={cn(
            "flex aspect-square items-center justify-center rounded-md outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50",
            "aria-checked:bg-(--swatch)/15 aria-checked:text-(--swatch) aria-checked:ring-1 aria-checked:ring-(--swatch)",
          )}
        >
          <AppIcon name={key} className="size-4.5" />
        </button>
      ))}
    </div>
  );
}