import { defineComponent, ref, withAsyncContext, watch, nextTick, mergeProps, unref, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrInterpolate, ssrRenderStyle, ssrRenderClass } from 'vue/server-renderer';
import * as d3 from 'd3';
import { _ as _export_sfc, b as useRouter, a as useHead } from './server.mjs';
import { u as useFetch } from './fetch-B5NxMLIO.mjs';
import '../nitro/nitro.mjs';
import 'node:http';
import 'node:https';
import 'node:crypto';
import 'stream';
import 'events';
import 'http';
import 'crypto';
import 'buffer';
import 'zlib';
import 'https';
import 'net';
import 'tls';
import 'url';
import 'node:events';
import 'node:buffer';
import 'node:fs';
import 'node:path';
import 'vue-router';
import '@prisma/client';
import '@prisma/adapter-better-sqlite3';
import 'fs';
import 'path';
import 'fs/promises';
import 'child_process';
import 'node:child_process';
import 'node:url';
import '../routes/renderer.mjs';
import 'vue-bundle-renderer/runtime';
import 'unhead/server';
import 'devalue';
import 'unhead/utils';
import '@vue/shared';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "graph",
  __ssrInlineRender: true,
  async setup(__props) {
    let __temp, __restore;
    const router = useRouter();
    const svgRef = ref(null);
    const hoveredIssue = ref(null);
    const tooltipStyle = ref({ left: "0px", top: "0px" });
    let zoom = null;
    let svg = null;
    const { data: graphData, status } = ([__temp, __restore] = withAsyncContext(() => useFetch("/api/issues/graph", "$5ObCgmYhuY")), __temp = await __temp, __restore(), __temp);
    const getPriorityColor = (priority) => {
      switch (priority) {
        case "critical":
          return "#ef4444";
        case "high":
          return "#f59e0b";
        case "medium":
          return "#3b82f6";
        case "low":
          return "#22c55e";
        default:
          return "#94a3b8";
      }
    };
    const renderGraph = () => {
      if (!svgRef.value || !graphData.value) return;
      const container = svgRef.value.parentElement;
      if (!container) return;
      const width = container.clientWidth;
      const height = container.clientHeight || 600;
      d3.select(svgRef.value).selectAll("*").remove();
      svg = d3.select(svgRef.value).attr("width", width).attr("height", height);
      const g = svg.append("g");
      zoom = d3.zoom().scaleExtent([0.1, 4]).on("zoom", (event) => {
        g.attr("transform", event.transform.toString());
      });
      svg.call(zoom);
      const hierarchy = d3.hierarchy(graphData.value);
      const treeLayout = d3.tree().size([height - 100, width - 200]).separation((a, b) => a.parent === b.parent ? 1 : 1.5);
      const root = treeLayout(hierarchy);
      g.selectAll(".link").data(root.links()).enter().append("path").attr("class", "link").attr(
        "d",
        d3.linkHorizontal().x((d) => d.y + 100).y((d) => d.x + 50)
      ).attr("fill", "none").attr("stroke", "#cbd5e1").attr("stroke-width", 2);
      const nodes = g.selectAll(".node").data(root.descendants()).enter().append("g").attr("class", "node").attr(
        "transform",
        (d) => `translate(${(d.y ?? 0) + 100}, ${(d.x ?? 0) + 50})`
      ).style("cursor", "pointer").on("click", (_event, d) => {
        if (d.data.id && d.data.id !== "root") {
          router.push(`/issue/${d.data.id}`);
        }
      }).on("mouseenter", (event, d) => {
        if (d.data.id !== "root") {
          hoveredIssue.value = d.data;
          tooltipStyle.value = {
            left: `${event.pageX + 10}px`,
            top: `${event.pageY + 10}px`
          };
        }
      }).on("mouseleave", () => {
        hoveredIssue.value = null;
      });
      nodes.append("circle").attr("r", (d) => d.data.id === "root" ? 12 : 8).attr(
        "fill",
        (d) => d.data.id === "root" ? "#64748b" : getPriorityColor(d.data.priority)
      ).attr("stroke", "#fff").attr("stroke-width", 2);
      nodes.append("text").attr("dy", -15).attr("text-anchor", "middle").attr("font-size", "11px").attr("fill", "#64748b").text((d) => d.data.id === "root" ? "" : d.data.id);
      const initialTransform = d3.zoomIdentity.translate(50, height / 2 - (root.x || 0) - 50);
      svg.call(zoom.transform, initialTransform);
    };
    watch(graphData, () => {
      nextTick(() => {
        renderGraph();
      });
    });
    useHead({
      title: "Issue Graph - AutoCode"
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "issue-graph-page" }, _attrs))} data-v-63d9891e><header class="page-header" data-v-63d9891e><h1 data-v-63d9891e>${ssrInterpolate(_ctx.$t("graph.title"))}</h1><div class="graph-controls" data-v-63d9891e><button class="btn btn-secondary btn-sm" data-v-63d9891e>+ ${ssrInterpolate(_ctx.$t("graph.zoomIn"))}</button><button class="btn btn-secondary btn-sm" data-v-63d9891e> − ${ssrInterpolate(_ctx.$t("graph.zoomOut"))}</button><button class="btn btn-secondary btn-sm" data-v-63d9891e>${ssrInterpolate(_ctx.$t("graph.reset"))}</button></div></header>`);
      if (unref(status) === "pending") {
        _push(`<div class="loading card" data-v-63d9891e>${ssrInterpolate(_ctx.$t("app.loading"))}</div>`);
      } else if (!unref(graphData)?.children?.length) {
        _push(`<div class="empty card" data-v-63d9891e>${ssrInterpolate(_ctx.$t("graph.noIssues"))}</div>`);
      } else {
        _push(`<div class="graph-container card" data-v-63d9891e><svg class="graph-svg" data-v-63d9891e></svg></div>`);
      }
      if (unref(hoveredIssue)) {
        _push(`<div class="issue-tooltip" style="${ssrRenderStyle(unref(tooltipStyle))}" data-v-63d9891e><strong data-v-63d9891e>${ssrInterpolate(unref(hoveredIssue).id)}</strong><p data-v-63d9891e>${ssrInterpolate(unref(hoveredIssue).title)}</p>`);
        if (unref(hoveredIssue).priority) {
          _push(`<span class="${ssrRenderClass([`badge-${unref(hoveredIssue).priority}`, "badge"])}" data-v-63d9891e>${ssrInterpolate(unref(hoveredIssue).priority)}</span>`);
        } else {
          _push(`<!---->`);
        }
        _push(`</div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/issues/graph.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const graph = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63d9891e"]]);

export { graph as default };
//# sourceMappingURL=graph-C-r91hz6.mjs.map
