"use client";

import { useState, useTransition } from "react";
import { setPreferredSourceAction } from "@/app/(app)/settings/org/actions";
import { OptionSelect } from "@/components/app/option-select";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { IMPORT_FORMATS } from "@/lib/imports";

// Réglage d'organisation « source préférée » (spec Imports §3.10, décision n°3.d), au
// pattern des formulaires du module Sites : état local, Server Action, Problem Details
// relayé tel quel.

/** Valeur sentinelle « aucune » : un Select Base UI exige une valeur présente dans ses options. */
const NONE = "__none";

// Les options sont celles du **registre d'adaptateurs** (`IMPORT_FORMATS`, miroir de
// `api/app/keywords/sources/__init__.py`) et non la table d'affichage plus large de
// `SOURCE_LABELS` : c'est contre ce registre que le PATCH valide, une source absente serait
// refusée par un 422.
//
// Ce que le réglage fait depuis la consolidation multi-sources (spec 2026-09-01 §3.4) : il
// **ordonne** les observations d'une cellule, la source choisie en tête. Il n'en masque
// aucune, et il ne peut plus faire entrer ni sortir un mot-clé d'un filtre.
const OPTIONS = [
  { value: NONE, label: "Aucune (observations ordonnées par fraîcheur)" },
  ...IMPORT_FORMATS.map((format) => ({ value: format.value, label: format.label })),
];

export function PreferredSourceForm({ preferredSource }: { preferredSource: string | null }) {
  const [value, setValue] = useState(preferredSource ?? NONE);
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);
  const [pending, startTransition] = useTransition();

  return (
    <form
      className="flex max-w-lg flex-wrap items-end gap-2"
      onSubmit={(event) => {
        event.preventDefault();
        setError(null);
        setSaved(false);
        startTransition(async () => {
          const result = await setPreferredSourceAction({
            preferred_source: value === NONE ? null : value,
          });
          if ("error" in result) {
            setError(result.error);
            return;
          }
          setSaved(true);
        });
      }}
    >
      <div className="flex-1 space-y-1">
        <Label htmlFor="preferred-source">Source préférée</Label>
        <OptionSelect
          id="preferred-source"
          label="Source préférée"
          options={OPTIONS}
          value={value}
          onValueChange={(next) => {
            setValue(next);
            setSaved(false);
          }}
        />
      </div>
      <Button type="submit" disabled={pending}>
        Enregistrer
      </Button>
      {error ? (
        <p role="alert" className="text-destructive w-full text-sm">
          {error}
        </p>
      ) : saved ? (
        <p className="text-muted-foreground w-full text-sm">Réglage enregistré.</p>
      ) : null}
    </form>
  );
}