import { jsxs as c, jsx as t } from "react/jsx-runtime";
import { useRef as k, useState as s, useEffect as j, useLayoutEffect as Ee, useCallback as h } from "react";
import { createPortal as Te } from "react-dom";
import { useTranslation as De } from "react-i18next";
import { X as Ie, Circle as Pe, Square as Re, Pencil as Se, Move as Le, ZoomOut as We, ZoomIn as ze, RotateCcw as Xe, Undo2 as Oe, Trash2 as Ue, Download as Ye, RefreshCw as $e, Minimize2 as Ae, Maximize2 as He } from "lucide-react";
const S = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3], L = 3;
function Be({ screenshot: v, onAnnotatedScreenshot: K, onReset: N, className: W = "" }) {
  const { t: r } = De(["support"]), b = k(null), V = k(null), _ = k(null), [de, q] = s(!1), [u, C] = s("circle"), [he] = s("#ff0000"), [p, F] = s([]), [i, w] = s(null), [z, B] = s(!1), [J, X] = s(null), [d, ue] = s({ width: 0, height: 0 }), M = k(null), O = k(null), [E, f] = s(L), [g, T] = s({ x: 0, y: 0 }), [U, G] = s(!1), [Q, ge] = s({ x: 0, y: 0 }), Y = S[E], [l, y] = s(!1);
  j(() => {
    if (O.current)
      return;
    if (!v || !v.startsWith("data:image/")) {
      X("Invalid screenshot data");
      return;
    }
    O.current = v;
    const e = new Image();
    e.onload = () => {
      M.current = e, ue({ width: e.width, height: e.height }), B(!0), X(null);
    }, e.onerror = (n) => {
      console.error("[ScreenshotAnnotator] Failed to load image:", n), X("Failed to load screenshot image");
    }, e.src = v;
  }, [v]), Ee(() => {
    if (!z || !M.current || d.width === 0 || d.height === 0) return;
    const e = requestAnimationFrame(() => {
      if (!b.current) return;
      const n = b.current, o = n.getContext("2d");
      if (!o) return;
      o.clearRect(0, 0, n.width, n.height), o.drawImage(M.current, 0, 0, n.width, n.height), p.forEach((x) => {
        ee(o, x);
      }), i && ee(o, i);
      const a = n.toDataURL("image/png");
      K(a);
    });
    return () => cancelAnimationFrame(e);
  }, [z, d, p, i, K, l]), j(() => {
    const e = (n) => {
      n.key === "Escape" && l && y(!1);
    };
    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
  }, [l]), j(() => (l ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
    document.body.style.overflow = "";
  }), [l]);
  const ee = (e, n) => {
    if (e.strokeStyle = n.color, e.lineWidth = 3, e.lineCap = "round", e.lineJoin = "round", n.type === "circle" && n.points.length >= 2) {
      const o = n.points[0], a = n.points.at(-1), x = (o.x + a.x) / 2, Ce = (o.y + a.y) / 2, Fe = Math.abs(a.x - o.x) / 2, Me = Math.abs(a.y - o.y) / 2;
      e.beginPath(), e.ellipse(x, Ce, Fe, Me, 0, 0, 2 * Math.PI), e.stroke();
    } else if (n.type === "rectangle" && n.points.length >= 2) {
      const o = n.points[0], a = n.points.at(-1);
      e.beginPath(), e.rect(o.x, o.y, a.x - o.x, a.y - o.y), e.stroke();
    } else n.type === "freehand" && n.points.length > 0 && (e.beginPath(), e.moveTo(n.points[0].x, n.points[0].y), n.points.forEach((o) => {
      e.lineTo(o.x, o.y);
    }), e.stroke());
  }, te = (e) => {
    const n = b.current;
    if (!n) return { x: 0, y: 0 };
    const o = n.getBoundingClientRect(), a = n.width / o.width, x = n.height / o.height;
    return {
      x: (e.clientX - o.left) * a,
      y: (e.clientY - o.top) * x
    };
  }, ne = (e) => {
    if ("touches" in e) {
      const n = e.touches[0] || e.changedTouches[0];
      return { clientX: n.clientX, clientY: n.clientY };
    }
    return { clientX: e.clientX, clientY: e.clientY };
  }, D = (e) => {
    e.preventDefault();
    const { clientX: n, clientY: o } = ne(e);
    if (u === "pan") {
      G(!0), ge({ x: n - g.x, y: o - g.y });
      return;
    }
    const a = te({ clientX: n, clientY: o });
    q(!0), w({
      type: u,
      points: [a],
      color: he
    });
  }, I = (e) => {
    const { clientX: n, clientY: o } = ne(e);
    if (U) {
      T({
        x: n - Q.x,
        y: o - Q.y
      });
      return;
    }
    if (!de || !i) return;
    const a = te({ clientX: n, clientY: o });
    w(u === "freehand" ? {
      ...i,
      points: [...i.points, a]
    } : {
      ...i,
      points: [i.points[0], a]
    });
  }, m = () => {
    if (U) {
      G(!1);
      return;
    }
    (i?.points.length ?? 0) > 1 && i && F([...p, i]), q(!1), w(null);
  }, me = h(() => {
    f((e) => Math.min(e + 1, S.length - 1));
  }, []), be = h(() => {
    f((e) => Math.max(e - 1, 0));
  }, []), fe = h(() => {
    f(L), T({ x: 0, y: 0 });
  }, []), oe = h((e) => {
    (e.ctrlKey || e.metaKey) && (e.preventDefault(), e.deltaY < 0 ? f((n) => Math.min(n + 1, S.length - 1)) : f((n) => Math.max(n - 1, 0)));
  }, []), ve = h(() => {
    F((e) => e.slice(0, -1));
  }, []), pe = h(() => {
    F([]);
  }, []), we = h(() => {
    if (!b.current) return;
    const e = document.createElement("a");
    e.download = "screenshot-annotated.png", e.href = b.current.toDataURL("image/png"), e.click();
  }, []), ye = h(() => {
    N && (O.current = null, M.current = null, B(!1), F([]), w(null), T({ x: 0, y: 0 }), f(L), N());
  }, [N]), xe = h(() => {
    y((e) => !e), T({ x: 0, y: 0 });
  }, []);
  if (J)
    return /* @__PURE__ */ c("div", { className: `flex flex-col items-center justify-center bg-[var(--bg-secondary)] rounded-lg p-8 ${W}`, children: [
      /* @__PURE__ */ t("div", { className: "text-[var(--error-text)] mb-2", children: r("tickets.createFlow.screenshotLoadError", "Failed to load screenshot") }),
      /* @__PURE__ */ t("div", { className: "text-xs text-[var(--text-secondary)]", children: J })
    ] });
  if (!z)
    return /* @__PURE__ */ t("div", { className: `flex items-center justify-center bg-[var(--bg-secondary)] rounded-lg p-8 ${W}`, children: /* @__PURE__ */ t("div", { className: "animate-pulse text-[var(--text-secondary)]", children: r("tickets.createFlow.loadingScreenshot", "Loading screenshot...") }) });
  const re = d.width / d.height, ke = Math.min(window.innerWidth - 100, 1200), ae = 500, se = window.innerWidth - 80, $ = window.innerHeight - 160, le = l ? se : ke, A = l ? $ : ae;
  let H = le, Z = le / re;
  Z > A && (Z = A, H = A * re);
  const P = H * Y, R = Z * Y, ie = u === "pan" ? U ? "grabbing" : "grab" : "crosshair", ce = () => /* @__PURE__ */ c("div", { className: "flex items-center gap-2 flex-wrap", children: [
    /* @__PURE__ */ c("div", { className: "flex items-center gap-1 bg-[var(--bg-secondary)] rounded-lg p-1", children: [
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: () => C("circle"),
          className: `p-2 rounded transition-colors ${u === "circle" ? "bg-[var(--color-primary-600)] text-white" : "hover:bg-[var(--bg-hover)]"}`,
          title: r("tickets.createFlow.toolCircle", "Circle"),
          children: /* @__PURE__ */ t(Pe, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: () => C("rectangle"),
          className: `p-2 rounded transition-colors ${u === "rectangle" ? "bg-[var(--color-primary-600)] text-white" : "hover:bg-[var(--bg-hover)]"}`,
          title: r("tickets.createFlow.toolRectangle", "Rectangle"),
          children: /* @__PURE__ */ t(Re, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: () => C("freehand"),
          className: `p-2 rounded transition-colors ${u === "freehand" ? "bg-[var(--color-primary-600)] text-white" : "hover:bg-[var(--bg-hover)]"}`,
          title: r("tickets.createFlow.toolFreehand", "Freehand"),
          children: /* @__PURE__ */ t(Se, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ t("div", { className: "w-px h-5 bg-[var(--border-color)] mx-1" }),
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: () => C("pan"),
          className: `p-2 rounded transition-colors ${u === "pan" ? "bg-[var(--color-primary-600)] text-white" : "hover:bg-[var(--bg-hover)]"}`,
          title: r("tickets.createFlow.toolPan", "Pan (drag to move)"),
          children: /* @__PURE__ */ t(Le, { className: "w-4 h-4" })
        }
      )
    ] }),
    /* @__PURE__ */ c("div", { className: "flex items-center gap-1 bg-[var(--bg-secondary)] rounded-lg p-1", children: [
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: be,
          disabled: E === 0,
          className: "p-2 rounded hover:bg-[var(--bg-hover)] disabled:opacity-50 disabled:cursor-not-allowed",
          title: r("tickets.createFlow.zoomOut", "Zoom out"),
          children: /* @__PURE__ */ t(We, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ c("span", { className: "px-2 text-xs font-medium min-w-[48px] text-center", children: [
        Math.round(Y * 100),
        "%"
      ] }),
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: me,
          disabled: E === S.length - 1,
          className: "p-2 rounded hover:bg-[var(--bg-hover)] disabled:opacity-50 disabled:cursor-not-allowed",
          title: r("tickets.createFlow.zoomIn", "Zoom in"),
          children: /* @__PURE__ */ t(ze, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: fe,
          disabled: E === L && g.x === 0 && g.y === 0,
          className: "p-2 rounded hover:bg-[var(--bg-hover)] disabled:opacity-50 disabled:cursor-not-allowed",
          title: r("tickets.createFlow.resetView", "Reset view"),
          children: /* @__PURE__ */ t(Xe, { className: "w-4 h-4" })
        }
      )
    ] }),
    /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: ve,
          disabled: p.length === 0,
          className: "p-2 rounded hover:bg-[var(--bg-hover)] disabled:opacity-50 disabled:cursor-not-allowed",
          title: r("tickets.createFlow.undo", "Undo"),
          children: /* @__PURE__ */ t(Oe, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: pe,
          disabled: p.length === 0,
          className: "p-2 rounded hover:bg-[var(--bg-hover)] disabled:opacity-50 disabled:cursor-not-allowed",
          title: r("tickets.createFlow.clear", "Clear all"),
          children: /* @__PURE__ */ t(Ue, { className: "w-4 h-4" })
        }
      ),
      /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: we,
          className: "p-2 rounded hover:bg-[var(--bg-hover)]",
          title: r("tickets.createFlow.download", "Download"),
          children: /* @__PURE__ */ t(Ye, { className: "w-4 h-4" })
        }
      ),
      N && /* @__PURE__ */ t(
        "button",
        {
          type: "button",
          onClick: ye,
          className: "p-2 rounded hover:bg-[var(--bg-hover)] text-[var(--warning-text)]",
          title: r("tickets.createFlow.recapture", "Recapture screenshot"),
          children: /* @__PURE__ */ t($e, { className: "w-4 h-4" })
        }
      )
    ] }),
    /* @__PURE__ */ t("div", { className: "flex items-center gap-1 ml-auto", children: /* @__PURE__ */ t(
      "button",
      {
        type: "button",
        onClick: xe,
        className: "p-2 rounded hover:bg-[var(--bg-hover)] bg-[var(--bg-secondary)]",
        title: l ? r("tickets.createFlow.exitFullscreen", "Exit fullscreen") : r("tickets.createFlow.fullscreen", "Fullscreen"),
        children: l ? /* @__PURE__ */ t(Ae, { className: "w-4 h-4" }) : /* @__PURE__ */ t(He, { className: "w-4 h-4" })
      }
    ) })
  ] }), Ne = () => /* @__PURE__ */ t(
    "div",
    {
      ref: _,
      className: "border border-[var(--border-color)] rounded-lg overflow-auto bg-[var(--bg-secondary)]",
      style: {
        maxWidth: l ? "100%" : H + 20,
        maxHeight: l ? $ : ae,
        width: "100%"
      },
      onWheel: oe,
      children: /* @__PURE__ */ t(
        "div",
        {
          ref: V,
          style: {
            width: P,
            height: R,
            transform: `translate(${g.x}px, ${g.y}px)`,
            transformOrigin: "top left",
            margin: "auto"
          },
          children: /* @__PURE__ */ t(
            "canvas",
            {
              ref: b,
              width: d.width,
              height: d.height,
              style: {
                width: P,
                height: R,
                cursor: ie,
                touchAction: "none"
                // Prevent browser touch gestures
              },
              onMouseDown: D,
              onMouseMove: I,
              onMouseUp: m,
              onMouseLeave: m,
              onTouchStart: D,
              onTouchMove: I,
              onTouchEnd: m,
              onTouchCancel: m
            }
          )
        }
      )
    }
  );
  return l ? Te(
    /* @__PURE__ */ c(
      "div",
      {
        className: "fixed inset-0 z-[9999] bg-black/90 flex flex-col",
        onClick: (e) => {
          e.target === e.currentTarget && y(!1);
        },
        onKeyDown: (e) => {
          e.key === "Escape" && y(!1);
        },
        role: "dialog",
        "aria-modal": "true",
        "aria-label": "Screenshot annotator",
        children: [
          /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-4 bg-[var(--bg-primary)] border-b border-[var(--border-color)]", children: [
            /* @__PURE__ */ t("div", { className: "flex items-center gap-4", children: ce() }),
            /* @__PURE__ */ t(
              "button",
              {
                type: "button",
                onClick: () => y(!1),
                className: "p-2 rounded hover:bg-[var(--bg-hover)] text-[var(--text-secondary)]",
                title: r("tickets.createFlow.exitFullscreen", "Exit fullscreen (Esc)"),
                children: /* @__PURE__ */ t(Ie, { className: "w-5 h-5" })
              }
            )
          ] }),
          /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center p-4 overflow-hidden", children: /* @__PURE__ */ t(
            "div",
            {
              ref: _,
              className: "border border-[var(--border-color)] rounded-lg overflow-auto bg-[var(--bg-secondary)]",
              style: {
                maxWidth: se,
                maxHeight: $
              },
              onWheel: oe,
              children: /* @__PURE__ */ t(
                "div",
                {
                  ref: V,
                  style: {
                    width: P,
                    height: R,
                    transform: `translate(${g.x}px, ${g.y}px)`,
                    transformOrigin: "top left"
                  },
                  children: /* @__PURE__ */ t(
                    "canvas",
                    {
                      ref: b,
                      width: d.width,
                      height: d.height,
                      style: {
                        width: P,
                        height: R,
                        cursor: ie,
                        touchAction: "none"
                        // Prevent browser touch gestures
                      },
                      onMouseDown: D,
                      onMouseMove: I,
                      onMouseUp: m,
                      onMouseLeave: m,
                      onTouchStart: D,
                      onTouchMove: I,
                      onTouchEnd: m,
                      onTouchCancel: m
                    }
                  )
                }
              )
            }
          ) }),
          /* @__PURE__ */ t("div", { className: "p-2 text-center text-xs text-[var(--text-secondary)] bg-[var(--bg-primary)] border-t border-[var(--border-color)]", children: r("tickets.createFlow.fullscreenHint", "Press Esc to exit fullscreen • Ctrl+scroll to zoom • Use pan tool to navigate") })
        ]
      }
    ),
    document.body
  ) : /* @__PURE__ */ c("div", { className: `space-y-3 ${W}`, children: [
    ce(),
    Ne(),
    /* @__PURE__ */ c("div", { className: "flex items-center justify-between text-xs text-[var(--text-secondary)]", children: [
      /* @__PURE__ */ t("span", { children: r("tickets.createFlow.drawToHighlight", "Draw on the image to highlight issues") }),
      /* @__PURE__ */ t("span", { children: r("tickets.createFlow.clickFullscreen", "Click the fullscreen button for a larger view") })
    ] })
  ] });
}
export {
  Be as S
};
//# sourceMappingURL=ScreenshotAnnotator-DEuQRcin.js.map
