"use client";

import Image from "next/image";
import { cn } from "@/lib/utils";
import { useState } from "react";
import { useTranslation } from "react-i18next";

type Option = { value: string; label: string; src: string };

type AppearanceColorSelectProps = {
  label: string;
  placeholder: string;
  value: string;
  options: Option[];
  onChange: (value: string) => void;
  className?: string;
};

export default function AppearanceColorSelect({
  label,
  placeholder,
  value,
  options,
  onChange,
  className,
}: AppearanceColorSelectProps) {
  const { t } = useTranslation("common");
  const [open, setOpen] = useState(false);
  const selected = options.find((o) => o.value === value);

  return (
    <div className={cn("w-full max-w-sm", className)}>
      <p className="mb-1.5 text-center text-xs text-neutral-500">{label}</p>

      <button
        type="button"
        onClick={() => setOpen((prev) => !prev)}
        className="flex w-full items-center gap-2 rounded-2xl border border-[#C3C3C3] bg-white/80 px-3 py-2 text-sm dark:border-neutral-600 dark:bg-neutral-900/80"
      >
        {selected ? (
          <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-full ring-1 ring-neutral-300 dark:ring-neutral-600">
            <Image
              src={selected.src}
              alt={selected.label}
              fill
              className="object-cover"
              unoptimized
            />
          </div>
        ) : (
          <div className="h-9 w-9 shrink-0 rounded-full bg-neutral-100 dark:bg-neutral-800" />
        )}
        <span className="flex-1 text-right text-xs">
          {selected ? selected.label : placeholder}
        </span>
        <span className="text-neutral-400">{open ? "▲" : "▼"}</span>
      </button>

      {open && (
        <div className="mt-2 max-h-52 overflow-y-auto overscroll-contain rounded-2xl border border-neutral-200 bg-white/90 p-2 dark:border-neutral-700 dark:bg-neutral-900/90">
          <button
            type="button"
            onClick={() => {
              onChange("");
              setOpen(false);
            }}
            className="mb-2 w-full rounded-xl border border-dashed border-neutral-300 py-1.5 text-xs text-neutral-500 dark:border-neutral-600"
          >
            {t("models.noFilter")}
          </button>
          <div className="grid grid-cols-4 gap-2">
            {options.map((opt) => {
              const isActive = value === opt.value;
              return (
                <button
                  key={opt.value}
                  type="button"
                  onClick={() => {
                    onChange(isActive ? "" : opt.value);
                    setOpen(false);
                  }}
                  className="flex flex-col items-center gap-1"
                >
                  <div
                    className={cn(
                      "relative h-14 w-14 overflow-hidden rounded-xl border-4 transition-colors",
                      isActive
                        ? "border-[#FC8EAC]"
                        : "border-transparent ring-1 ring-neutral-200 dark:ring-neutral-700"
                    )}
                  >
                    <Image
                      src={opt.src}
                      alt={opt.label}
                      fill
                      className="object-cover"
                      unoptimized
                    />
                  </div>
                  <span className="text-[10px] text-neutral-500">{opt.label}</span>
                </button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}
