@consilioweb/payload-support 0.6.1 → 0.6.3

package/dist/views/TicketDetailView/client.js

@@ -0,0 +1,844 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { getFeatures } from '../shared/config';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
+
+const STATUS = {
+  open: { label: "Ouvert", bg: "#dbeafe", color: "#1e40af" },
+  waiting_client: { label: "En attente", bg: "#fef3c7", color: "#92400e" },
+  resolved: { label: "Resolu", bg: "#dcfce7", color: "#166534" }
+};
+function timeAgo(d) {
+  const date = new Date(d), now = /* @__PURE__ */ new Date();
+  if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
+  const y = new Date(now);
+  y.setDate(y.getDate() - 1);
+  if (date.toDateString() === y.toDateString()) return `Hier, ${date.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" })}`;
+  return date.toLocaleDateString("fr-FR", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+}
+function dateLabel(d) {
+  const date = new Date(d), now = /* @__PURE__ */ new Date();
+  if (date.toDateString() === now.toDateString()) return "Aujourd'hui";
+  const y = new Date(now);
+  y.setDate(y.getDate() - 1);
+  if (date.toDateString() === y.toDateString()) return "Hier";
+  return date.toLocaleDateString("fr-FR", { day: "numeric", month: "long" });
+}
+const TicketDetailClient = () => {
+  const { t } = useTranslation();
+  const searchParams = useSearchParams();
+  const ticketId = searchParams.get("id");
+  const features = getFeatures();
+  const threadEndRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [ticket, setTicket] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [client, setClient] = useState(null);
+  const [timeEntries, setTimeEntries] = useState([]);
+  const [activityLog, setActivityLog] = useState([]);
+  const [cannedResponses, setCannedResponses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [replyBody, setReplyBody] = useState("");
+  const [isInternal, setIsInternal] = useState(false);
+  const [notifyClient, setNotifyClient] = useState(true);
+  const [sending, setSending] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
+  const [clientTyping, setClientTyping] = useState(false);
+  const [aiReplying, setAiReplying] = useState(false);
+  const [aiRewriting, setAiRewriting] = useState(false);
+  const [sentiment, setSentiment] = useState(null);
+  const [statusUpdating, setStatusUpdating] = useState(false);
+  const [showActivity, setShowActivity] = useState(false);
+  const [timerRunning, setTimerRunning] = useState(() => {
+    if (typeof window === "undefined" || !ticketId) return false;
+    return localStorage.getItem(`timer-run-${ticketId}`) === "1";
+  });
+  const [timerSeconds, setTimerSeconds] = useState(() => {
+    if (typeof window === "undefined" || !ticketId) return 0;
+    const s2 = Number(localStorage.getItem(`timer-sec-${ticketId}`) || 0);
+    const t2 = Number(localStorage.getItem(`timer-ts-${ticketId}`) || 0);
+    const running = localStorage.getItem(`timer-run-${ticketId}`) === "1";
+    return running && t2 ? s2 + Math.floor((Date.now() - t2) / 1e3) : s2;
+  });
+  const timerRef = useRef(null);
+  const [otherViewers, setOtherViewers] = useState([]);
+  const [macros, setMacros] = useState([]);
+  const [applyingMacro, setApplyingMacro] = useState(false);
+  const [undoToast, setUndoToast] = useState(null);
+  const [splitModal, setSplitModal] = useState(null);
+  const [splitSubject, setSplitSubject] = useState("");
+  const [pendingFiles, setPendingFiles] = useState([]);
+  const [composerDragOver, setComposerDragOver] = useState(false);
+  const [tags, setTags] = useState([]);
+  const [addingTag, setAddingTag] = useState(false);
+  const [newTagValue, setNewTagValue] = useState("");
+  const fetchAll = useCallback(async () => {
+    if (!ticketId) return;
+    try {
+      const [mr, tr, ter, ar, cr] = await Promise.all([
+        fetch(`/api/ticket-messages?where[ticket][equals]=${ticketId}&sort=createdAt&limit=200&depth=1`, { credentials: "include" }),
+        fetch(`/api/tickets/${ticketId}?depth=1`, { credentials: "include" }),
+        fetch(`/api/time-entries?where[ticket][equals]=${ticketId}&sort=-date&limit=50&depth=0`, { credentials: "include" }),
+        fetch(`/api/ticket-activity-log?where[ticket][equals]=${ticketId}&sort=-createdAt&limit=30&depth=0`, { credentials: "include" }),
+        fetch("/api/canned-responses?sort=sortOrder&limit=50&depth=0", { credentials: "include" })
+      ]);
+      if (mr.ok) {
+        const d = await mr.json();
+        setMessages(d.docs || []);
+      }
+      if (tr.ok) {
+        const d = await tr.json();
+        setTicket(d);
+        if (d.client && typeof d.client === "object") setClient(d.client);
+        if (Array.isArray(d.tags)) setTags(d.tags.map((t2) => typeof t2 === "object" ? t2.tag || "" : t2).filter(Boolean));
+      }
+      if (ter.ok) {
+        const d = await ter.json();
+        setTimeEntries(d.docs || []);
+      }
+      if (ar.ok) {
+        const d = await ar.json();
+        setActivityLog(d.docs || []);
+      }
+      if (cr.ok) {
+        const d = await cr.json();
+        setCannedResponses(d.docs || []);
+      }
+    } catch {
+    }
+    setLoading(false);
+  }, [ticketId]);
+  useEffect(() => {
+    fetchAll();
+  }, [fetchAll]);
+  useEffect(() => {
+    if (!ticketId || loading) return;
+    const iv = setInterval(async () => {
+      try {
+        const [mr, tr] = await Promise.all([
+          fetch(`/api/ticket-messages?where[ticket][equals]=${ticketId}&sort=createdAt&limit=200&depth=1`, { credentials: "include" }),
+          fetch(`/api/tickets/${ticketId}?depth=0`, { credentials: "include" })
+        ]);
+        if (mr.ok) {
+          const d = await mr.json();
+          setMessages(d.docs || []);
+        }
+        if (tr.ok) {
+          const d = await tr.json();
+          setTicket((p) => p ? { ...p, ...d } : d);
+        }
+      } catch {
+      }
+    }, 1e4);
+    return () => clearInterval(iv);
+  }, [ticketId, loading]);
+  useEffect(() => {
+    if (!ticketId) return;
+    fetch(`/api/tickets/${ticketId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ lastAdminReadAt: (/* @__PURE__ */ new Date()).toISOString() }) }).catch(() => {
+    });
+  }, [ticketId, messages.length]);
+  useEffect(() => {
+    if (!ticketId) return;
+    const iv = setInterval(async () => {
+      try {
+        const r = await fetch(`/api/support/typing?ticketId=${ticketId}`, { credentials: "include" });
+        if (r.ok) {
+          const d = await r.json();
+          setClientTyping(d.typing);
+        }
+      } catch (err) {
+        console.warn("[support] typing poll error:", err);
+      }
+    }, 2e3);
+    return () => clearInterval(iv);
+  }, [ticketId]);
+  useEffect(() => {
+    if (!features.ai || messages.length === 0) return;
+    const last = [...messages].reverse().find((m) => m.authorType === "client" || m.authorType === "email");
+    if (!last) return;
+    fetch("/api/support/ai", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ action: "sentiment", text: last.body.slice(0, 500) }) }).then((r) => r.json()).then((d) => {
+      const raw = (d.sentiment || "").toLowerCase();
+      const map = {
+        "frustre": { emoji: ":(", label: "Frustre", color: "#dc2626" },
+        "mecontent": { emoji: ":(", label: "Mecontent", color: "#ea580c" },
+        "urgent": { emoji: "!", label: "Urgent", color: "#dc2626" },
+        "neutre": { emoji: "-", label: "Neutre", color: "#6b7280" },
+        "satisfait": { emoji: ":)", label: "Satisfait", color: "#16a34a" }
+      };
+      const m = Object.keys(map).find((k) => raw.includes(k));
+      setSentiment(m ? map[m] : { emoji: "-", label: "Neutre", color: "#6b7280" });
+    }).catch(() => {
+    });
+  }, [messages.length, features.ai]);
+  useEffect(() => {
+    threadEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length]);
+  useEffect(() => {
+    if (timerRunning) {
+      localStorage.setItem(`timer-run-${ticketId}`, "1");
+      localStorage.setItem(`timer-ts-${ticketId}`, String(Date.now()));
+      localStorage.setItem(`timer-sec-${ticketId}`, String(timerSeconds));
+      timerRef.current = setInterval(() => {
+        setTimerSeconds((p) => {
+          const next = p + 1;
+          localStorage.setItem(`timer-sec-${ticketId}`, String(next));
+          localStorage.setItem(`timer-ts-${ticketId}`, String(Date.now()));
+          return next;
+        });
+      }, 1e3);
+    } else {
+      localStorage.setItem(`timer-run-${ticketId}`, "0");
+      localStorage.setItem(`timer-sec-${ticketId}`, String(timerSeconds));
+      if (timerRef.current) clearInterval(timerRef.current);
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [timerRunning, ticketId]);
+  useEffect(() => {
+    if (!ticketId) return;
+    const join = () => fetch("/api/support/presence", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ ticketId: Number(ticketId), action: "join" })
+    }).catch(() => {
+    });
+    join();
+    const heartbeat = setInterval(join, 2e4);
+    return () => {
+      clearInterval(heartbeat);
+      fetch("/api/support/presence", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ ticketId: Number(ticketId), action: "leave" })
+      }).catch(() => {
+      });
+    };
+  }, [ticketId]);
+  useEffect(() => {
+    if (!ticketId) return;
+    const poll = setInterval(async () => {
+      try {
+        const r = await fetch(`/api/support/presence?ticketId=${ticketId}`, { credentials: "include" });
+        if (r.ok) {
+          const d = await r.json();
+          setOtherViewers(d.viewers || []);
+        }
+      } catch {
+      }
+    }, 5e3);
+    return () => clearInterval(poll);
+  }, [ticketId]);
+  useEffect(() => {
+    fetch("/api/macros?where[isActive][equals]=true&depth=0&limit=50", { credentials: "include" }).then((r) => r.ok ? r.json() : null).then((d) => {
+      if (d?.docs) setMacros(d.docs.map((m) => ({ id: m.id, name: m.name })));
+    }).catch(() => {
+    });
+  }, []);
+  useEffect(() => {
+    if (!showMenu) return;
+    const handler = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setShowMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showMenu]);
+  useEffect(() => {
+    const handler = (e) => {
+      const mod = e.metaKey || e.ctrlKey;
+      if (mod && e.key === "Enter") {
+        e.preventDefault();
+        const sendBtn = document.querySelector('[data-action="send-reply"]');
+        if (sendBtn && !sendBtn.disabled) sendBtn.click();
+      }
+      if (mod && e.shiftKey && e.key.toLowerCase() === "n") {
+        e.preventDefault();
+        setIsInternal((prev) => !prev);
+      }
+      if (e.key === "Escape") {
+        setShowMenu(false);
+        setSplitModal(null);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, []);
+  const handleSend = async () => {
+    if (!replyBody.trim() || !ticketId) return;
+    setSending(true);
+    try {
+      const uploadedLinks = [];
+      for (const file of pendingFiles) {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("_payload", JSON.stringify({ alt: file.name }));
+        try {
+          const ur = await fetch("/api/media", { method: "POST", credentials: "include", body: formData });
+          if (ur.ok) {
+            const ud = await ur.json();
+            if (ud.doc?.url) uploadedLinks.push(`[${ud.doc.filename || file.name}](${ud.doc.url})`);
+          }
+        } catch {
+        }
+      }
+      const finalBody = uploadedLinks.length > 0 ? `${replyBody.trim()}
+
+${uploadedLinks.join("\n")}` : replyBody.trim();
+      const res = await fetch("/api/ticket-messages", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ ticket: Number(ticketId), body: finalBody, authorType: "admin", isInternal, skipNotification: isInternal || !notifyClient })
+      });
+      if (res.ok) {
+        setReplyBody("");
+        setIsInternal(false);
+        setPendingFiles([]);
+        fetchAll();
+      }
+    } catch (err) {
+      console.warn("[support] send reply error:", err);
+    } finally {
+      setSending(false);
+    }
+  };
+  const handleStatusChange = async (v) => {
+    if (!ticketId) return;
+    setStatusUpdating(true);
+    try {
+      await fetch(`/api/tickets/${ticketId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ status: v }) });
+      fetchAll();
+    } catch (err) {
+      console.warn("[support] status change error:", err);
+    } finally {
+      setStatusUpdating(false);
+    }
+  };
+  const handleFieldPatch = async (field, value) => {
+    if (!ticketId) return;
+    try {
+      await fetch(`/api/tickets/${ticketId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ [field]: value }) });
+      fetchAll();
+    } catch {
+    }
+  };
+  const handleDeleteMessage = (msgId) => {
+    if (undoToast) clearTimeout(undoToast.timer);
+    const timer = setTimeout(() => {
+      fetch(`/api/ticket-messages/${msgId}`, { method: "DELETE", credentials: "include" }).then(() => fetchAll());
+      setUndoToast(null);
+    }, 5e3);
+    setUndoToast({ msgId, timer });
+  };
+  const handleUndoDelete = () => {
+    if (undoToast) {
+      clearTimeout(undoToast.timer);
+      setUndoToast(null);
+    }
+  };
+  const handleSplitConfirm = async () => {
+    if (!splitModal || !splitSubject.trim()) return;
+    try {
+      const r = await fetch("/api/support/split-ticket", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ messageId: splitModal.messageId, subject: splitSubject }) });
+      const d = await r.json();
+      if (d.ticketNumber) {
+        fetchAll();
+      }
+    } catch {
+    }
+    setSplitModal(null);
+    setSplitSubject("");
+  };
+  const handleAiSuggest = async () => {
+    if (messages.length === 0) return;
+    setAiReplying(true);
+    try {
+      const r = await fetch("/api/support/ai", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ action: "suggest_reply", messages: messages.slice(-10).map((m) => ({ authorType: m.authorType, body: m.body })), clientName: `${client?.firstName || ""} ${client?.lastName || ""}`.trim(), clientCompany: client?.company })
+      });
+      if (r.ok) {
+        const d = await r.json();
+        if (d.reply) {
+          setReplyBody(d.reply);
+        }
+      }
+    } catch (err) {
+      console.warn("[support] AI suggest error:", err);
+    } finally {
+      setAiReplying(false);
+    }
+  };
+  const handleAiRewrite = async () => {
+    if (!replyBody.trim()) return;
+    setAiRewriting(true);
+    try {
+      const r = await fetch("/api/support/ai", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ action: "rewrite", text: replyBody }) });
+      if (r.ok) {
+        const d = await r.json();
+        if (d.rewritten) {
+          setReplyBody(d.rewritten);
+        }
+      }
+    } catch (err) {
+      console.warn("[support] AI rewrite error:", err);
+    } finally {
+      setAiRewriting(false);
+    }
+  };
+  const handleTimerSave = async () => {
+    if (!ticketId || timerSeconds < 60) return;
+    try {
+      await fetch("/api/time-entries", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ ticket: Number(ticketId), duration: Math.round(timerSeconds / 60), date: (/* @__PURE__ */ new Date()).toISOString(), description: "Timer" }) });
+      setTimerSeconds(0);
+      setTimerRunning(false);
+      fetchAll();
+    } catch (err) {
+      console.warn("[support] timer save error:", err);
+    }
+  };
+  const handleApplyMacro = async (macroId) => {
+    if (!ticketId || applyingMacro) return;
+    setApplyingMacro(true);
+    try {
+      const r = await fetch("/api/support/apply-macro", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ macroId, ticketId: Number(ticketId) })
+      });
+      if (r.ok) {
+        fetchAll();
+      }
+    } catch (err) {
+      console.warn("[support] apply macro error:", err);
+    } finally {
+      setApplyingMacro(false);
+    }
+  };
+  const handleFileSelect = (files) => {
+    if (!files) return;
+    setPendingFiles((prev) => [...prev, ...Array.from(files)]);
+  };
+  const handleFileDrop = (e) => {
+    e.preventDefault();
+    setComposerDragOver(false);
+    handleFileSelect(e.dataTransfer.files);
+  };
+  const handleRemoveTag = async (tag) => {
+    const newTags = tags.filter((t2) => t2 !== tag);
+    setTags(newTags);
+    if (ticketId) {
+      await fetch(`/api/tickets/${ticketId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ tags: newTags.map((t2) => ({ tag: t2 })) }) }).catch(() => {
+      });
+    }
+  };
+  const handleAddTag = async () => {
+    if (!newTagValue.trim()) {
+      setAddingTag(false);
+      return;
+    }
+    const tag = newTagValue.trim();
+    if (tags.includes(tag)) {
+      setAddingTag(false);
+      setNewTagValue("");
+      return;
+    }
+    const newTags = [...tags, tag];
+    setTags(newTags);
+    setAddingTag(false);
+    setNewTagValue("");
+    if (ticketId) {
+      await fetch(`/api/tickets/${ticketId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ tags: newTags.map((t2) => ({ tag: t2 })) }) }).catch(() => {
+      });
+    }
+  };
+  if (!ticketId) return /* @__PURE__ */ jsx("div", { style: { padding: 60, textAlign: "center", color: "#94a3b8", fontSize: 14 }, children: t("detail.selectTicket") });
+  if (loading) return /* @__PURE__ */ jsx("div", { style: { padding: 60, textAlign: "center", color: "#94a3b8", fontSize: 14 }, children: t("common.loading") });
+  if (!ticket) return /* @__PURE__ */ jsx("div", { style: { padding: 60, textAlign: "center", color: "#94a3b8", fontSize: 14 }, children: t("detail.notFound") });
+  const st = STATUS[ticket.status || "open"] || STATUS.open;
+  const totalMin = timeEntries.reduce((a, e) => a + (e.duration || 0), 0);
+  const initials = client ? `${(client.firstName?.[0] || "").toUpperCase()}${(client.lastName?.[0] || "").toUpperCase()}` : "?";
+  const S = {
+    page: { padding: "16px 20px", maxWidth: 1200, margin: "0 auto" },
+    topBar: { display: "flex", alignItems: "center", gap: 12, marginBottom: 12, padding: "8px 0", borderBottom: "1px solid var(--theme-elevation-200)" },
+    backLink: { fontSize: 18, textDecoration: "none", color: "var(--theme-elevation-500)", padding: "4px 8px" },
+    ticketNumber: { fontWeight: 700, fontSize: 14, color: "var(--theme-elevation-400)" },
+    ticketSubject: { fontWeight: 600, fontSize: 15, color: "var(--theme-text)", flex: 1 },
+    statusChip: { padding: "4px 10px", borderRadius: 6, border: "none", fontWeight: 600, fontSize: 12, cursor: "pointer" },
+    layout: { display: "grid", gridTemplateColumns: "1fr 280px", gap: 20 },
+    thread: { display: "flex", flexDirection: "column", gap: 12, maxHeight: "calc(100vh - 400px)", overflowY: "auto", padding: "8px 0" },
+    message: { display: "flex", gap: 10, padding: "12px 14px", borderRadius: 10, border: "1px solid var(--theme-elevation-150)", position: "relative" },
+    avatar: { width: 32, height: 32, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 11, fontWeight: 700, flexShrink: 0 },
+    messageBody: { fontSize: 14, lineHeight: 1.6, color: "var(--theme-text)", whiteSpace: "pre-wrap" },
+    composer: { marginTop: 12, border: "1px solid var(--theme-elevation-200)", borderRadius: 10, padding: 12 },
+    composerInternal: { borderColor: "#fbbf24", background: "#fefce8" },
+    textarea: { width: "100%", minHeight: 100, padding: 10, border: "none", outline: "none", resize: "vertical", fontSize: 14, fontFamily: "inherit", background: "transparent", color: "var(--theme-text)" },
+    composerFooter: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 },
+    sendBtn: { padding: "8px 16px", borderRadius: 6, border: "none", background: "#2563eb", color: "#fff", fontWeight: 600, fontSize: 13, cursor: "pointer" },
+    sidebar: { display: "flex", flexDirection: "column", gap: 16 },
+    sideSection: { padding: "12px 14px", borderRadius: 10, border: "1px solid var(--theme-elevation-150)", fontSize: 13 },
+    sideSectionTitle: { fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: "var(--theme-elevation-500)", marginBottom: 8, display: "flex", justifyContent: "space-between", alignItems: "center" },
+    sideField: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 0" },
+    sideLabel: { fontSize: 12, color: "var(--theme-elevation-500)" },
+    sideSelect: { padding: "2px 6px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", fontSize: 12, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+    sideValue: { fontSize: 12, fontWeight: 500, color: "var(--theme-text)" },
+    badge: { padding: "2px 6px", borderRadius: 4, fontSize: 10, fontWeight: 600 },
+    tagChip: { display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 4, background: "var(--theme-elevation-100)", fontSize: 11, fontWeight: 500 },
+    tagRemove: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--theme-elevation-400)", padding: 0 },
+    tagInput: { padding: "2px 6px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", fontSize: 11, width: 80 },
+    tagAddBtn: { padding: "2px 8px", borderRadius: 4, border: "1px dashed var(--theme-elevation-300)", background: "none", fontSize: 11, cursor: "pointer", color: "var(--theme-elevation-400)" },
+    toolbarBtn: { padding: "4px 10px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", background: "var(--theme-elevation-0)", fontSize: 11, fontWeight: 700, cursor: "pointer", color: "var(--theme-text)" },
+    dateSeparator: { textAlign: "center", padding: "8px 0", fontSize: 11, color: "var(--theme-elevation-400)" }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
+    /* @__PURE__ */ jsxs("div", { style: S.topBar, children: [
+      /* @__PURE__ */ jsx(Link, { href: "/admin/support/inbox", style: S.backLink, "aria-label": "Retour", children: "\u2190" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flex: 1 }, children: [
+        /* @__PURE__ */ jsx("span", { style: S.ticketNumber, children: ticket.ticketNumber }),
+        /* @__PURE__ */ jsx("span", { style: S.ticketSubject, children: ticket.subject })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs("select", { style: { ...S.statusChip, background: st.bg, color: st.color }, value: ticket.status || "open", onChange: (e) => handleStatusChange(e.target.value), disabled: statusUpdating, children: [
+          /* @__PURE__ */ jsx("option", { value: "open", children: t("detail.statusOpen") }),
+          /* @__PURE__ */ jsx("option", { value: "waiting_client", children: t("detail.statusWaiting") }),
+          /* @__PURE__ */ jsx("option", { value: "resolved", children: t("detail.statusResolved") })
+        ] }),
+        sentiment && features.ai && /* @__PURE__ */ jsxs("span", { style: { ...S.badge, background: `${sentiment.color}12`, color: sentiment.color }, children: [
+          sentiment.emoji,
+          " ",
+          sentiment.label
+        ] }),
+        /* @__PURE__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx("button", { onClick: () => setShowMenu(!showMenu), style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--theme-elevation-500)" }, children: "\xB7\xB7\xB7" }),
+          showMenu && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", right: 0, top: "100%", background: "var(--theme-elevation-0)", border: "1px solid var(--theme-elevation-200)", borderRadius: 8, boxShadow: "0 4px 12px rgba(0,0,0,0.1)", zIndex: 50, minWidth: 160 }, children: [
+            /* @__PURE__ */ jsx("button", { style: { display: "block", width: "100%", padding: "8px 14px", border: "none", background: "none", cursor: "pointer", textAlign: "left", fontSize: 13, color: "var(--theme-text)" }, onClick: () => {
+              navigator.clipboard.writeText(window.location.href);
+              setShowMenu(false);
+            }, children: t("detail.copyLink") }),
+            /* @__PURE__ */ jsx(Link, { href: `/admin/collections/tickets/${ticketId}`, style: { display: "block", padding: "8px 14px", fontSize: 13, color: "var(--theme-text)", textDecoration: "none" }, onClick: () => setShowMenu(false), children: t("detail.payloadView") }),
+            /* @__PURE__ */ jsx("a", { href: `/support/tickets/${ticketId}`, target: "_blank", rel: "noopener noreferrer", style: { display: "block", padding: "8px 14px", fontSize: 13, color: "var(--theme-text)", textDecoration: "none" }, onClick: () => setShowMenu(false), children: t("detail.clientView") })
+          ] })
+        ] })
+      ] })
+    ] }),
+    otherViewers.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", marginBottom: 12, borderRadius: 8, background: "#fef3c7", border: "1px solid #fde68a", fontSize: 13, fontWeight: 500, color: "#92400e" }, children: [
+      otherViewers.map((v) => v.name).join(", "),
+      " ",
+      otherViewers.length === 1 ? "est aussi en train de voir ce ticket" : "sont aussi en train de voir ce ticket"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.layout, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { style: S.thread, children: [
+          messages.map((msg, idx) => {
+            const prev = idx > 0 ? messages[idx - 1] : null;
+            const showDate = msg.createdAt && (!prev?.createdAt || new Date(msg.createdAt).toDateString() !== new Date(prev.createdAt).toDateString());
+            const isAdmin = msg.authorType === "admin";
+            const isPendingDelete = undoToast?.msgId === msg.id;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              showDate && /* @__PURE__ */ jsx("div", { style: S.dateSeparator, children: /* @__PURE__ */ jsx("span", { children: dateLabel(msg.createdAt) }) }),
+              /* @__PURE__ */ jsxs("div", { style: { ...S.message, ...msg.isInternal ? { borderColor: "#fbbf24", background: "#fefce8" } : {}, ...isPendingDelete ? { opacity: 0.3, pointerEvents: "none" } : {} }, children: [
+                /* @__PURE__ */ jsx("div", { style: { ...S.avatar, backgroundColor: isAdmin ? "#2563eb" : msg.authorType === "email" ? "#ea580c" : "#7c3aed" }, children: isAdmin ? "CW" : initials }),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 4 }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 13 }, children: isAdmin ? "Support" : msg.authorType === "email" ? "Email" : client?.firstName || "Client" }),
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--theme-elevation-400)" }, children: timeAgo(msg.createdAt) }),
+                    msg.isInternal && /* @__PURE__ */ jsx("span", { style: { ...S.badge, background: "#fef3c7", color: "#92400e" }, children: "Interne" }),
+                    msg.isSolution && /* @__PURE__ */ jsx("span", { style: { ...S.badge, background: "#dcfce7", color: "#166534" }, children: "Solution" })
+                  ] }),
+                  msg.bodyHtml ? /* @__PURE__ */ jsx("div", { style: S.messageBody, dangerouslySetInnerHTML: { __html: msg.bodyHtml } }) : /* @__PURE__ */ jsx("div", { style: S.messageBody, children: msg.body }),
+                  Array.isArray(msg.attachments) && msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", marginTop: 8 }, children: msg.attachments.map((att, i) => {
+                    const file = typeof att.file === "object" ? att.file : null;
+                    if (!file) return null;
+                    return (file.mimeType || "").startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: file.url || "#", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx("img", { src: file.url || "", alt: "", style: { maxWidth: 200, maxHeight: 120, borderRadius: 6 } }) }, i) : /* @__PURE__ */ jsxs("a", { href: file.url || "#", target: "_blank", rel: "noopener noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: [
+                      "PJ ",
+                      file.filename || "Fichier"
+                    ] }, i);
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 8, right: 8, display: "flex", gap: 4, opacity: 0.6 }, children: [
+                  /* @__PURE__ */ jsx("button", { style: { ...S.toolbarBtn, color: "#dc2626", fontSize: 11 }, onClick: () => handleDeleteMessage(msg.id), children: t("common.delete") }),
+                  features.splitTicket && !msg.isInternal && /* @__PURE__ */ jsx("button", { style: { ...S.toolbarBtn, fontSize: 11 }, onClick: () => {
+                    setSplitModal({ messageId: msg.id, preview: msg.body.slice(0, 200) });
+                    setSplitSubject(`Split: ${ticket.subject}`);
+                  }, children: t("actions.extractMessage") }),
+                  isAdmin && !msg.isInternal && /* @__PURE__ */ jsx("button", { style: { ...S.toolbarBtn, fontSize: 11 }, onClick: () => fetch("/api/support/resend-notification", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ messageId: msg.id }) }), children: t("actions.resendEmail") })
+                ] })
+              ] })
+            ] }, msg.id);
+          }),
+          /* @__PURE__ */ jsx("div", { ref: threadEndRef })
+        ] }),
+        clientTyping && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 14px", fontSize: 13, color: "var(--theme-elevation-400)" }, children: [
+          client?.firstName || "Client",
+          " est en train d'ecrire..."
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { ...S.composer, ...isInternal ? S.composerInternal : {}, ...composerDragOver ? { borderColor: "#2563eb", background: "#eff6ff" } : {} },
+            onDragOver: (e) => {
+              e.preventDefault();
+              setComposerDragOver(true);
+            },
+            onDragLeave: () => setComposerDragOver(false),
+            onDrop: handleFileDrop,
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginBottom: 8, flexWrap: "wrap" }, children: [
+                features.ai && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("button", { style: S.toolbarBtn, onClick: handleAiSuggest, disabled: aiReplying || messages.length === 0, children: aiReplying ? "..." : t("detail.iaSuggestion") }),
+                  /* @__PURE__ */ jsx("button", { style: S.toolbarBtn, onClick: handleAiRewrite, disabled: aiRewriting || !replyBody.trim(), children: aiRewriting ? "..." : t("detail.rewrite") })
+                ] }),
+                /* @__PURE__ */ jsx("button", { style: S.toolbarBtn, onClick: () => fileInputRef.current?.click(), children: t("detail.file") }),
+                /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", multiple: true, style: { display: "none" }, onChange: (e) => handleFileSelect(e.target.files) }),
+                macros.length > 0 && /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    style: { ...S.sideSelect, marginLeft: 0 },
+                    onChange: (e) => {
+                      const id = Number(e.target.value);
+                      if (id) handleApplyMacro(id);
+                      e.target.value = "";
+                    },
+                    disabled: applyingMacro,
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", children: applyingMacro ? t("detail.applyingMacro") : t("detail.macros") }),
+                      macros.map((m) => /* @__PURE__ */ jsx("option", { value: m.id, children: m.name }, m.id))
+                    ]
+                  }
+                ),
+                features.canned && cannedResponses.length > 0 && /* @__PURE__ */ jsxs("select", { style: S.sideSelect, onChange: (e) => {
+                  const cr = cannedResponses.find((c) => String(c.id) === e.target.value);
+                  if (cr) {
+                    let b = cr.body;
+                    if (client) {
+                      b = b.replace(/\{\{client\.firstName\}\}/g, client.firstName).replace(/\{\{client\.company\}\}/g, client.company);
+                    }
+                    setReplyBody(b);
+                  }
+                  e.target.value = "";
+                }, children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: t("detail.cannedResponses") }),
+                  cannedResponses.map((cr) => /* @__PURE__ */ jsx("option", { value: String(cr.id), children: cr.title }, cr.id))
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  style: S.textarea,
+                  value: replyBody,
+                  onChange: (e) => setReplyBody(e.target.value),
+                  placeholder: isInternal ? t("composer.placeholderInternal") : t("composer.placeholderReplyTo", { name: client?.firstName || "client" })
+                }
+              ),
+              pendingFiles.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6 }, children: pendingFiles.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 4, background: "var(--theme-elevation-100)", fontSize: 11 }, children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "PJ ",
+                  f.name
+                ] }),
+                /* @__PURE__ */ jsx("button", { style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--theme-elevation-400)" }, onClick: () => setPendingFiles((prev) => prev.filter((_, j) => j !== i)), children: "\xD7" })
+              ] }, i)) }),
+              /* @__PURE__ */ jsxs("div", { style: S.composerFooter, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", fontSize: 12 }, children: [
+                  /* @__PURE__ */ jsxs("label", { children: [
+                    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: isInternal, onChange: (e) => setIsInternal(e.target.checked) }),
+                    " ",
+                    t("detail.internalNote")
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { children: [
+                    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: notifyClient, onChange: (e) => setNotifyClient(e.target.checked), disabled: isInternal }),
+                    " ",
+                    t("detail.notify")
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("button", { style: { ...S.sendBtn, ...isInternal ? { background: "#d97706" } : {} }, onClick: handleSend, disabled: sending || !replyBody.trim(), "data-action": "send-reply", children: sending ? t("detail.sending") : isInternal ? t("detail.sendNote") : t("detail.sendReply") })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: S.sidebar, children: [
+        client && /* @__PURE__ */ jsxs("div", { style: S.sideSection, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, alignItems: "center", marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { ...S.avatar, backgroundColor: "#7c3aed", width: 36, height: 36 }, children: initials }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { style: { fontWeight: 600, fontSize: 13 }, children: [
+                client.firstName,
+                " ",
+                client.lastName
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: client.company }),
+              /* @__PURE__ */ jsx("a", { href: `mailto:${client.email}`, style: { fontSize: 11, color: "#2563eb" }, children: client.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
+            /* @__PURE__ */ jsx(Link, { href: `/admin/collections/support-clients/${client.id}`, style: { padding: "4px 10px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", fontSize: 11, textDecoration: "none", color: "var(--theme-text)" }, children: t("client.clientSheet") }),
+            /* @__PURE__ */ jsx("button", { style: { padding: "4px 10px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", fontSize: 11, background: "none", cursor: "pointer", color: "var(--theme-text)" }, onClick: () => window.open(`/api/admin/impersonate?clientId=${client.id}`, "_blank"), children: t("client.clientPortal") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: S.sideSection, children: [
+          /* @__PURE__ */ jsx("div", { style: S.sideSectionTitle, children: t("detail.details") }),
+          /* @__PURE__ */ jsxs("div", { style: S.sideField, children: [
+            /* @__PURE__ */ jsx("span", { style: S.sideLabel, children: t("detail.priority") }),
+            /* @__PURE__ */ jsxs("select", { style: S.sideSelect, value: ticket.priority || "normal", onChange: (e) => handleFieldPatch("priority", e.target.value), children: [
+              /* @__PURE__ */ jsx("option", { value: "low", children: t("ticket.priority.low") }),
+              /* @__PURE__ */ jsx("option", { value: "normal", children: t("ticket.priority.normal") }),
+              /* @__PURE__ */ jsx("option", { value: "high", children: t("ticket.priority.high") }),
+              /* @__PURE__ */ jsx("option", { value: "urgent", children: t("ticket.priority.urgent") })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: S.sideField, children: [
+            /* @__PURE__ */ jsx("span", { style: S.sideLabel, children: t("detail.category") }),
+            /* @__PURE__ */ jsxs("select", { style: S.sideSelect, value: ticket.category || "", onChange: (e) => handleFieldPatch("category", e.target.value), children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "--" }),
+              /* @__PURE__ */ jsx("option", { value: "bug", children: t("ticket.category.bug") }),
+              /* @__PURE__ */ jsx("option", { value: "content", children: t("ticket.category.content") }),
+              /* @__PURE__ */ jsx("option", { value: "feature", children: t("ticket.category.feature") }),
+              /* @__PURE__ */ jsx("option", { value: "question", children: t("ticket.category.question") }),
+              /* @__PURE__ */ jsx("option", { value: "hosting", children: t("ticket.category.hosting") })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: S.sideField, children: [
+            /* @__PURE__ */ jsx("span", { style: S.sideLabel, children: t("detail.source") }),
+            /* @__PURE__ */ jsx("span", { style: S.sideValue, children: ticket.source || t("ticket.source.portal") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: S.sideField, children: [
+            /* @__PURE__ */ jsx("span", { style: S.sideLabel, children: t("detail.assigned") }),
+            /* @__PURE__ */ jsx("span", { style: S.sideValue, children: typeof ticket.assignedTo === "object" && ticket.assignedTo ? ticket.assignedTo.firstName || "Admin" : "--" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: S.sideSection, children: [
+          /* @__PURE__ */ jsx("div", { style: S.sideSectionTitle, children: t("detail.tags") }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+            tags.map((tag) => /* @__PURE__ */ jsxs("span", { style: S.tagChip, children: [
+              tag,
+              /* @__PURE__ */ jsx("button", { style: S.tagRemove, onClick: () => handleRemoveTag(tag), children: "\xD7" })
+            ] }, tag)),
+            addingTag ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: S.tagInput,
+                value: newTagValue,
+                onChange: (e) => setNewTagValue(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") handleAddTag();
+                  if (e.key === "Escape") {
+                    setAddingTag(false);
+                    setNewTagValue("");
+                  }
+                },
+                onBlur: handleAddTag,
+                placeholder: "Tag...",
+                autoFocus: true
+              }
+            ) : /* @__PURE__ */ jsx("button", { style: S.tagAddBtn, onClick: () => setAddingTag(true), children: "+ Tag" })
+          ] })
+        ] }),
+        features.timeTracking && /* @__PURE__ */ jsxs("div", { style: S.sideSection, children: [
+          /* @__PURE__ */ jsxs("div", { style: S.sideSectionTitle, children: [
+            t("detail.time"),
+            " ",
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 13, color: "#d97706" }, children: totalMin > 0 ? `${Math.floor(totalMin / 60)}h${String(totalMin % 60).padStart(2, "0")} ${t("detail.total")}` : "0min" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace", fontSize: 16, fontWeight: 700, color: timerRunning ? "#dc2626" : "var(--theme-text)" }, children: [
+              String(Math.floor(timerSeconds / 60)).padStart(2, "0"),
+              ":",
+              String(timerSeconds % 60).padStart(2, "0")
+            ] }),
+            !timerRunning ? /* @__PURE__ */ jsx("button", { style: { ...S.toolbarBtn, color: "#dc2626", borderColor: "#dc2626" }, onClick: () => setTimerRunning(true), children: timerSeconds > 0 ? "Play" : "Go" }) : /* @__PURE__ */ jsx("button", { style: S.toolbarBtn, onClick: () => setTimerRunning(false), children: "Pause" }),
+            timerSeconds >= 60 && !timerRunning && /* @__PURE__ */ jsxs("button", { style: { ...S.toolbarBtn, color: "#16a34a", borderColor: "#16a34a" }, onClick: () => {
+              handleTimerSave();
+              localStorage.removeItem(`timer-sec-${ticketId}`);
+              localStorage.removeItem(`timer-run-${ticketId}`);
+            }, children: [
+              "Save ",
+              Math.round(timerSeconds / 60),
+              "m"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx("input", { type: "number", min: "1", placeholder: "min", style: { width: 60, padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, id: "manual-time-input" }),
+            /* @__PURE__ */ jsx("button", { style: { ...S.toolbarBtn, fontSize: 11 }, onClick: async () => {
+              const input = document.getElementById("manual-time-input");
+              const mins = Number(input?.value);
+              if (!mins || mins < 1 || !ticketId) return;
+              try {
+                await fetch("/api/time-entries", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ ticket: Number(ticketId), duration: mins, date: (/* @__PURE__ */ new Date()).toISOString(), description: "Saisie manuelle" }) });
+                if (input) input.value = "";
+                fetchAll();
+              } catch (err) {
+                console.warn("[support] manual time entry error:", err);
+              }
+            }, children: "+ Ajouter" })
+          ] }),
+          timeEntries.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: 8, fontSize: 11 }, children: timeEntries.slice(0, 6).map((e) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "3px 0", color: "var(--theme-elevation-500)" }, children: [
+            /* @__PURE__ */ jsx("span", { children: new Date(e.date).toLocaleDateString("fr-FR", { day: "numeric", month: "short" }) }),
+            /* @__PURE__ */ jsxs("span", { title: e.description, style: { fontWeight: 600, cursor: e.description ? "help" : "default" }, children: [
+              e.duration,
+              "min"
+            ] })
+          ] }, e.id)) })
+        ] }),
+        features.activityLog && /* @__PURE__ */ jsxs("div", { style: S.sideSection, children: [
+          /* @__PURE__ */ jsx("div", { style: S.sideSectionTitle, children: /* @__PURE__ */ jsxs("button", { onClick: () => setShowActivity(!showActivity), style: { background: "none", border: "none", cursor: "pointer", fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: "var(--theme-elevation-500)" }, children: [
+            "Activite ",
+            showActivity ? "&#9662;" : "&#9656;"
+          ] }) }),
+          showActivity && activityLog.slice(0, 8).map((a) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "flex-start", padding: "4px 0" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { width: 6, height: 6, borderRadius: "50%", marginTop: 4, flexShrink: 0, backgroundColor: a.actorType === "admin" ? "#2563eb" : a.actorType === "system" ? "#6b7280" : "#16a34a" } }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-text)" }, children: (a.detail || a.action).slice(0, 60) }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)" }, children: timeAgo(a.createdAt) })
+            ] })
+          ] }, a.id))
+        ] })
+      ] })
+    ] }),
+    undoToast && /* @__PURE__ */ jsxs("div", { style: { position: "fixed", bottom: 24, left: "50%", transform: "translateX(-50%)", padding: "10px 20px", borderRadius: 8, background: "#1e293b", color: "#fff", fontSize: 13, display: "flex", gap: 12, alignItems: "center", zIndex: 100, boxShadow: "0 4px 12px rgba(0,0,0,0.2)" }, role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: t("detail.messageDeleted") }),
+      /* @__PURE__ */ jsx("button", { onClick: handleUndoDelete, style: { background: "none", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 4, padding: "4px 10px", color: "#fff", cursor: "pointer", fontSize: 12, fontWeight: 600 }, children: t("detail.undo") })
+    ] }),
+    splitModal && /* @__PURE__ */ jsx("div", { style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100 }, onClick: (e) => {
+      if (e.target === e.currentTarget) {
+        setSplitModal(null);
+        setSplitSubject("");
+      }
+    }, children: /* @__PURE__ */ jsxs("div", { style: { background: "var(--theme-elevation-0)", borderRadius: 12, padding: 24, maxWidth: 480, width: "100%", boxShadow: "0 8px 30px rgba(0,0,0,0.15)" }, role: "dialog", children: [
+      /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 12px", fontSize: 16, fontWeight: 700 }, children: t("detail.extractTitle") }),
+      /* @__PURE__ */ jsx("div", { style: { padding: 10, background: "var(--theme-elevation-50)", borderRadius: 6, fontSize: 13, color: "var(--theme-elevation-500)", marginBottom: 12 }, children: splitModal.preview }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: { width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 13, marginBottom: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" },
+          value: splitSubject,
+          onChange: (e) => setSplitSubject(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleSplitConfirm();
+          },
+          placeholder: t("detail.extractSubjectPlaceholder"),
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ jsx("button", { style: { padding: "6px 14px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", background: "none", cursor: "pointer", fontSize: 13, color: "var(--theme-text)" }, onClick: () => {
+          setSplitModal(null);
+          setSplitSubject("");
+        }, children: t("common.cancel") }),
+        /* @__PURE__ */ jsx("button", { style: { ...S.sendBtn }, onClick: handleSplitConfirm, disabled: !splitSubject.trim(), children: t("ticket.createTicket") })
+      ] })
+    ] }) })
+  ] });
+};
+
+export { TicketDetailClient };