@fayz-ai/plugin-support 0.0.0-stage → 0.2.0

package/dist/SupportCenter-Z2HEPJGD.js

@@ -0,0 +1,1090 @@
+import { toEmbedUrl, useSupportStore } from './chunk-JJPB2T3Z.js';
+import { KIND_LABEL, STATUS_LABEL, STATUS_TONE, canValidate, canMessage, canCancel, eventLine, FILTER_LABEL, signedUrl, DOORS, FORM_COPY, MAX_ATTACHMENTS } from './chunk-7NVBUXTX.js';
+import React from 'react';
+import { Input, Button, ModalTask, Badge, SubpageHeader, Textarea, ICON_MAP, SegmentedControl, Skeleton, Thumbnail, Separator, Takeover } from '@fayz-ai/ui';
+import { useChatStore, useTenantOptional, useAuth, useHasPermission } from '@fayz-ai/admin';
+import { useConnectivity } from '@fayz-ai/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Row({ icon, title, hint, onClick }) {
+  const Icon2 = ICON_MAP[icon] ?? ICON_MAP.HelpCircle;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className: "flex w-full items-center gap-3 rounded-xl border bg-card p-3 text-left transition-colors hover:bg-accent",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning-soft text-warning-soft-foreground", children: Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: hint })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u203A" })
+      ]
+    }
+  );
+}
+function SupportMenu({ onPickKind, onAskDico, onOpenList, unread = 0 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: "Em que podemos ajudar?" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Escolha o tipo de ajuda." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      onAskDico && /* @__PURE__ */ jsx(Row, { icon: "HelpCircle", title: "Tirar d\xFAvidas", hint: "Pergunte sobre qualquer parte do sistema", onClick: onAskDico }),
+      DOORS.map((d) => /* @__PURE__ */ jsx(Row, { icon: d.icon, title: d.title, hint: d.hint, onClick: () => onPickKind(d.kind) }, d.kind))
+    ] }),
+    onOpenList && /* @__PURE__ */ jsxs("button", { onClick: onOpenList, className: "flex items-center gap-2 pt-1 text-sm text-muted-foreground hover:text-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: "Minhas solicita\xE7\xF5es" }),
+      unread > 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-warning px-1.5 text-[10px] font-semibold text-warning-foreground", children: unread })
+    ] })
+  ] });
+}
+var PIXEL = 12;
+function ScreenCaptureEditor({ open, onClose, onUse, initialFile, autoStart }) {
+  const canvasRef = React.useRef(null);
+  const baseRef = React.useRef(null);
+  const [hasImage, setHasImage] = React.useState(false);
+  const [rects, setRects] = React.useState([]);
+  const [drag, setDrag] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const reset = React.useCallback(() => {
+    setHasImage(false);
+    setRects([]);
+    setDrag(null);
+    setError(null);
+    baseRef.current = null;
+  }, []);
+  React.useEffect(() => {
+    if (!open) {
+      reset();
+      return;
+    }
+    if (initialFile) void loadFromBlob(initialFile);
+    else if (autoStart) void capture(autoStart === "tab");
+  }, [open, initialFile, autoStart]);
+  async function loadFromBlob(blob) {
+    try {
+      const bitmap = await createImageBitmap(blob);
+      const base = document.createElement("canvas");
+      base.width = bitmap.width;
+      base.height = bitmap.height;
+      base.getContext("2d").drawImage(bitmap, 0, 0);
+      baseRef.current = base;
+      setRects([]);
+      setHasImage(true);
+      setError(null);
+      requestAnimationFrame(redraw);
+    } catch {
+      setError("N\xE3o consegui abrir esta imagem.");
+    }
+  }
+  async function capture(preferCurrentTab) {
+    setError(null);
+    setBusy(true);
+    try {
+      const md = navigator.mediaDevices;
+      if (!md?.getDisplayMedia) {
+        setError('Seu navegador n\xE3o permite capturar a tela aqui. Use "Arquivo".');
+        return;
+      }
+      const stream = await md.getDisplayMedia(
+        preferCurrentTab ? { video: { displaySurface: "browser" }, preferCurrentTab: true } : { video: true }
+      );
+      const track = stream.getVideoTracks()[0];
+      const video = document.createElement("video");
+      video.srcObject = stream;
+      await video.play();
+      await new Promise((r) => setTimeout(r, 180));
+      const base = document.createElement("canvas");
+      base.width = video.videoWidth;
+      base.height = video.videoHeight;
+      base.getContext("2d").drawImage(video, 0, 0);
+      track.stop();
+      baseRef.current = base;
+      setRects([]);
+      setHasImage(true);
+      requestAnimationFrame(redraw);
+    } catch (e) {
+      if (e?.name !== "NotAllowedError") setError("N\xE3o consegui capturar a tela.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  function redraw() {
+    const base = baseRef.current, canvas = canvasRef.current;
+    if (!base || !canvas) return;
+    canvas.width = base.width;
+    canvas.height = base.height;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(base, 0, 0);
+    for (const r of rects) pixelate(ctx, r);
+    if (drag) {
+      ctx.strokeStyle = "#111";
+      ctx.lineWidth = 2;
+      ctx.setLineDash([6, 4]);
+      ctx.strokeRect(drag.x, drag.y, drag.w, drag.h);
+      ctx.setLineDash([]);
+    }
+  }
+  React.useEffect(() => {
+    redraw();
+  });
+  function pixelate(ctx, r) {
+    const { x, y, w, h } = normalize(r);
+    if (w < 2 || h < 2) return;
+    const sw = Math.max(1, Math.floor(w / PIXEL)), sh = Math.max(1, Math.floor(h / PIXEL));
+    const tmp = document.createElement("canvas");
+    tmp.width = sw;
+    tmp.height = sh;
+    const tctx = tmp.getContext("2d");
+    tctx.drawImage(ctx.canvas, x, y, w, h, 0, 0, sw, sh);
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(tmp, 0, 0, sw, sh, x, y, w, h);
+    ctx.imageSmoothingEnabled = true;
+  }
+  function normalize(r) {
+    return { x: Math.min(r.x, r.x + r.w), y: Math.min(r.y, r.y + r.h), w: Math.abs(r.w), h: Math.abs(r.h) };
+  }
+  function toCanvasXY(e) {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    return { x: (e.clientX - rect.left) * (canvas.width / rect.width), y: (e.clientY - rect.top) * (canvas.height / rect.height) };
+  }
+  async function finish() {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const blob = await new Promise((res) => canvas.toBlob(res, "image/png"));
+    if (!blob) {
+      setError("N\xE3o consegui gerar a imagem.");
+      return;
+    }
+    const file = new File([blob], `captura-${Date.now()}.png`, { type: "image/png" });
+    onUse(file, URL.createObjectURL(blob));
+    onClose();
+  }
+  return /* @__PURE__ */ jsx(Takeover, { open, onClose, label: "Capturar a tela", closeLabel: "Descartar captura", children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-full w-full max-w-5xl flex-col gap-4 p-4", children: !hasImage ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 text-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: "Fotografe a tela do sistema para anexar \xE0 solicita\xE7\xE3o. No pr\xF3ximo passo voc\xEA borra nomes, telefones ou valores que n\xE3o precisam ir para o suporte." }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => capture(true), disabled: busy, children: "Capturar esta tela" }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => capture(false), disabled: busy, children: "Outra janela" })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: "Esconder informa\xE7\xF5es antes de enviar" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Arraste sobre nomes, telefones ou valores que n\xE3o precisam ir para o suporte. Eles saem borrados na imagem." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto rounded-lg border bg-muted/30 p-2", children: /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: "mx-auto block max-w-full cursor-crosshair touch-none",
+        onPointerDown: (e) => {
+          e.target.setPointerCapture(e.pointerId);
+          const p = toCanvasXY(e);
+          setDrag({ x: p.x, y: p.y, w: 0, h: 0 });
+        },
+        onPointerMove: (e) => {
+          if (!drag) return;
+          const p = toCanvasXY(e);
+          setDrag({ ...drag, w: p.x - drag.x, h: p.y - drag.y });
+        },
+        onPointerUp: () => {
+          if (drag) {
+            setRects((rs) => [...rs, normalize(drag)]);
+            setDrag(null);
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setRects((rs) => rs.slice(0, -1)), disabled: !rects.length, children: "Desfazer" }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setRects([]), disabled: !rects.length, children: "Limpar" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Descartar captura" }),
+        /* @__PURE__ */ jsx(Button, { onClick: finish, children: "Usar esta imagem" })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
+  ] }) }) });
+}
+var MIN_DESCRIPTION = 5;
+function SupportRequestForm({ kind, onDone, onBack }) {
+  const copy = FORM_COPY[kind];
+  const create = useSupportStore((s) => s.create);
+  const [description, setDescription] = React.useState("");
+  const [subject, setSubject] = React.useState("");
+  const [pending, setPending] = React.useState([]);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [capture, setCapture] = React.useState(null);
+  const fileRef = React.useRef(null);
+  const canSubmit = description.trim().length >= MIN_DESCRIPTION && !submitting;
+  const full = pending.length >= MAX_ATTACHMENTS;
+  React.useEffect(() => () => pending.forEach((p) => p.previewUrl && URL.revokeObjectURL(p.previewUrl)), [pending]);
+  function addFile(file, previewUrl) {
+    setPending((ps) => ps.length >= MAX_ATTACHMENTS ? ps : [...ps, {
+      id: crypto.randomUUID(),
+      file,
+      name: file.name,
+      contentType: file.type || "application/octet-stream",
+      sizeBytes: file.size,
+      previewUrl: previewUrl ?? (file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0)
+    }]);
+  }
+  function onPaste(e) {
+    const img = Array.from(e.clipboardData.files).find((f) => f.type.startsWith("image/"));
+    if (img) {
+      e.preventDefault();
+      setCapture({ mode: null, file: img });
+    }
+  }
+  async function submit() {
+    setSubmitting(true);
+    setError(null);
+    try {
+      const result = await create(
+        {
+          kind,
+          description,
+          subject: subject.trim() || null,
+          route: typeof location !== "undefined" ? location.hash || location.pathname : null,
+          screenSnapshot: snapshot()
+        },
+        pending
+      );
+      onDone(result);
+    } catch (e) {
+      setError(e?.message ?? "N\xE3o consegui enviar a solicita\xE7\xE3o.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(SubpageHeader, { title: copy.title, subtitle: copy.intro, onBack, parentLabel: "Suporte" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Descri\xE7\xE3o" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          rows: 5,
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          onPaste,
+          placeholder: "O que voc\xEA estava fazendo, o que esperava que acontecesse e o que apareceu?"
+        }
+      ),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "Pode falar em vez de escrever, ou colar um print aqui. M\xEDnimo de ",
+        MIN_DESCRIPTION,
+        " caracteres."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium", children: [
+        "Assunto ",
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(opcional)" })
+      ] }),
+      /* @__PURE__ */ jsx(Input, { value: subject, onChange: (e) => setSubject(e.target.value), placeholder: copy.subjectPlaceholder, maxLength: 200 })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Anexos" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: full, onClick: () => setCapture({ mode: "tab", file: null }), children: "Capturar esta tela" }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: full, onClick: () => setCapture({ mode: "window", file: null }), children: "Outra janela" }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: full, onClick: () => fileRef.current?.click(), children: "Arquivo" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileRef,
+            type: "file",
+            className: "hidden",
+            accept: "image/*,application/pdf,text/plain,text/csv,audio/*,video/mp4,video/webm",
+            onChange: (e) => {
+              const f = e.target.files?.[0];
+              if (f) addFile(f);
+              e.target.value = "";
+            }
+          }
+        )
+      ] }),
+      full && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "No m\xE1ximo ",
+        MAX_ATTACHMENTS,
+        " anexos por solicita\xE7\xE3o."
+      ] }),
+      pending.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: pending.map((p) => /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-2 rounded-lg border bg-card p-2 pr-7", children: [
+        p.previewUrl ? /* @__PURE__ */ jsx(Thumbnail, { src: p.previewUrl, alt: p.name, className: "h-10 w-10 rounded object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-muted text-xs text-muted-foreground", children: "arq" }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[12rem] truncate text-xs", children: p.name }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Remover anexo",
+            className: "absolute right-1 top-1 rounded p-0.5 text-muted-foreground hover:bg-muted",
+            onClick: () => setPending((ps) => ps.filter((x) => x.id !== p.id)),
+            children: "\xD7"
+          }
+        )
+      ] }, p.id)) })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 pt-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onBack, children: "Voltar" }),
+      /* @__PURE__ */ jsx(Button, { onClick: submit, disabled: !canSubmit, children: submitting ? "Enviando\u2026" : "Enviar solicita\xE7\xE3o" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ScreenCaptureEditor,
+      {
+        open: !!capture,
+        autoStart: capture?.mode ?? null,
+        initialFile: capture?.file ?? null,
+        onClose: () => setCapture(null),
+        onUse: (file, previewUrl) => addFile(file, previewUrl)
+      }
+    )
+  ] });
+}
+function snapshot() {
+  if (typeof window === "undefined") return {};
+  return {
+    url: location.href,
+    hash: location.hash,
+    title: document.title,
+    viewport: { w: window.innerWidth, h: window.innerHeight },
+    at: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function SupportRequestDetail({ onBack }) {
+  const detail = useSupportStore((s) => s.detail);
+  const loading = useSupportStore((s) => s.loadingDetail);
+  const sendMessage = useSupportStore((s) => s.sendMessage);
+  const cancel = useSupportStore((s) => s.cancel);
+  const validate = useSupportStore((s) => s.validate);
+  const [message, setMessage] = React.useState("");
+  const [sending, setSending] = React.useState(false);
+  const [confirmingCancel, setConfirmingCancel] = React.useState(false);
+  const [reopenReason, setReopenReason] = React.useState("");
+  const [reopening, setReopening] = React.useState(false);
+  React.useEffect(() => {
+    setMessage("");
+    setConfirmingCancel(false);
+    setReopenReason("");
+    setReopening(false);
+  }, [detail?.id]);
+  if (loading && !detail) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-48" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full" })
+    ] });
+  }
+  if (!detail) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-8 text-center text-sm text-muted-foreground", children: "Escolha uma solicita\xE7\xE3o para ver a conversa com a equipe." });
+  }
+  async function send() {
+    if (!message.trim()) return;
+    setSending(true);
+    try {
+      await sendMessage(message);
+      setMessage("");
+    } finally {
+      setSending(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 border-b p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+          onBack && /* @__PURE__ */ jsx("button", { className: "rounded px-1 hover:bg-muted lg:hidden", onClick: onBack, "aria-label": "Voltar \xE0 lista", children: "\u2190" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "#",
+            detail.number,
+            " \xB7 ",
+            KIND_LABEL[detail.kind],
+            " \xB7 aberta em ",
+            fmtDate(detail.createdAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("h2", { className: "mt-1 truncate text-base font-semibold", children: detail.subject || KIND_LABEL[detail.kind] })
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { variant: STATUS_TONE[detail.status], children: STATUS_LABEL[detail.status] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4 overflow-y-auto p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-3 text-sm whitespace-pre-wrap", children: detail.description }),
+      detail.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: detail.attachments.map((a) => /* @__PURE__ */ jsx(AttachmentCard, { att: a }, a.id)) }),
+      detail.messages.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: detail.messages.map((m) => /* @__PURE__ */ jsx("div", { className: m.authorKind === "team" ? "flex justify-start" : "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: `max-w-[85%] rounded-lg px-3 py-2 text-sm ${m.authorKind === "team" ? "bg-muted" : "bg-primary/10"}`, children: [
+        /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: m.body }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-right text-[10px] text-muted-foreground", children: fmtDate(m.createdAt) })
+      ] }) }, m.id)) }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx("ol", { className: "space-y-1 text-xs text-muted-foreground", children: detail.events.map((e) => /* @__PURE__ */ jsxs("li", { children: [
+        "\u2022 ",
+        eventLine(e.type, e.note),
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "opacity-60", children: [
+          "\xB7 ",
+          fmtDate(e.createdAt)
+        ] })
+      ] }, e.id)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-t p-3", children: canValidate(detail.status) ? reopening ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Textarea, { rows: 2, value: reopenReason, onChange: (e) => setReopenReason(e.target.value), placeholder: "Conte o que ainda n\xE3o ficou certo." }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setReopening(false), children: "Voltar" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", disabled: !reopenReason.trim(), onClick: () => void validate(false, reopenReason), children: "Enviar" })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setReopening(true), children: "Ainda n\xE3o resolveu" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => void validate(true), children: "Ficou bom" })
+    ] }) : canMessage(detail.status) ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+        /* @__PURE__ */ jsx(Textarea, { rows: 2, value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Escreva para a equipe\u2026", className: "flex-1" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", disabled: !message.trim() || sending, onClick: send, children: "Enviar" })
+      ] }),
+      canCancel(detail.status) && (confirmingCancel ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Cancelar esta solicita\xE7\xE3o?" }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmingCancel(false), children: "N\xE3o" }),
+        /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: () => {
+          setConfirmingCancel(false);
+          void cancel();
+        }, children: "Cancelar solicita\xE7\xE3o" })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmingCancel(true), children: "Cancelar solicita\xE7\xE3o" }) }))
+    ] }) : /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
+      "Esta solicita\xE7\xE3o est\xE1 ",
+      STATUS_LABEL[detail.status].toLowerCase(),
+      "."
+    ] }) })
+  ] });
+}
+function AttachmentCard({ att }) {
+  const [url, setUrl] = React.useState(null);
+  React.useEffect(() => {
+    let alive = true;
+    if ((att.contentType ?? "").startsWith("image/")) void signedUrl(att.storagePath).then((u) => {
+      if (alive) setUrl(u);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [att.storagePath, att.contentType]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-card p-2", children: [
+    url ? /* @__PURE__ */ jsx(Thumbnail, { src: url, alt: att.name, className: "h-12 w-12 rounded object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded bg-muted text-[10px] text-muted-foreground", children: "anexo" }),
+    /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+      /* @__PURE__ */ jsx("div", { className: "max-w-[10rem] truncate", children: att.name }),
+      att.sizeBytes != null && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: fmtSize(att.sizeBytes) })
+    ] })
+  ] });
+}
+function fmtDate(iso) {
+  try {
+    const d = new Date(iso);
+    const today = /* @__PURE__ */ new Date();
+    const sameDay = d.toDateString() === today.toDateString();
+    return sameDay ? d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }) : d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" }) + ", " + d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return iso;
+  }
+}
+function fmtSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+var FILTERS = ["waiting", "in_progress", "closed", "all"];
+function SupportRequestsPanel({ onAskDico, startNew, onOpenTicket }) {
+  const { requests, loadingList, scope, filter, selectedId } = useSupportStore();
+  const setScope = useSupportStore((s) => s.setScope);
+  const setFilter = useSupportStore((s) => s.setFilter);
+  const loadList = useSupportStore((s) => s.loadList);
+  const select = useSupportStore((s) => s.select);
+  const refreshUnread = useSupportStore((s) => s.refreshUnread);
+  const canSeeAll = useHasPermission("support.all", "read");
+  const [view, setView] = React.useState(startNew ? { t: "menu" } : { t: "list" });
+  React.useEffect(() => {
+    void loadList();
+    void refreshUnread();
+  }, [loadList, refreshUnread]);
+  const openDetail = (id) => {
+    if (onOpenTicket) {
+      onOpenTicket(id);
+      return;
+    }
+    void select(id);
+    setView({ t: "detail", id });
+  };
+  const backToList = () => {
+    void select(null);
+    setView({ t: "list" });
+  };
+  if (view.t === "menu") {
+    return /* @__PURE__ */ jsx(Section, { onBack: backToList, children: /* @__PURE__ */ jsx(SupportMenu, { onPickKind: (kind) => setView({ t: "form", kind }), onAskDico }) });
+  }
+  if (view.t === "form") {
+    return /* @__PURE__ */ jsx(
+      SupportRequestForm,
+      {
+        kind: view.kind,
+        onBack: () => setView({ t: "menu" }),
+        onDone: (res) => {
+          setView({ t: "created", number: res.number });
+          void refreshUnread();
+        }
+      }
+    );
+  }
+  if (view.t === "created") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3 p-8 text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-success-soft text-success-soft-foreground text-xl", children: "\u2713" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: "Recebemos sua solicita\xE7\xE3o" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "N\xFAmero ",
+        /* @__PURE__ */ jsxs("strong", { children: [
+          "#",
+          view.number
+        ] }),
+        ". Voc\xEA acompanha o andamento e conversa com a equipe aqui, e avisamos quando houver resposta."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: backToList, children: "Ver minhas solicita\xE7\xF5es" }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => setView({ t: "menu" }), children: "Abrir outra" })
+      ] })
+    ] });
+  }
+  if (view.t === "detail") {
+    return /* @__PURE__ */ jsx("div", { className: "h-full min-h-[22rem]", children: /* @__PURE__ */ jsx(SupportRequestDetail, { onBack: backToList }) });
+  }
+  const filterOptions = FILTERS.map((f) => ({ value: f, label: FILTER_LABEL[f] }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(SegmentedControl, { options: filterOptions, value: filter, onChange: (v) => setFilter(v) }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setView({ t: "menu" }), children: "Nova solicita\xE7\xE3o" })
+    ] }),
+    canSeeAll && /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        options: [{ value: "mine", label: "Minhas" }, { value: "all", label: "Toda a empresa" }],
+        value: scope,
+        onChange: (v) => setScope(v)
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-h-[18rem] flex-1 overflow-y-auto rounded-xl border bg-card", children: loadingList ? /* @__PURE__ */ jsx("div", { className: "space-y-2 p-3", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full" }, i)) }) : requests.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-sm text-muted-foreground", children: "Nenhuma solicita\xE7\xE3o por aqui ainda." }) : /* @__PURE__ */ jsx("ul", { className: "divide-y", children: requests.map((r) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(RequestCard, { req: r, active: selectedId === r.id, onClick: () => openDetail(r.id) }) }, r.id)) }) })
+  ] });
+}
+function Section({ children, onBack }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx("button", { onClick: onBack, className: "self-start text-sm text-muted-foreground hover:text-foreground", children: "\u2190 Voltar" }),
+    children
+  ] });
+}
+function RequestCard({ req, active, onClick }) {
+  return /* @__PURE__ */ jsxs("button", { onClick, className: `block w-full p-3 text-left transition-colors hover:bg-accent ${active ? "bg-accent" : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "#",
+        req.number,
+        " \xB7 ",
+        KIND_LABEL[req.kind]
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: shortTime(req.createdAt) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-sm font-medium", children: req.subject || KIND_LABEL[req.kind] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(Badge, { variant: STATUS_TONE[req.status], children: STATUS_LABEL[req.status] }) })
+  ] });
+}
+function shortTime(iso) {
+  try {
+    const d = new Date(iso);
+    const sameDay = d.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+    return sameDay ? d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }) : d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" });
+  } catch {
+    return "";
+  }
+}
+function go(path) {
+  if (typeof window !== "undefined") window.location.hash = path;
+}
+function ticketNo(n) {
+  return `#${String(n).padStart(4, "0")}`;
+}
+function TicketDetailPage({ id }) {
+  const detail = useSupportStore((s) => s.detail);
+  const loading = useSupportStore((s) => s.loadingDetail);
+  const selectedId = useSupportStore((s) => s.selectedId);
+  const select = useSupportStore((s) => s.select);
+  const sendMessage = useSupportStore((s) => s.sendMessage);
+  const cancel = useSupportStore((s) => s.cancel);
+  const validate = useSupportStore((s) => s.validate);
+  const user = useAuth().user;
+  const [message, setMessage] = React.useState("");
+  const [sending, setSending] = React.useState(false);
+  const [confirmingCancel, setConfirmingCancel] = React.useState(false);
+  const [reopening, setReopening] = React.useState(false);
+  const [reopenReason, setReopenReason] = React.useState("");
+  const [advanced, setAdvanced] = React.useState(false);
+  React.useEffect(() => {
+    void select(id);
+  }, [id, select]);
+  React.useEffect(() => {
+    setMessage("");
+    setConfirmingCancel(false);
+    setReopening(false);
+    setReopenReason("");
+  }, [detail?.id]);
+  const ready = detail && detail.id === id;
+  const attempted = selectedId === id && !loading;
+  async function send() {
+    if (!message.trim()) return;
+    setSending(true);
+    try {
+      await sendMessage(message);
+      setMessage("");
+    } finally {
+      setSending(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(
+      SubpageHeader,
+      {
+        title: ready ? `Ticket ${ticketNo(detail.number)}` : "Ticket",
+        parentLabel: "Suporte",
+        onBack: () => go("/support"),
+        titleTrailing: ready ? /* @__PURE__ */ jsx(Badge, { variant: STATUS_TONE[detail.status], children: STATUS_LABEL[detail.status] }) : void 0
+      }
+    ),
+    !ready && !attempted ? /* @__PURE__ */ jsx(TicketSkeleton, {}) : !ready ? /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-10 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Solicita\xE7\xE3o n\xE3o encontrada" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Ela pode ter sido removida, ou pertencer a outra conta." }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => go("/support"), children: "Voltar para o Suporte" }) })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-2 lg:items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("section", { className: "rounded-xl border bg-card p-5", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold leading-snug", children: detail.subject || KIND_LABEL[detail.kind] }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+            KIND_LABEL[detail.kind],
+            " \xB7 aberta em ",
+            fmtDateTime(detail.createdAt)
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Descri\xE7\xE3o" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1.5 whitespace-pre-wrap text-sm leading-relaxed", children: detail.description })
+          ] }),
+          detail.attachments.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Anexos" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: detail.attachments.map((a) => /* @__PURE__ */ jsx(AttachmentCard2, { att: a }, a.id)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-5", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Informa\xE7\xF5es" }),
+          /* @__PURE__ */ jsxs("dl", { className: "mt-3 divide-y divide-border/60 text-sm", children: [
+            /* @__PURE__ */ jsx(Row2, { label: "N\xFAmero", children: ticketNo(detail.number) }),
+            /* @__PURE__ */ jsx(Row2, { label: "Status", children: /* @__PURE__ */ jsx(Badge, { variant: STATUS_TONE[detail.status], children: STATUS_LABEL[detail.status] }) }),
+            /* @__PURE__ */ jsx(Row2, { label: "Tipo", children: KIND_LABEL[detail.kind] }),
+            /* @__PURE__ */ jsx(Row2, { label: "Solicitante", children: detail.createdBy === user?.id ? user?.fullName || user?.email || "Voc\xEA" : "\u2014" }),
+            /* @__PURE__ */ jsx(Row2, { label: "Respons\xE1vel", children: "Equipe de Suporte" }),
+            /* @__PURE__ */ jsx(Row2, { label: "Aberta em", children: fmtDateTime(detail.createdAt) }),
+            /* @__PURE__ */ jsx(Row2, { label: "Atualizada", children: fmtDateTime(detail.updatedAt) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setAdvanced((v) => !v),
+              className: "mt-3 flex w-full items-center justify-between rounded-md border-t pt-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+              "aria-expanded": advanced,
+              children: [
+                /* @__PURE__ */ jsx("span", { children: "Informa\xE7\xF5es avan\xE7adas" }),
+                /* @__PURE__ */ jsx(Chevron, { className: `h-3.5 w-3.5 transition-transform ${advanced ? "rotate-180" : ""}` })
+              ]
+            }
+          ),
+          advanced && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs", children: [
+            /* @__PURE__ */ jsxs("dl", { className: "divide-y divide-border/60", children: [
+              detail.route && /* @__PURE__ */ jsx(Row2, { label: "Tela", children: detail.route }),
+              /* @__PURE__ */ jsx(Row2, { label: "ID", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] break-all", children: detail.id }) })
+            ] }),
+            /* @__PURE__ */ jsx(ActivityTrail, { snapshot: detail.screenSnapshot })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("section", { className: "rounded-xl border bg-card p-5", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Conversa com a equipe" }),
+          detail.messages.length === 0 ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Ainda n\xE3o h\xE1 mensagens. Escreva abaixo para falar com a equipe." }) : /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: detail.messages.map((m) => /* @__PURE__ */ jsx("div", { className: m.authorKind === "team" ? "flex justify-start" : "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: `max-w-[85%] rounded-lg px-3 py-2 text-sm ${m.authorKind === "team" ? "bg-muted" : "bg-primary/10"}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: m.body }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 text-right text-[10px] text-muted-foreground", children: fmtDate2(m.createdAt) })
+          ] }) }, m.id)) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-3", children: canValidate(detail.status) ? reopening ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Textarea, { rows: 2, value: reopenReason, onChange: (e) => setReopenReason(e.target.value), placeholder: "Conte o que ainda n\xE3o ficou certo." }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setReopening(false), children: "Voltar" }),
+              /* @__PURE__ */ jsx(Button, { size: "sm", disabled: !reopenReason.trim(), onClick: () => void validate(false, reopenReason), children: "Enviar" })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setReopening(true), children: "Ainda n\xE3o resolveu" }),
+            /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => void validate(true), children: "Ficou bom" })
+          ] }) : canMessage(detail.status) ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx(Textarea, { rows: 2, value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Escreva para a equipe\u2026", className: "flex-1" }),
+              /* @__PURE__ */ jsx(Button, { size: "sm", disabled: !message.trim() || sending, onClick: send, children: "Enviar" })
+            ] }),
+            canCancel(detail.status) && (confirmingCancel ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Cancelar esta solicita\xE7\xE3o?" }),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmingCancel(false), children: "N\xE3o" }),
+              /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", onClick: () => {
+                setConfirmingCancel(false);
+                void cancel();
+              }, children: "Cancelar solicita\xE7\xE3o" })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmingCancel(true), children: "Cancelar solicita\xE7\xE3o" }) }))
+          ] }) : /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
+            "Esta solicita\xE7\xE3o est\xE1 ",
+            STATUS_LABEL[detail.status].toLowerCase(),
+            "."
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-5", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Atividades" }),
+          detail.events.length === 0 ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Sem atividades." }) : /* @__PURE__ */ jsx("ol", { className: "mt-3 space-y-2.5", children: detail.events.map((e) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { children: eventLine(e.type, e.note) }),
+              /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: fmtDate2(e.createdAt) })
+            ] })
+          ] }, e.id)) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function TicketSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-2 lg:items-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-2/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-3 w-1/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-16 w-full" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-card p-5 space-y-2.5", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-28 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "mt-3 h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-card p-5 space-y-2.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-5/6" }, i)) })
+    ] })
+  ] });
+}
+function Row2({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "min-w-0 text-right font-medium", children })
+  ] });
+}
+function Chevron({ className }) {
+  const C = ICON_MAP.ChevronDown;
+  return C ? /* @__PURE__ */ jsx(C, { className }) : /* @__PURE__ */ jsx("span", { className, children: "\u25BE" });
+}
+function ActivityTrail({ snapshot: snapshot2 }) {
+  const activity = snapshot2?.activity;
+  if (Array.isArray(activity) && activity.length) {
+    const items = activity.filter((e) => !!e && typeof e === "object" && typeof e.label === "string");
+    if (!items.length) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t pt-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-muted-foreground", children: "Trilha at\xE9 o relato" }),
+      /* @__PURE__ */ jsx("ol", { className: "space-y-1", children: items.map((e, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-[3px] text-muted-foreground/50", children: e.kind === "action" ? "\u203A" : "\u2022" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0", children: e.kind === "action" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          "clicou ",
+          /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            '"',
+            e.label,
+            '"'
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: e.label }),
+          e.path && /* @__PURE__ */ jsx("span", { className: "ml-1 font-mono text-[10px] text-muted-foreground", children: e.path })
+        ] }) })
+      ] }, i)) })
+    ] });
+  }
+  const recent = snapshot2?.recentScreens;
+  if (!Array.isArray(recent) || recent.length === 0) return null;
+  const labels = recent.map((r) => r && typeof r === "object" ? r.label : void 0).filter((l) => !!l);
+  if (!labels.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t pt-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 text-muted-foreground", children: "Telas recentes" }),
+    /* @__PURE__ */ jsx("div", { children: labels.join(" \u2192 ") })
+  ] });
+}
+function AttachmentCard2({ att }) {
+  const [url, setUrl] = React.useState(null);
+  React.useEffect(() => {
+    let alive = true;
+    if ((att.contentType ?? "").startsWith("image/")) void signedUrl(att.storagePath).then((u) => {
+      if (alive) setUrl(u);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [att.storagePath, att.contentType]);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: url ?? void 0,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "flex items-center gap-2 rounded-lg border bg-card p-2 transition-colors hover:bg-muted",
+      children: [
+        url ? /* @__PURE__ */ jsx(Thumbnail, { src: url, alt: att.name, className: "h-12 w-12 rounded object-cover" }) : /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded bg-muted text-[10px] text-muted-foreground", children: "anexo" }),
+        /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+          /* @__PURE__ */ jsx("div", { className: "max-w-[10rem] truncate", children: att.name }),
+          att.sizeBytes != null && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: fmtSize2(att.sizeBytes) })
+        ] })
+      ]
+    }
+  );
+}
+function fmtDate2(iso) {
+  try {
+    const d = new Date(iso);
+    const sameDay = d.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+    return sameDay ? d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" }) : d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" }) + ", " + d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return iso;
+  }
+}
+function fmtDateTime(iso) {
+  try {
+    return new Date(iso).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
+  } catch {
+    return iso;
+  }
+}
+function fmtSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function go2(path) {
+  if (typeof window !== "undefined") window.location.hash = path;
+}
+function useTicketRoute() {
+  const read = () => {
+    if (typeof window === "undefined") return null;
+    const m = window.location.hash.replace(/^#/, "").match(/^\/support\/ticket\/([^/?]+)/);
+    return m ? decodeURIComponent(m[1]) : null;
+  };
+  const [id, setId] = React.useState(read);
+  React.useEffect(() => {
+    const on = () => setId(read());
+    window.addEventListener("hashchange", on);
+    return () => window.removeEventListener("hashchange", on);
+  }, []);
+  return id;
+}
+function SupportCenter({ content }) {
+  const ticketId = useTicketRoute();
+  return ticketId ? /* @__PURE__ */ jsx(TicketDetailPage, { id: ticketId }) : /* @__PURE__ */ jsx(SupportCenterHome, { content });
+}
+function Icon({ name, className }) {
+  const C = ICON_MAP[name];
+  return C ? /* @__PURE__ */ jsx(C, { className }) : null;
+}
+function SupportCenterHome({ content }) {
+  const [query, setQuery] = React.useState("");
+  const [requestsOpen, setRequestsOpen] = React.useState(false);
+  const [startNew, setStartNew] = React.useState(false);
+  const setChatOpen = useChatStore((s) => s.setOpen);
+  const queuePrompt = useChatStore((s) => s.queuePrompt);
+  function askDico() {
+    setChatOpen(true);
+    const q2 = query.trim();
+    if (q2) queuePrompt(q2);
+  }
+  const q = query.trim().toLowerCase();
+  const faq = q ? content.faq.filter((f) => [f.question, f.answer, f.category].filter(Boolean).some((s) => s.toLowerCase().includes(q))) : content.faq;
+  function openRequests(forNew) {
+    setStartNew(forNew);
+    setRequestsOpen(true);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border bg-card p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "Sparkles", className: "h-4 w-4" }),
+        " Dico \xB7 central de ajuda"
+      ] }),
+      /* @__PURE__ */ jsx("h1", { className: "mt-1 text-2xl font-semibold tracking-tight", children: "Como podemos ajudar?" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Pergunte ao Dico ou busque na central de ajuda." }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: "Search", className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") askDico();
+              },
+              placeholder: "Pergunte ou busque\u2026 ex.: como recebo pagamentos?",
+              className: "pl-9"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { onClick: askDico, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "Sparkles", className: "mr-1.5 h-4 w-4" }),
+          " Perguntar ao Dico"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-[1fr_20rem] lg:items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-muted-foreground", children: "Perguntas frequentes e v\xEDdeos" }),
+        faq.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-6 text-center text-sm text-muted-foreground", children: [
+          'Nada encontrado para "',
+          query,
+          '".',
+          /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: askDico, children: "Perguntar ao Dico" }) })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y rounded-xl border bg-card", children: faq.map((item) => /* @__PURE__ */ jsx(FaqRow, { item }, item.id)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(StatusCard, { components: content.statusComponents }),
+        /* @__PURE__ */ jsx(PlanCard, {}),
+        /* @__PURE__ */ jsx(WhatsNewCard, { items: content.whatsNew }),
+        /* @__PURE__ */ jsx(RequestsCard, { onOpen: () => openRequests(false), onNew: () => openRequests(true) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ModalTask, { open: requestsOpen, title: "Minhas solicita\xE7\xF5es", width: "min(44rem, 94vw)", onClose: () => setRequestsOpen(false), children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(
+      SupportRequestsPanel,
+      {
+        startNew,
+        onAskDico: () => {
+          setRequestsOpen(false);
+          setChatOpen(true);
+        },
+        onOpenTicket: (id) => {
+          setRequestsOpen(false);
+          go2(`/support/ticket/${id}`);
+        }
+      }
+    ) }) })
+  ] });
+}
+function FaqRow({ item }) {
+  const [open, setOpen] = React.useState(false);
+  const [playing, setPlaying] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsxs("button", { onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-3 text-left", children: [
+      item.videoUrl ? /* @__PURE__ */ jsx(Icon, { name: "PlayCircle", className: "h-5 w-5 shrink-0 text-muted-foreground" }) : /* @__PURE__ */ jsx(Icon, { name: "HelpCircle", className: "h-5 w-5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium", children: item.question }),
+      /* @__PURE__ */ jsx(Icon, { name: "ChevronDown", className: `h-4 w-4 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-180" : ""}` })
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "mt-2 pl-8 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap", children: item.answer }),
+      item.videoUrl && (playing ? /* @__PURE__ */ jsx("div", { className: "mt-3 aspect-video w-full max-w-md overflow-hidden rounded-lg border", children: /\.(mp4|webm)(\?|$)/.test(item.videoUrl) ? /* @__PURE__ */ jsx("video", { src: item.videoUrl, controls: true, autoPlay: true, className: "h-full w-full" }) : /* @__PURE__ */ jsx("iframe", { src: toEmbedUrl(item.videoUrl), className: "h-full w-full", allow: "autoplay; fullscreen", allowFullScreen: true, title: item.question }) }) : /* @__PURE__ */ jsxs("button", { onClick: () => setPlaying(true), className: "mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "PlayCircle", className: "h-4 w-4" }),
+        " Assistir ao v\xEDdeo"
+      ] }))
+    ] })
+  ] });
+}
+function Card({ title, icon, action, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border bg-card p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold", children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, className: "h-4 w-4 text-muted-foreground" }),
+        " ",
+        title
+      ] }),
+      action
+    ] }),
+    children
+  ] });
+}
+function StatusCard({ components }) {
+  const conn = useConnectivity();
+  const ok = conn.online;
+  return /* @__PURE__ */ jsxs(Card, { title: "Status", icon: "Activity", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: `h-2.5 w-2.5 rounded-full ${ok ? "bg-success" : "bg-warning"}` }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm", children: ok ? "Todos os sistemas operacionais" : "Sem conex\xE3o com o servidor" })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-1.5", children: components.map((c) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: c.label }),
+      /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 ${ok ? "text-success" : "text-warning"}`, children: [
+        /* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 rounded-full ${ok ? "bg-success" : "bg-warning"}` }),
+        ok ? "Operacional" : "Inst\xE1vel"
+      ] })
+    ] }, c.id)) })
+  ] });
+}
+function PlanCard() {
+  const org = useTenantOptional()?.org;
+  const plan = org?.plan;
+  const label = plan ? plan.charAt(0).toUpperCase() + plan.slice(1) : null;
+  const paid = !!plan && !/free|trial|gratis|grátis/i.test(plan);
+  return /* @__PURE__ */ jsx(Card, { title: "Seu plano", icon: "CreditCard", action: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => go2("/settings"), children: "Gerenciar" }), children: label ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Badge, { variant: paid ? "success" : "secondary", children: label }),
+    org?.name && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: org.name })
+  ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Plano n\xE3o identificado." }) });
+}
+function WhatsNewCard({ items }) {
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx(Card, { title: "Novidades", icon: "Rocket", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2.5", children: items.slice(0, 4).map((n) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: n.title }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: fmtDate3(n.date) })
+    ] }),
+    n.note && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: n.note })
+  ] }, n.id)) }) });
+}
+function RequestsCard({ onOpen, onNew }) {
+  const requests = useSupportStore((s) => s.requests);
+  const unread = useSupportStore((s) => s.unread);
+  const loadList = useSupportStore((s) => s.loadList);
+  const refreshUnread = useSupportStore((s) => s.refreshUnread);
+  React.useEffect(() => {
+    void loadList();
+    void refreshUnread();
+  }, [loadList, refreshUnread]);
+  const recent = requests.slice(0, 3);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      title: "Minhas solicita\xE7\xF5es",
+      icon: "Inbox",
+      action: unread > 0 ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-warning px-1.5 text-[10px] font-semibold text-warning-foreground", children: unread }) : void 0,
+      children: [
+        recent.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Voc\xEA ainda n\xE3o abriu nenhuma solicita\xE7\xE3o." }) : /* @__PURE__ */ jsx("ul", { className: "mb-3 space-y-1.5", children: recent.map((r) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { onClick: () => go2(`/support/ticket/${r.id}`), className: "flex w-full items-center justify-between gap-2 text-left hover:text-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate text-xs", children: [
+            "#",
+            r.number,
+            " ",
+            r.subject || KIND_LABEL[r.kind]
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { variant: STATUS_TONE[r.status], children: STATUS_LABEL[r.status] })
+        ] }) }, r.id)) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", className: "flex-1", onClick: onNew, children: "Nova solicita\xE7\xE3o" }),
+          recent.length > 0 && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: onOpen, children: "Ver todas" })
+        ] })
+      ]
+    }
+  );
+}
+function fmtDate3(iso) {
+  try {
+    return new Date(iso).toLocaleDateString("pt-BR", { day: "2-digit", month: "short" });
+  } catch {
+    return iso;
+  }
+}
+var SupportCenter_default = SupportCenter;
+
+export { SupportCenter, SupportCenter_default as default };
+//# sourceMappingURL=SupportCenter-Z2HEPJGD.js.map
+//# sourceMappingURL=SupportCenter-Z2HEPJGD.js.map