"use client";

import { useTranslations } from "next-intl";
import {
  DISCOVER_TAXONOMY,
  type CafeDiscoverProfile,
  type DiscoverListField,
  type DiscoverSingleField,
  toggleListValue,
} from "@/lib/cafe-discover-profile";
import { cn } from "@/lib/utils";

type CafeDiscoverProfileEditorProps = {
  value: CafeDiscoverProfile;
  onChange: (next: CafeDiscoverProfile) => void;
  disabled?: boolean;
};

export function CafeDiscoverProfileEditor({
  value,
  onChange,
  disabled,
}: CafeDiscoverProfileEditorProps) {
  const t = useTranslations("discoverProfile");

  const setList = (field: DiscoverListField, id: string) => {
    onChange({ ...value, [field]: toggleListValue(value[field], id) });
  };

  const setSingle = (field: DiscoverSingleField, id: string) => {
    onChange({ ...value, [field]: value[field] === id ? null : id });
  };

  return (
    <div className="space-y-5">
      <ProfileSection label={t("sections.themes")} hint={t("hints.themes")}>
        <ChipGrid
          ids={DISCOVER_TAXONOMY.themes}
          selected={value.themes}
          label={(id) => t(`themes.${id}`)}
          onToggle={(id) => setList("themes", id)}
          disabled={disabled}
        />
      </ProfileSection>

      <ProfileSection label={t("sections.occasions")} hint={t("hints.occasions")}>
        <ChipGrid
          ids={DISCOVER_TAXONOMY.occasions}
          selected={value.occasions}
          label={(id) => t(`occasions.${id}`)}
          onToggle={(id) => setList("occasions", id)}
          disabled={disabled}
        />
      </ProfileSection>

      <ProfileSection label={t("sections.spaceFeatures")} hint={t("hints.spaceFeatures")}>
        <ChipGrid
          ids={DISCOVER_TAXONOMY.spaceFeatures}
          selected={value.spaceFeatures}
          label={(id) => t(`spaceFeatures.${id}`)}
          onToggle={(id) => setList("spaceFeatures", id)}
          disabled={disabled}
        />
      </ProfileSection>

      <ProfileSection label={t("sections.vibes")} hint={t("hints.vibes")}>
        <ChipGrid
          ids={DISCOVER_TAXONOMY.vibes}
          selected={value.vibes}
          label={(id) => t(`vibes.${id}`)}
          onToggle={(id) => setList("vibes", id)}
          disabled={disabled}
        />
      </ProfileSection>

      <div className="grid gap-4 sm:grid-cols-2">
        <ProfileSection label={t("sections.size")}>
          <ChipGrid
            ids={DISCOVER_TAXONOMY.sizes}
            selected={value.size ? [value.size] : []}
            label={(id) => t(`sizes.${id}`)}
            onToggle={(id) => setSingle("size", id)}
            disabled={disabled}
            single
          />
        </ProfileSection>
        <ProfileSection label={t("sections.floors")}>
          <ChipGrid
            ids={DISCOVER_TAXONOMY.floors}
            selected={value.floors ? [value.floors] : []}
            label={(id) => t(`floors.${id}`)}
            onToggle={(id) => setSingle("floors", id)}
            disabled={disabled}
            single
          />
        </ProfileSection>
        <ProfileSection label={t("sections.noiseLevel")}>
          <ChipGrid
            ids={DISCOVER_TAXONOMY.noiseLevels}
            selected={value.noiseLevel ? [value.noiseLevel] : []}
            label={(id) => t(`noiseLevels.${id}`)}
            onToggle={(id) => setSingle("noiseLevel", id)}
            disabled={disabled}
            single
          />
        </ProfileSection>
        <ProfileSection label={t("sections.priceTier")}>
          <ChipGrid
            ids={DISCOVER_TAXONOMY.priceTiers}
            selected={value.priceTier ? [value.priceTier] : []}
            label={(id) => t(`priceTiers.${id}`)}
            onToggle={(id) => setSingle("priceTier", id)}
            disabled={disabled}
            single
          />
        </ProfileSection>
      </div>
    </div>
  );
}

function ProfileSection({
  label,
  hint,
  children,
}: {
  label: string;
  hint?: string;
  children: React.ReactNode;
}) {
  return (
    <div className="space-y-2">
      <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground">
        {label}
      </p>
      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
      {children}
    </div>
  );
}

function ChipGrid({
  ids,
  selected,
  label,
  onToggle,
  disabled,
  single,
}: {
  ids: readonly string[];
  selected: string[];
  label: (id: string) => string;
  onToggle: (id: string) => void;
  disabled?: boolean;
  single?: boolean;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {ids.map((id) => {
        const active = selected.includes(id);
        return (
          <button
            key={id}
            type="button"
            disabled={disabled}
            onClick={() => onToggle(id)}
            className={cn(
              "rounded-lg border px-2.5 py-1.5 text-xs font-medium transition active:scale-[0.98]",
              active
                ? "border-[#0F6E56] bg-[#E1F5EE] text-[#0F6E56]"
                : "border-border/80 bg-card text-foreground hover:border-[#0F6E56]/40",
              disabled && "pointer-events-none opacity-50"
            )}
            aria-pressed={active}
          >
            {label(id)}
            {!single && active ? (
              <span className="ms-1 opacity-70" aria-hidden>
                ✓
              </span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}
