// src/components/keywords/keyword-sheet.tsx — « Keyword Detail » : modale // centrée (ELEVA-80, remplace l'ancien drawer). Garde le nom/export/props // historiques — consommée par reservoir, research-container, planning. "use client"; import { CalendarPlus, Check, Clock, Copy, Download, Ellipsis, Search, Star, Trash2, XIcon, } from "lucide-react"; import { useRouter } from "next/navigation"; import { useEffect, useMemo, useRef, useState } from "react"; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Flag } from "@/components/ui/flag"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { addKeywordsToStageAction, addToShortlistAction, deleteKeywordsAction, fetchShortlistAction, removeFromShortlistAction, removeKeywordFromStageAction, updateKeywordAction, } from "@/lib/keywords/actions"; import { KEYWORD_STATUSES, type Keyword, type KeywordSource, type KeywordStatus, type KeywordTheme, type SearchIntent, } from "@/lib/keywords/types"; import { cn } from "@/lib/utils"; import { BriefPanel } from "./brief-panel"; import { ExportEnrichmentDialog } from "./export-enrichment-dialog"; import { ImportBriefDialog } from "./import-brief-dialog"; import { KeywordModalKpis } from "./keyword-modal-kpis"; import { KeywordModalRankCard } from "./keyword-modal-rank-card"; import { KeywordModalSources } from "./keyword-modal-sources"; import { KeywordModalTrend } from "./keyword-modal-trend"; import { latestUpdatedAt, relativeFr } from "./keyword-modal-utils"; import { PromoteToContentDialog } from "./promote-content-dialog"; import { STATUS_LABELS, STATUS_STYLES } from "./status-badge"; import { ThemeSelect } from "./theme-select"; const INTENTS: SearchIntent[] = [ "informational", "commercial", "transactional", "navigational", "local", ]; const INTENT_LABELS: Record = { informational: "Info", commercial: "Commercial", transactional: "Transac", navigational: "Navig", local: "Local", }; // Status colors come from STATUS_STYLES (status-badge.tsx, the shared source of // truth) so the modal header pill matches the table badge exactly (ELEVA-86). function Field({ label, children, }: { label: string; children: React.ReactNode; }) { return (

{label} {children}

); } export function KeywordSheet({ keyword, open, onOpenChange, siteId, onSaved, enableBriefs = false, source, }: { keyword: Keyword | null; open: boolean; onOpenChange: (open: boolean) => void; siteId: string; onSaved: () => void; enableBriefs?: boolean; /** Active toolbar « Source » view — KPIs mirror this source (else primary). */ source?: KeywordSource | ""; }) { const router = useRouter(); const [status, setStatus] = useState("idea"); const [theme, setTheme] = useState(null); const [intent, setIntent] = useState([]); /** « Promu » = le mot-clé est promu en Planning (badge P existant). */ const [promoted, setPromoted] = useState(false); const [shortlisted, setShortlisted] = useState(null); const [briefOpen, setBriefOpen] = useState(false); const [promoteOpen, setPromoteOpen] = useState(false); const [exportOpen, setExportOpen] = useState(false); const keywordId = keyword?.id; // Id du mot-clé actuellement ouvert — lu par le « Annuler » du toast de // statut (closure sur l'ancien id) pour ne resynchroniser le Select local // que si la fiche affiche encore le même mot-clé au moment du clic. const currentIdRef = useRef(keywordId); currentIdRef.current = keywordId; // Re-seed local edit state whenever a different keyword opens. // biome-ignore lint/correctness/useExhaustiveDependencies: reseed only when the opened keyword changes, not on every field mutation useEffect(() => { if (!keyword) return; setStatus(keyword.status); setTheme(keyword.theme); setIntent(keyword.intent); setPromoted(keyword.stages.includes("planning")); }, [keyword?.id]); // Shortlist state — fetched lazily when the modal opens (never on mount; // the component mounts closed, so this never races an RSC navigation). useEffect(() => { if (!open || !keywordId) return; let cancelled = false; setShortlisted(null); fetchShortlistAction(siteId) .then((items) => { if (!cancelled) setShortlisted(items.some((s) => s.id === keywordId)); }) .catch(() => {}); return () => { cancelled = true; }; }, [open, keywordId, siteId]); const promoteKeywords = useMemo( () => (keyword ? [{ id: keyword.id, term: keyword.term }] : []), [keyword], ); const exportKeywords = useMemo(() => (keyword ? [keyword] : []), [keyword]); async function save(patch: { status?: KeywordStatus; theme?: KeywordTheme | null; intent?: SearchIntent[]; }) { if (!keyword) return; const id = keyword.id; // Closure : le handler du Select fait `setStatus(s)` PUIS `save(...)`, // donc `status` vaut encore l'ancienne valeur ici. const prevStatus = status; try { await updateKeywordAction(siteId, id, patch); onSaved(); // Undo sur le changement de statut (clic accidentel « Actif », etc.). // Thème/intents restent silencieux (toasts trop bavards au toggle). if (patch.status !== undefined && patch.status !== prevStatus) { toast.success(`Statut : ${STATUS_LABELS[patch.status]}`, { // Le défaut sonner (4 s) est trop court pour décider d'annuler. duration: 10_000, action: { label: "Annuler", onClick: () => { void updateKeywordAction(siteId, id, { status: prevStatus }) .then(() => { // Resynchronise le Select seulement si la fiche affiche // encore CE mot-clé (elle a pu changer ou se fermer). if (currentIdRef.current === id) setStatus(prevStatus); onSaved(); toast.success( `Statut rétabli : ${STATUS_LABELS[prevStatus]}`, ); }) .catch(() => toast.error("Échec de l'annulation")); }, }, }); } } catch { // swallow — matches the codebase's fire-and-forget convention (no toast infra) } } function toggleIntent(i: SearchIntent) { const next = intent.includes(i) ? intent.filter((x) => x !== i) : [...intent, i]; setIntent(next); save({ intent: next }); } async function togglePromoted() { if (!keyword) return; const next = !promoted; setPromoted(next); try { if (next) { await addKeywordsToStageAction(siteId, [keyword.id], "planning"); } else { await removeKeywordFromStageAction(siteId, keyword.id, "planning"); } onSaved(); } catch { setPromoted(!next); toast.error("Échec de la mise à jour"); } } async function toggleShortlist() { if (!keyword || shortlisted === null) return; const next = !shortlisted; setShortlisted(next); try { if (next) { await addToShortlistAction(siteId, [keyword.id]); toast.success("Marqué prioritaire (shortlist)"); } else { await removeFromShortlistAction(siteId, [keyword.id]); toast.success("Retiré de la shortlist"); } } catch { setShortlisted(!next); toast.error("Échec de la mise à jour de la shortlist"); } } async function deleteKeyword() { if (!keyword) return; try { await deleteKeywordsAction(siteId, [keyword.id]); toast.success("Mot-clé supprimé"); onOpenChange(false); onSaved(); } catch { toast.error("Échec de la suppression"); } } const updated = keyword ? relativeFr(latestUpdatedAt(keyword)) : null; return ( ); }