// src/components/keywords/research/exclusions-panel.tsx — contenu de
// l'onglet « Exclus » de la Recherche. Les exclus ne sont pas des lignes
// keywords (slugs dans keyword_exclusions) : panneau inline à la place de la
// table, extrait de l'ancien ExclusionsDialog (design finale-B).
"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { unexcludeKeywordsAction } from "@/lib/keywords/actions";
import type { Exclusion } from "@/lib/keywords/queries";

export function ExclusionsPanel({
  exclusions,
  siteId,
  onChanged,
}: {
  exclusions: Exclusion[];
  siteId: string;
  /** Called after a successful re-instate so the caller can refetch. */
  onChanged: () => void;
}) {
  const [pending, setPending] = useState<string | null>(null);

  async function reinstate(slug: string) {
    setPending(slug);
    try {
      await unexcludeKeywordsAction(siteId, [slug]);
      toast.success(
        "Réintégré — réapparaîtra au prochain sync GSC s'il rank encore",
      );
      onChanged();
    } catch {
      toast.error("Échec de la réintégration");
    } finally {
      setPending(null);
    }
  }

  return (
    // Pas de border-t : rendu sous la bande sticky du container (border-b).
    <div className="space-y-3 p-4">
      <p className="max-w-prose text-muted-foreground text-sm">
        Exclus du sync GSC pour ce site. « Réintégrer » lève le blocage : le
        mot-clé réapparaîtra au prochain sync s'il rank encore (il n'est pas
        recréé immédiatement).
      </p>

      {exclusions.length === 0 ? (
        <p className="text-muted-foreground text-sm">Aucun mot-clé exclu.</p>
      ) : (
        <ul className="flex max-w-2xl flex-col gap-1">
          {exclusions.map((e) => (
            <li
              key={e.slug}
              className="flex items-center justify-between gap-2 rounded-md border px-3 py-1.5 text-sm"
            >
              <span className="truncate">{e.slug.replace(/-/g, " ")}</span>
              <Button
                size="sm"
                variant="outline"
                disabled={pending === e.slug}
                onClick={() => reinstate(e.slug)}
              >
                Réintégrer
              </Button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}