// src/components/keywords/theme-select.tsx
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useThemeLabels } from "@/lib/keywords/theme-context";
import {
  type KeywordTheme,
  MAX_THEME_LABEL_LENGTH,
} from "@/lib/keywords/types";

const NONE = "__none__";
const CREATE = "__create__";

/** Theme picker with inline "create category" support. Created themes persist
 *  per-site in the DB (theme-context → createThemeAction). */
export function ThemeSelect({
  value,
  onChange,
  allowNone = true,
  className,
  triggerSize,
}: {
  value: KeywordTheme | null;
  onChange: (theme: KeywordTheme | null) => void;
  allowNone?: boolean;
  className?: string;
  triggerSize?: "sm";
}) {
  const { themes, create } = useThemeLabels();
  const [creating, setCreating] = useState(false);
  const [draft, setDraft] = useState("");

  async function commitCreate() {
    const id = await create(draft);
    setCreating(false);
    setDraft("");
    if (id) onChange(id);
  }

  if (creating) {
    return (
      <form
        className="flex items-center gap-2"
        onSubmit={(e) => {
          e.preventDefault();
          void commitCreate();
        }}
      >
        <Input
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          placeholder="Nouvelle catégorie"
          aria-label="Nom de la catégorie"
          className={className}
          // Même borne que le serveur (`theme-store`), pour que le refus soit
          // visible AVANT l'envoi : au-delà, `createThemeAction` écarte le
          // libellé (elle ne le tronque pas) et la saisie serait perdue sans
          // rien afficher.
          maxLength={MAX_THEME_LABEL_LENGTH}
          autoFocus
        />
        <Button type="submit" size="sm" disabled={!draft.trim()}>
          Créer
        </Button>
        <Button
          type="button"
          size="sm"
          variant="ghost"
          onClick={() => {
            setCreating(false);
            setDraft("");
          }}
        >
          Annuler
        </Button>
      </form>
    );
  }

  return (
    <Select
      value={value ?? (allowNone ? NONE : "")}
      onValueChange={(v) => {
        if (v === CREATE) {
          setCreating(true);
          return;
        }
        if (v === NONE) {
          onChange(null);
          return;
        }
        onChange(v as KeywordTheme);
      }}
    >
      <SelectTrigger
        size={triggerSize}
        className={className}
        aria-label="Thème"
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent position="popper">
        {allowNone ? <SelectItem value={NONE}>— Aucun</SelectItem> : null}
        {themes.map((t) => (
          <SelectItem key={t.id} value={t.id}>
            {t.label}
          </SelectItem>
        ))}
        <SelectItem value={CREATE}>➕ Créer une catégorie…</SelectItem>
      </SelectContent>
    </Select>
  );
}