import { jsxs as r, jsx as t, Fragment as Qe } from "react/jsx-runtime";
import { useState as l, useRef as Z, useCallback as b, useEffect as ee } from "react";
import { useNavigate as Xe, useSearchParams as We } from "react-router-dom";
import { useTranslation as _e } from "react-i18next";
import { a0 as U, a1 as we, a2 as de, i as ge, a as Ye, W as Je, B as Ze } from "./index-CwSaRXXg.js";
import { ArrowLeft as ye, Headset as et, Trash2 as fe, Info as tt, ExternalLink as rt, AlertTriangle as xe, Check as st, Building2 as ve, Bug as ke, Lightbulb as at, Sparkles as nt, AppWindow as ot, MessageSquare as ct, HelpCircle as it, Loader2 as lt, Send as dt, Paperclip as mt, X as pt, Monitor as ut, Camera as Ne, Image as ht, FileText as gt, File as ft } from "lucide-react";
import { S as xt } from "./ScreenshotAnnotator-DEuQRcin.js";
const vt = 10 * 1024 * 1024, Se = [
  ".jpg",
  ".jpeg",
  ".png",
  ".gif",
  ".pdf",
  ".doc",
  ".docx",
  ".xls",
  ".xlsx",
  ".txt",
  ".log",
  ".zip"
];
function bt({
  draftId: s,
  effectiveTenant: g
}) {
  const [L, q] = l(null), [x, te] = l(""), [$, re] = l(""), [y, se] = l("Medium"), [me, A] = l(!1), [pe, k] = l(null), [N, S] = l(null), [w, M] = l(!0), [C, d] = l(!0), [F, O] = l(!0), [h, ae] = l(null), [T, ne] = l(null), [K, j] = l([]), [H, G] = l(!1), m = Z(null), [V, D] = l(!1), [oe, I] = l(!1), ce = Z(null), Q = Z(!1), ie = Z(!1), E = Z([]), R = b((a) => ({
    url: a.url,
    timestamp: a.timestamp.toISOString(),
    recentErrors: a.recentErrors.map((o) => ({
      ...o,
      timestamp: o.timestamp.toISOString()
    })),
    browserInfo: a.browserInfo
  }), []), v = b((a) => ({
    url: a.url,
    timestamp: new Date(a.timestamp),
    recentErrors: a.recentErrors.map((o) => ({
      ...o,
      timestamp: new Date(o.timestamp)
    })),
    browserInfo: a.browserInfo
  }), []), X = b((a) => new Promise((o, p) => {
    const c = new FileReader();
    c.onload = () => {
      o({
        name: a.name,
        type: a.type,
        size: a.size,
        data: c.result
      });
    }, c.onerror = p, c.readAsDataURL(a);
  }), []), B = b((a) => {
    const o = a.data.split(","), p = /:(.*?);/.exec(o[0])?.[1] || a.type, c = atob(o[1]);
    let u = c.length;
    const P = new Uint8Array(u);
    for (; u--; )
      P[u] = c.charCodeAt(u);
    return new window.File([P], a.name, { type: p });
  }, []), ue = b(
    async (a) => Promise.all(a.map(X)),
    [X]
  ), W = b(() => {
    if (!s) return !1;
    const a = U.updateDraft(s, {
      type: L,
      title: x,
      description: $,
      priority: y,
      includeScreenshot: w,
      includeErrorLogs: C,
      screenshot: h || void 0,
      errorContext: N ? R(N) : void 0,
      attachments: E.current.length > 0 ? E.current : void 0,
      tenantId: g?.id,
      tenantSlug: g?.slug,
      tenantName: g?.name
    });
    return a.success ? (ie.current = !1, D(!0), I(!1), setTimeout(() => D(!1), 2e3)) : (I(!0), console.error("[CreateSupportTicketPage] Failed to save draft!")), a.success;
  }, [
    s,
    L,
    x,
    $,
    y,
    w,
    C,
    h,
    N,
    R,
    g
  ]), z = b((a) => {
    const o = [], p = [];
    a.forEach((c) => {
      const u = "." + c.name.split(".").pop()?.toLowerCase();
      if (!Se.includes(u)) {
        p.push(`${c.name}: file type not allowed`);
        return;
      }
      if (c.size > vt) {
        p.push(`${c.name}: file too large`);
        return;
      }
      o.push(c);
    }), p.length > 0 ? k(p.join(`
`)) : k(null), o.length > 0 && j((c) => [...c, ...o]);
  }, []), he = b((a) => {
    j((o) => o.filter((p, c) => c !== a));
  }, []), _ = b(() => {
    const a = we.captureBrowserInfo();
    return {
      sourceUrl: window.location.href,
      browser: {
        name: a.browser,
        version: a.browserVersion,
        language: a.language
      },
      os: {
        name: a.os,
        version: a.osVersion
      },
      device: {
        type: a.deviceType,
        screenResolution: a.screenResolution
      },
      recentErrors: C ? N?.recentErrors.slice(0, 5).map((o) => ({
        message: o.message,
        stack: o.stack,
        component: o.component,
        timestamp: o.timestamp.toISOString()
      })) ?? [] : []
    };
  }, [N, C]), f = b(() => {
    s && U.deleteDraft(s), de.clearContext();
  }, [s]), Y = b(
    async () => {
      if (!L || !x.trim() || !$.trim())
        return null;
      try {
        A(!0), k(null);
        const a = _(), o = g ? { "X-Tenant-Slug": g.slug } : {}, p = await ge.post(
          "/api/support/my-tickets",
          {
            title: x.trim(),
            description: $.trim(),
            type: L,
            priority: y,
            clientContext: a
          },
          { headers: o }
        );
        if (G(!0), w && h)
          try {
            const u = await (await fetch(h)).blob(), P = new globalThis.File([u], "screenshot.png", {
              type: "image/png"
            }), J = new FormData();
            J.append("file", P), await ge.post(
              `/api/support/my-tickets/${p.id}/attachments`,
              J,
              {
                headers: { "Content-Type": "multipart/form-data", ...o }
              }
            );
          } catch (c) {
            console.error("Failed to upload screenshot:", c);
          }
        for (const c of K)
          try {
            const u = new FormData();
            u.append("file", c), await ge.post(
              `/api/support/my-tickets/${p.id}/attachments`,
              u,
              {
                headers: { "Content-Type": "multipart/form-data", ...o }
              }
            );
          } catch (u) {
            console.error("Failed to upload file:", c.name, u);
          }
        return f(), p;
      } catch {
        return k("An error occurred"), null;
      } finally {
        A(!1), G(!1);
      }
    },
    [
      L,
      x,
      $,
      y,
      _,
      g,
      w,
      h,
      K,
      f
    ]
  );
  return {
    selectedType: L,
    setSelectedType: q,
    title: x,
    setTitle: te,
    description: $,
    setDescription: re,
    priority: y,
    setPriority: se,
    submitting: me,
    error: pe,
    setError: k,
    errorContext: N,
    setErrorContext: S,
    includeScreenshot: w,
    setIncludeScreenshot: M,
    includeErrorLogs: C,
    setIncludeErrorLogs: d,
    includeBrowserInfo: F,
    setIncludeBrowserInfo: O,
    annotatedScreenshot: h,
    setAnnotatedScreenshot: ae,
    browserInfo: T,
    setBrowserInfo: ne,
    pendingFiles: K,
    setPendingFiles: j,
    uploadingFiles: H,
    fileInputRef: m,
    showDraftSaved: V,
    setShowDraftSaved: D,
    saveFailed: oe,
    setSaveFailed: I,
    autoSaveTimerRef: ce,
    isInitialLoadCompleteRef: Q,
    hasUnsavedChangesRef: ie,
    draftAttachmentsRef: E,
    errorContextToDraft: R,
    draftToErrorContext: v,
    fileToAttachment: X,
    attachmentToFile: B,
    filesToAttachments: ue,
    saveDraftNow: W,
    processFiles: z,
    removeFile: he,
    buildClientContext: _,
    cleanupAfterSubmit: f,
    submitTicket: Y
  };
}
const be = [
  { value: "Bug", labelKey: "types.Bug", descriptionKey: "typeDescriptions.Bug", icon: ke },
  { value: "FeatureRequest", labelKey: "types.FeatureRequest", descriptionKey: "typeDescriptions.FeatureRequest", icon: at },
  { value: "Suggestion", labelKey: "types.Suggestion", descriptionKey: "typeDescriptions.Suggestion", icon: nt },
  { value: "ApplicationRequest", labelKey: "types.ApplicationRequest", descriptionKey: "typeDescriptions.ApplicationRequest", icon: ot },
  { value: "Support", labelKey: "types.Support", descriptionKey: "typeDescriptions.Support", icon: ct },
  { value: "Question", labelKey: "types.Question", descriptionKey: "typeDescriptions.Question", icon: it }
], yt = [
  { value: "Low", labelKey: "priorities.Low", descriptionKey: "priorityDescriptions.Low" },
  { value: "Medium", labelKey: "priorities.Medium", descriptionKey: "priorityDescriptions.Medium" },
  { value: "High", labelKey: "priorities.High", descriptionKey: "priorityDescriptions.High" },
  { value: "Critical", labelKey: "priorities.Critical", descriptionKey: "priorityDescriptions.Critical" }
];
function Dt() {
  const { t: s } = _e(["support", "common"]), g = Xe(), [L] = We(), { currentTenant: q, userTenants: x, isGlobalView: te } = Ye(), { isGlpi: $, glpiBaseUrl: re } = Je(), [y, se] = l(null), [me, A] = l(!1), [pe, k] = l(!1), N = q ?? y;
  ee(() => {
    !q && te && x.length > 0 && A(!0);
  }, [q, te, x.length]);
  const [S, w] = l(1), [M, C] = l(!1), d = L.get("draft"), {
    selectedType: F,
    setSelectedType: O,
    title: h,
    setTitle: ae,
    description: T,
    setDescription: ne,
    priority: K,
    setPriority: j,
    submitting: H,
    error: G,
    errorContext: m,
    setErrorContext: V,
    includeScreenshot: D,
    setIncludeScreenshot: oe,
    includeErrorLogs: I,
    setIncludeErrorLogs: ce,
    includeBrowserInfo: Q,
    setIncludeBrowserInfo: ie,
    annotatedScreenshot: E,
    setAnnotatedScreenshot: R,
    browserInfo: v,
    setBrowserInfo: X,
    pendingFiles: B,
    setPendingFiles: ue,
    uploadingFiles: W,
    fileInputRef: z,
    showDraftSaved: he,
    saveFailed: _,
    autoSaveTimerRef: f,
    isInitialLoadCompleteRef: Y,
    hasUnsavedChangesRef: a,
    draftAttachmentsRef: o,
    draftToErrorContext: p,
    attachmentToFile: c,
    filesToAttachments: u,
    saveDraftNow: P,
    processFiles: J,
    removeFile: Ce,
    submitTicket: Fe
  } = bt({
    draftId: d,
    effectiveTenant: N
  }), Te = (e) => {
    if (!e) return { hasType: !1, hasScreenshot: !1, hasErrorContext: !1 };
    if (ae(e.title), ne(e.description), j(e.priority), oe(e.includeScreenshot), ce(e.includeErrorLogs), e.type && (O(e.type), w(2)), e.screenshot && R(e.screenshot), e.errorContext && V(p(e.errorContext)), e.attachments?.length) {
      const n = e.attachments.map(c);
      ue(n), o.current = e.attachments;
    }
    if (e.tenantId && e.tenantSlug) {
      const n = x.find((i) => i.id === e.tenantId);
      n && se(n);
    }
    return {
      hasType: !!e.type,
      hasScreenshot: !!e.screenshot,
      hasErrorContext: !!e.errorContext
    };
  }, De = (e) => {
    const n = de.loadContext();
    n && (e.hasErrorContext || V(n), !e.hasScreenshot && n.screenshot && R(n.screenshot), n.recentErrors.length > 0 && !e.hasType && (O("Bug"), j("High")));
  };
  ee(() => {
    const e = d ? Te(U.getDraft(d)) : { hasType: !1, hasScreenshot: !1, hasErrorContext: !1 };
    De(e);
    const n = we.captureBrowserInfo();
    return X(n), requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        Y.current = !0;
      });
    }), () => {
      de.clearContext();
    };
  }, [d, p, c]), ee(() => {
    if (B.length === 0) {
      o.current = [];
      return;
    }
    u(B).then((e) => {
      o.current = e;
    }).catch((e) => {
      console.error(
        "[CreateSupportTicketPage] Failed to convert files to attachments:",
        e
      );
    });
  }, [B, u]), ee(() => {
    if (!(!Y.current || !d))
      return a.current = !0, f.current && clearTimeout(f.current), f.current = setTimeout(() => {
        P();
      }, 1e3), () => {
        f.current && clearTimeout(f.current);
      };
  }, [
    F,
    h,
    T,
    K,
    D,
    I,
    Q,
    E,
    m,
    B,
    d,
    P
  ]), ee(() => {
    const e = () => {
      a.current && d && P();
    };
    return window.addEventListener("beforeunload", e), () => {
      window.removeEventListener("beforeunload", e), a.current && d && Y.current && U.updateDraft(d, {
        type: F,
        title: h,
        description: T,
        priority: K,
        includeScreenshot: D,
        includeErrorLogs: I,
        screenshot: E || void 0,
        errorContext: m ? {
          url: m.url,
          timestamp: m.timestamp.toISOString(),
          recentErrors: m.recentErrors.map((n) => ({
            ...n,
            timestamp: n.timestamp.toISOString()
          })),
          browserInfo: m.browserInfo
        } : void 0,
        attachments: o.current.length > 0 ? o.current : void 0
      });
    };
  }, [
    d,
    F,
    h,
    T,
    K,
    D,
    I,
    E,
    m,
    P
  ]);
  const Ie = (e) => {
    R(e);
  }, Ee = async () => {
    try {
      const e = await de.captureContext();
      e.screenshot && (R(e.screenshot), V(e));
    } catch (e) {
      console.error("[CreateSupportTicketPage] Error recapturing screenshot:", e);
    }
  }, Pe = () => {
    d && (f.current && (clearTimeout(f.current), f.current = null), U.deleteDraft(d)), g("/support/my-tickets?tab=submitted");
  }, Le = (e) => {
    const n = Array.from(e.target.files || []);
    J(n), z.current && (z.current.value = "");
  }, $e = (e) => {
    e.preventDefault(), e.stopPropagation();
  }, Ae = (e) => {
    e.preventDefault(), e.stopPropagation(), C(!0);
  }, Ke = (e) => {
    e.preventDefault(), e.stopPropagation();
    const n = e.currentTarget.getBoundingClientRect(), i = e.clientX, le = e.clientY;
    (i < n.left || i > n.right || le < n.top || le > n.bottom) && C(!1);
  }, Re = (e) => {
    e.preventDefault(), e.stopPropagation(), C(!1);
    const n = Array.from(e.dataTransfer.files);
    n.length > 0 && J(n);
  }, Be = (e) => e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`, je = (e) => {
    const n = e.split(".").pop()?.toLowerCase();
    return ["jpg", "jpeg", "png", "gif"].includes(n || "") ? ht : ["pdf", "doc", "docx", "txt"].includes(n || "") ? gt : ft;
  }, ze = async () => {
    if (!F || !h.trim() || !T.trim()) return;
    if (!N) {
      A(!0);
      return;
    }
    const e = await Fe();
    e && g(`/support/my-tickets/${e.id}?tab=submitted`);
  }, qe = () => /* @__PURE__ */ r("div", { className: "space-y-4", children: [
    /* @__PURE__ */ t("h2", { className: "text-lg font-semibold mb-4", children: s("tickets.createFlow.selectType") }),
    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: be.map((e) => /* @__PURE__ */ t(
      "button",
      {
        onClick: () => {
          O(e.value), w(2);
        },
        className: `card p-4 text-left hover:shadow-md transition-shadow ${F === e.value ? "ring-2 ring-[var(--color-primary-600)]" : ""}`,
        children: /* @__PURE__ */ r("div", { className: "flex items-start gap-4", children: [
          /* @__PURE__ */ t("div", { className: "p-3 rounded-lg bg-[var(--bg-secondary)]", children: /* @__PURE__ */ t(e.icon, { className: "w-6 h-6" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ t("h3", { className: "font-medium", children: s(`tickets.${e.labelKey}`) }),
            /* @__PURE__ */ t("p", { className: "text-sm text-[var(--text-secondary)]", children: s(`tickets.${e.descriptionKey}`, e.value) })
          ] })
        ] })
      },
      e.value
    )) })
  ] }), Me = () => v ? /* @__PURE__ */ r("div", { className: "card p-4 bg-[var(--bg-secondary)]", children: [
    /* @__PURE__ */ r("div", { className: "flex items-center justify-between mb-4", children: [
      /* @__PURE__ */ r("h3", { className: "font-medium flex items-center gap-2", children: [
        /* @__PURE__ */ t(ut, { className: "w-5 h-5 text-[var(--color-primary-600)]" }),
        s("tickets.create.systemInfo", "System Information")
      ] }),
      /* @__PURE__ */ r("label", { className: "flex items-center gap-2 cursor-pointer", children: [
        /* @__PURE__ */ t(
          "input",
          {
            type: "checkbox",
            checked: Q,
            onChange: (e) => ie(e.target.checked),
            className: "rounded border-[var(--border-color)]"
          }
        ),
        /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)]", children: s("tickets.create.includeSystemInfo", "Include in ticket") })
      ] })
    ] }),
    /* @__PURE__ */ r("div", { className: `grid grid-cols-2 md:grid-cols-3 gap-3 text-sm ${Q ? "" : "opacity-50"}`, children: [
      /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-primary)] rounded-lg", children: [
        /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)] block", children: s("tickets.create.browser", "Browser") }),
        /* @__PURE__ */ r("span", { className: "font-medium", children: [
          v.browser,
          " ",
          v.browserVersion
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-primary)] rounded-lg", children: [
        /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)] block", children: s("tickets.create.os", "OS") }),
        /* @__PURE__ */ r("span", { className: "font-medium", children: [
          v.os,
          " ",
          v.osVersion
        ] })
      ] }),
      /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-primary)] rounded-lg", children: [
        /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)] block", children: s("tickets.create.device", "Device") }),
        /* @__PURE__ */ t("span", { className: "font-medium", children: v.deviceType })
      ] }),
      /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-primary)] rounded-lg", children: [
        /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)] block", children: s("tickets.create.screen", "Screen") }),
        /* @__PURE__ */ t("span", { className: "font-medium", children: v.screenResolution })
      ] }),
      /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-primary)] rounded-lg", children: [
        /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)] block", children: s("tickets.create.language", "Language") }),
        /* @__PURE__ */ t("span", { className: "font-medium", children: v.language })
      ] }),
      m && /* @__PURE__ */ r("div", { className: "p-3 bg-[var(--bg-primary)] rounded-lg", children: [
        /* @__PURE__ */ t("span", { className: "text-xs text-[var(--text-secondary)] block", children: "URL" }),
        /* @__PURE__ */ t("span", { className: "font-medium font-mono text-xs truncate block", children: m.url })
      ] })
    ] })
  ] }) : null, Oe = () => E ? /* @__PURE__ */ r("div", { className: "card p-4", children: [
    /* @__PURE__ */ r("div", { className: "flex items-center justify-between mb-4", children: [
      /* @__PURE__ */ r("h3", { className: "font-medium flex items-center gap-2", children: [
        /* @__PURE__ */ t(Ne, { className: "w-5 h-5 text-[var(--color-primary-600)]" }),
        s("tickets.createFlow.screenshot")
      ] }),
      /* @__PURE__ */ r("label", { className: "flex items-center gap-2 text-sm", children: [
        /* @__PURE__ */ t(
          "input",
          {
            type: "checkbox",
            checked: D,
            onChange: (e) => oe(e.target.checked),
            className: "rounded border-[var(--border-color)]"
          }
        ),
        s("tickets.createFlow.includeScreenshot")
      ] })
    ] }),
    D ? /* @__PURE__ */ t(
      xt,
      {
        screenshot: E,
        onAnnotatedScreenshot: Ie,
        onReset: Ee
      }
    ) : /* @__PURE__ */ r("div", { className: "p-8 text-center text-[var(--text-secondary)] bg-[var(--bg-secondary)] rounded-lg", children: [
      /* @__PURE__ */ t(Ne, { className: "w-8 h-8 mx-auto mb-2 opacity-50" }),
      /* @__PURE__ */ t("p", { className: "text-sm", children: s("tickets.createFlow.screenshotExcluded", "Screenshot will not be included") })
    ] })
  ] }) : null, Ue = () => !m || m.recentErrors.length === 0 ? null : /* @__PURE__ */ r("div", { className: "card p-4", children: [
    /* @__PURE__ */ r("div", { className: "flex items-center justify-between mb-4", children: [
      /* @__PURE__ */ r("h3", { className: "font-medium flex items-center gap-2", children: [
        /* @__PURE__ */ t(xe, { className: "w-5 h-5 text-[var(--error-text)]" }),
        s("tickets.createFlow.recentErrors"),
        " (",
        m.recentErrors.length,
        ")"
      ] }),
      /* @__PURE__ */ r("label", { className: "flex items-center gap-2 text-sm", children: [
        /* @__PURE__ */ t(
          "input",
          {
            type: "checkbox",
            checked: I,
            onChange: (e) => ce(e.target.checked),
            className: "rounded border-[var(--border-color)]"
          }
        ),
        s("tickets.createFlow.includeErrorLogs")
      ] })
    ] }),
    I ? /* @__PURE__ */ t("div", { className: "bg-[var(--bg-secondary)] rounded-lg p-4 text-sm font-mono max-h-48 overflow-y-auto space-y-2", children: m.recentErrors.slice(0, 10).map((e, n) => /* @__PURE__ */ r("div", { className: "p-2 bg-[var(--error-bg)]/50 rounded text-[var(--error-text)]", children: [
      /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-xs opacity-70 mb-1", children: [
        /* @__PURE__ */ t("span", { children: e.timestamp.toLocaleTimeString() }),
        e.component && /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 bg-[var(--bg-primary)] rounded", children: e.component })
      ] }),
      /* @__PURE__ */ t("div", { className: "break-words", children: e.message })
    ] }, `error-${n}`)) }) : /* @__PURE__ */ t("div", { className: "p-4 text-center text-[var(--text-secondary)] bg-[var(--bg-secondary)] rounded-lg", children: /* @__PURE__ */ t("p", { className: "text-sm", children: s("tickets.createFlow.logsExcluded", "Error logs will not be included") }) })
  ] }), He = () => !m && !v ? null : /* @__PURE__ */ r("div", { className: "space-y-6 mb-6", children: [
    Me(),
    Oe(),
    Ue()
  ] }), Ge = () => /* @__PURE__ */ r("div", { children: [
    /* @__PURE__ */ t("label", { className: "block text-sm font-medium mb-2", children: s("tickets.createFlow.attachments") }),
    /* @__PURE__ */ r(
      "div",
      {
        className: `border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer ${M ? "border-[var(--color-primary-600)] bg-[var(--color-primary-600)]/10" : "border-[var(--border-color)] hover:border-[var(--color-primary-600)]"}`,
        onClick: () => z.current?.click(),
        onKeyDown: (e) => {
          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), z.current?.click());
        },
        role: "button",
        tabIndex: 0,
        onDragOver: $e,
        onDragEnter: Ae,
        onDragLeave: Ke,
        onDrop: Re,
        children: [
          /* @__PURE__ */ t(
            "input",
            {
              ref: z,
              type: "file",
              multiple: !0,
              onChange: Le,
              accept: Se.join(","),
              className: "hidden"
            }
          ),
          /* @__PURE__ */ t(mt, { className: `w-8 h-8 mx-auto mb-2 ${M ? "text-[var(--color-primary-600)]" : "text-[var(--text-secondary)]"}` }),
          /* @__PURE__ */ t("p", { className: `text-sm ${M ? "text-[var(--color-primary-600)] font-medium" : "text-[var(--text-secondary)]"}`, children: M ? s("tickets.createFlow.dropFilesNow", "Drop files here") : s("tickets.createFlow.dropFilesHere") }),
          /* @__PURE__ */ t("p", { className: "text-xs text-[var(--text-secondary)] mt-1", children: s("tickets.createFlow.maxFileSize", { size: "10 MB" }) })
        ]
      }
    ),
    B.length > 0 && /* @__PURE__ */ t("div", { className: "mt-3 space-y-2", children: B.map((e, n) => {
      const i = je(e.name);
      return /* @__PURE__ */ r(
        "div",
        {
          className: "flex items-center gap-3 p-3 bg-[var(--bg-secondary)] rounded-lg",
          children: [
            /* @__PURE__ */ t(i, { className: "w-5 h-5 text-[var(--text-secondary)]" }),
            /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: [
              /* @__PURE__ */ t("p", { className: "text-sm font-medium truncate", children: e.name }),
              /* @__PURE__ */ t("p", { className: "text-xs text-[var(--text-secondary)]", children: Be(e.size) })
            ] }),
            /* @__PURE__ */ t(
              "button",
              {
                type: "button",
                onClick: (le) => {
                  le.stopPropagation(), Ce(n);
                },
                className: "p-1 hover:bg-[var(--bg-hover)] rounded",
                children: /* @__PURE__ */ t(pt, { className: "w-4 h-4 text-[var(--text-secondary)]" })
              }
            )
          ]
        },
        `file-${e.name}-${n}`
      );
    }) })
  ] }), Ve = () => {
    const n = be.find((i) => i.value === F)?.icon || ke;
    return /* @__PURE__ */ r("div", { className: "space-y-6", children: [
      /* @__PURE__ */ r("div", { className: "flex items-center gap-4 mb-6", children: [
        /* @__PURE__ */ t("button", { onClick: () => w(1), className: "btn btn-ghost p-2", children: /* @__PURE__ */ t(ye, { className: "w-5 h-5" }) }),
        /* @__PURE__ */ r("div", { className: "flex-1", children: [
          /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ t("div", { className: "p-2 rounded-lg bg-[var(--bg-secondary)]", children: /* @__PURE__ */ t(n, { className: "w-5 h-5" }) }),
            /* @__PURE__ */ t(
              "select",
              {
                value: F || "",
                onChange: (i) => O(i.target.value),
                className: "input text-lg font-semibold bg-transparent border-none p-0 pr-8 cursor-pointer hover:text-[var(--color-primary-600)] focus:ring-0",
                children: be.map((i) => /* @__PURE__ */ t("option", { value: i.value, children: s(`tickets.${i.labelKey}`) }, i.value))
              }
            )
          ] }),
          /* @__PURE__ */ t("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: s("tickets.createFlow.fillDetails") })
        ] })
      ] }),
      He(),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ r("label", { className: "block text-sm font-medium mb-2", children: [
          s("tickets.form.title"),
          " ",
          /* @__PURE__ */ t("span", { className: "text-[var(--error-text)]", children: "*" })
        ] }),
        /* @__PURE__ */ t(
          "input",
          {
            type: "text",
            value: h,
            onChange: (i) => ae(i.target.value),
            placeholder: s("tickets.form.titlePlaceholder"),
            className: "input w-full",
            maxLength: 200
          }
        ),
        /* @__PURE__ */ r("p", { className: "text-xs text-[var(--text-secondary)] mt-1", children: [
          h.length,
          "/200"
        ] })
      ] }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ r("label", { className: "block text-sm font-medium mb-2", children: [
          s("tickets.form.description"),
          " ",
          /* @__PURE__ */ t("span", { className: "text-[var(--error-text)]", children: "*" })
        ] }),
        /* @__PURE__ */ t(
          "textarea",
          {
            value: T,
            onChange: (i) => ne(i.target.value),
            placeholder: s("tickets.form.descriptionPlaceholder"),
            className: "input w-full h-40",
            maxLength: 5e3
          }
        ),
        /* @__PURE__ */ r("p", { className: "text-xs text-[var(--text-secondary)] mt-1", children: [
          T.length,
          "/5000"
        ] })
      ] }),
      /* @__PURE__ */ r("div", { children: [
        /* @__PURE__ */ t("label", { className: "block text-sm font-medium mb-2", children: s("tickets.form.priority") }),
        /* @__PURE__ */ t("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-2", children: yt.map((i) => /* @__PURE__ */ r(
          "button",
          {
            type: "button",
            onClick: () => j(i.value),
            className: `p-3 rounded-lg border text-center transition-colors ${K === i.value ? "border-[var(--color-primary-600)] bg-[var(--color-primary-600)]/10" : "border-[var(--border-color)] hover:bg-[var(--bg-hover)]"}`,
            children: [
              /* @__PURE__ */ t("div", { className: "font-medium", children: s(`tickets.${i.labelKey}`) }),
              /* @__PURE__ */ t("div", { className: "text-xs text-[var(--text-secondary)]", children: s(`tickets.${i.descriptionKey}`, i.value) })
            ]
          },
          i.value
        )) })
      ] }),
      Ge(),
      G && /* @__PURE__ */ r("div", { className: "p-4 rounded-lg bg-[var(--error-bg)] text-[var(--error-text)] flex items-center gap-2", children: [
        /* @__PURE__ */ t(xe, { className: "w-5 h-5" }),
        G
      ] }),
      /* @__PURE__ */ r("div", { className: "flex items-center justify-between pt-4 border-t border-[var(--border-color)]", children: [
        /* @__PURE__ */ t("button", { onClick: () => w(1), className: "btn btn-secondary", children: s("common:actions.back") }),
        /* @__PURE__ */ r(
          "button",
          {
            onClick: ze,
            disabled: !h.trim() || !T.trim() || H || W,
            className: "btn btn-primary",
            children: [
              H || W ? /* @__PURE__ */ t(lt, { className: "w-4 h-4 animate-spin mr-2" }) : /* @__PURE__ */ t(dt, { className: "w-4 h-4 mr-2" }),
              s(W ? "tickets.createFlow.uploadingFiles" : H ? "common:actions.submitting" : "common:actions.submit")
            ]
          }
        )
      ] })
    ] });
  };
  return /* @__PURE__ */ r("div", { className: "max-w-3xl mx-auto", children: [
    /* @__PURE__ */ t(
      Ze,
      {
        items: [
          { label: s("title", "Support"), href: "/support" },
          { label: s("list.title", "Tickets"), href: "/support/tickets" },
          { label: s("create.title", "Create Ticket") }
        ]
      }
    ),
    /* @__PURE__ */ r("div", { className: "flex items-center gap-4 mb-6 mt-6", children: [
      /* @__PURE__ */ t("button", { onClick: () => g(-1), className: "btn btn-ghost p-2", children: /* @__PURE__ */ t(ye, { className: "w-5 h-5" }) }),
      /* @__PURE__ */ r("div", { className: "flex-1", children: [
        /* @__PURE__ */ r("h1", { className: "text-2xl font-bold flex items-center gap-2", children: [
          /* @__PURE__ */ t(et, { className: "w-6 h-6" }),
          s("tickets.createFlow.title")
        ] }),
        /* @__PURE__ */ t("p", { className: "text-[var(--text-secondary)]", children: s("tickets.createFlow.subtitle") })
      ] }),
      d && /* @__PURE__ */ r(
        "button",
        {
          onClick: () => k(!0),
          className: "btn btn-ghost text-[var(--error-text)] hover:bg-[var(--error-bg)]",
          title: s("common:drafts.discard"),
          children: [
            /* @__PURE__ */ t(fe, { className: "w-4 h-4 mr-2" }),
            s("common:drafts.discard")
          ]
        }
      )
    ] }),
    $ ? /* @__PURE__ */ r("div", { className: "mb-6 p-4 rounded-lg bg-[var(--info-bg)] border border-[var(--info-border)]", children: [
      /* @__PURE__ */ r("div", { className: "flex items-center gap-3 mb-3", children: [
        /* @__PURE__ */ t(tt, { className: "w-5 h-5 text-[var(--info-text)] flex-shrink-0" }),
        /* @__PURE__ */ t("p", { className: "font-medium text-[var(--info-text)]", children: s("glpi.cannotCreateTicket", "Tickets are managed by GLPI. Please create tickets directly in GLPI.") })
      ] }),
      re && /* @__PURE__ */ r(
        "a",
        {
          href: re,
          target: "_blank",
          rel: "noopener noreferrer",
          className: "btn btn-primary inline-flex items-center gap-2",
          children: [
            /* @__PURE__ */ t(rt, { className: "w-4 h-4" }),
            s("glpi.openGlpi")
          ]
        }
      )
    ] }) : /* @__PURE__ */ r(Qe, { children: [
      /* @__PURE__ */ r("div", { className: "flex items-center gap-4 mb-8", children: [
        /* @__PURE__ */ r("div", { className: `flex items-center gap-2 ${S >= 1 ? "text-[var(--color-primary-600)]" : "text-[var(--text-secondary)]"}`, children: [
          /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-full flex items-center justify-center ${S >= 1 ? "bg-[var(--color-primary-600)] text-white" : "bg-[var(--bg-secondary)]"}`, children: "1" }),
          /* @__PURE__ */ t("span", { className: "font-medium", children: s("tickets.createFlow.step1") })
        ] }),
        /* @__PURE__ */ t("div", { className: `flex-1 h-0.5 ${S >= 2 ? "bg-[var(--color-primary-600)]" : "bg-[var(--border-color)]"}` }),
        /* @__PURE__ */ r("div", { className: `flex items-center gap-2 ${S >= 2 ? "text-[var(--color-primary-600)]" : "text-[var(--text-secondary)]"}`, children: [
          /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-full flex items-center justify-center ${S >= 2 ? "bg-[var(--color-primary-600)] text-white" : "bg-[var(--bg-secondary)]"}`, children: "2" }),
          /* @__PURE__ */ t("span", { className: "font-medium", children: s("tickets.createFlow.step2") })
        ] }),
        _ ? /* @__PURE__ */ r("div", { className: "ml-auto flex items-center gap-1.5 text-xs text-[var(--error-text)]", children: [
          /* @__PURE__ */ t(xe, { className: "w-3.5 h-3.5" }),
          /* @__PURE__ */ t("span", { children: s("common:errors.generic") })
        ] }) : /* @__PURE__ */ r("div", { className: `ml-auto flex items-center gap-1.5 text-xs text-[var(--success-text)] transition-opacity duration-300 ${he ? "opacity-100" : "opacity-0"}`, children: [
          /* @__PURE__ */ t(st, { className: "w-3.5 h-3.5" }),
          /* @__PURE__ */ t("span", { children: s("common:drafts.autoSaved") })
        ] })
      ] }),
      y && !q && /* @__PURE__ */ r("div", { className: "mb-4 p-3 rounded-lg bg-[var(--info-bg)] border border-[var(--info-border)] flex items-center justify-between", children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-sm text-[var(--info-text)]", children: [
          /* @__PURE__ */ t(ve, { className: "w-4 h-4" }),
          /* @__PURE__ */ t("span", { children: s("support:tickets.tenantPicker.creatingFor") }),
          /* @__PURE__ */ t("span", { className: "font-semibold", children: y.name })
        ] }),
        /* @__PURE__ */ t(
          "button",
          {
            onClick: () => A(!0),
            className: "text-xs text-[var(--info-text)] underline hover:no-underline",
            children: s("common:actions.change")
          }
        )
      ] }),
      /* @__PURE__ */ r("div", { className: "card p-6", children: [
        S === 1 && qe(),
        S === 2 && Ve()
      ] }),
      me && /* @__PURE__ */ t("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ r("div", { className: "card w-full max-w-md p-6", children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-3 mb-4", children: [
          /* @__PURE__ */ t("div", { className: "w-10 h-10 rounded-full bg-[var(--info-bg)] flex items-center justify-center", children: /* @__PURE__ */ t(ve, { className: "w-5 h-5 text-[var(--info-text)]" }) }),
          /* @__PURE__ */ r("div", { children: [
            /* @__PURE__ */ t("h2", { className: "text-xl font-bold", children: s("support:tickets.tenantPicker.title") }),
            /* @__PURE__ */ t("p", { className: "text-sm text-[var(--text-secondary)]", children: s("support:tickets.tenantPicker.description") })
          ] })
        ] }),
        /* @__PURE__ */ t("div", { className: "space-y-2 max-h-64 overflow-y-auto", children: x.filter((e) => e.status === "Active").map((e) => /* @__PURE__ */ t(
          "button",
          {
            onClick: () => {
              se(e), A(!1), d && U.updateDraft(d, {
                tenantId: e.id,
                tenantSlug: e.slug,
                tenantName: e.name
              });
            },
            className: `w-full p-3 rounded-lg border text-left transition-colors hover:bg-[var(--bg-hover)] ${y?.id === e.id ? "border-[var(--color-primary-600)] bg-[var(--color-primary-600)]/10" : "border-[var(--border-color)]"}`,
            children: /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
              /* @__PURE__ */ t(ve, { className: "w-5 h-5 text-[var(--text-secondary)]" }),
              /* @__PURE__ */ r("div", { className: "flex-1 min-w-0", children: [
                /* @__PURE__ */ t("div", { className: "font-medium truncate", children: e.name }),
                e.organisationName && /* @__PURE__ */ t("div", { className: "text-xs text-[var(--text-secondary)] truncate", children: e.organisationName })
              ] }),
              /* @__PURE__ */ t("span", { className: `text-xs px-2 py-0.5 rounded-full ${e.type === "Personal" ? "bg-[var(--info-bg)] text-[var(--info-text)]" : "bg-[var(--success-bg)] text-[var(--success-text)]"}`, children: e.type === "Personal" ? s("common:tenant.personal") : s("common:tenant.business") })
            ] })
          },
          e.id
        )) }),
        /* @__PURE__ */ t("div", { className: "flex justify-end gap-3 mt-4 pt-4 border-t border-[var(--border-color)]", children: /* @__PURE__ */ t(
          "button",
          {
            onClick: () => {
              A(!1), N || g(-1);
            },
            className: "btn btn-secondary",
            children: s("common:actions.cancel")
          }
        ) })
      ] }) }),
      pe && /* @__PURE__ */ t("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ r("div", { className: "card w-full max-w-md p-6", children: [
        /* @__PURE__ */ r("div", { className: "flex items-center gap-3 mb-4", children: [
          /* @__PURE__ */ t("div", { className: "w-10 h-10 rounded-full bg-[var(--error-bg)] flex items-center justify-center", children: /* @__PURE__ */ t(fe, { className: "w-5 h-5 text-[var(--error-text)]" }) }),
          /* @__PURE__ */ t("h2", { className: "text-xl font-bold", children: s("common:drafts.discardConfirmTitle") })
        ] }),
        /* @__PURE__ */ t("p", { className: "text-[var(--text-secondary)] mb-6", children: s("common:drafts.discardConfirmMessage") }),
        /* @__PURE__ */ r("div", { className: "flex justify-end gap-3", children: [
          /* @__PURE__ */ t(
            "button",
            {
              onClick: () => k(!1),
              className: "btn btn-secondary",
              children: s("common:actions.cancel")
            }
          ),
          /* @__PURE__ */ r(
            "button",
            {
              onClick: () => {
                k(!1), Pe();
              },
              className: "btn bg-[var(--error-bg)] text-[var(--error-text)] hover:opacity-90",
              children: [
                /* @__PURE__ */ t(fe, { className: "w-4 h-4 mr-2" }),
                s("common:drafts.discardConfirm")
              ]
            }
          )
        ] })
      ] }) })
    ] })
  ] });
}
export {
  Dt as CreateSupportTicketPage
};
//# sourceMappingURL=CreateSupportTicketPage-0LgY-_pu.js.map
