{# ============================================================================
   Pipeline Canvas — Reusable visual DAG component

   Usage:
     {% from "components/pipeline.html" import pipeline_assets, pipeline_canvas %}

     {% block head %}{{ pipeline_assets() }}{% endblock %}

     {% block content %}
       {{ pipeline_canvas(id="my-pipeline", height="400px") }}
     {% endblock %}

     {% block scripts %}
     <script>
       const canvas = tuskPipeline('my-pipeline', {
           nodeTypes: { ... },
           onNodeDoubleClick: (node) => { ... },
       });
     </script>
     {% endblock %}
   ============================================================================ #}


{# Load pipeline dependencies (Dagre.js for layout) #}
{% macro pipeline_assets() %}
{% if use_cdn is defined and use_cdn %}
<script src="https://cdn.jsdelivr.net/npm/@dagrejs/dagre@1.1.4/dist/dagre.min.js"></script>
{% else %}
<script src="/static/vendor/dagre.min.js"></script>
{% endif %}
<script src="/static/pipeline.js"></script>
{% endmacro %}


{# SVG canvas container with Alpine.js component #}
{% macro pipeline_canvas(id, height="400px", toolbar=true, minimap=false, direction="LR") %}
<div id="{{ id }}-wrapper"
     class="pipeline-canvas-wrapper relative bg-[#0d1117] border border-[#30363d] rounded-lg overflow-hidden"
     style="height: {{ height }};"
     x-data="tuskPipelineCanvas('{{ id }}', '{{ direction }}')"
     x-init="$nextTick(() => init())"
     @keydown.backspace.window="if(focused) deleteSelected()"
     @keydown.delete.window="if(focused) deleteSelected()"
     @keydown.escape.window="clearSelection()">

    {% if toolbar %}
    {{ pipeline_toolbar(id) }}
    {% endif %}

    {# Main SVG canvas — nodes/edges rendered imperatively by pipeline.js #}
    <svg id="{{ id }}"
         class="w-full h-full cursor-grab"
         @mousedown="onCanvasMouseDown($event)"
         @mousemove="onCanvasMouseMove($event)"
         @mouseup="onCanvasMouseUp($event)"
         @dblclick="onCanvasDblClick($event)"
         @wheel.prevent="onWheel($event)"
         @mouseenter="focused = true"
         @mouseleave="focused = false">

        <defs>
            {# Arrow markers for edges #}
            <marker id="{{ id }}-arrow"
                    viewBox="0 0 10 10"
                    refX="10" refY="5"
                    markerWidth="8" markerHeight="8"
                    orient="auto-start-reverse">
                <path d="M 0 0 L 10 5 L 0 10 z" fill="#484f58" />
            </marker>
            <marker id="{{ id }}-arrow-selected"
                    viewBox="0 0 10 10"
                    refX="10" refY="5"
                    markerWidth="8" markerHeight="8"
                    orient="auto-start-reverse">
                <path d="M 0 0 L 10 5 L 0 10 z" fill="#818cf8" />
            </marker>

            {# Grid pattern #}
            <pattern id="{{ id }}-grid" width="20" height="20" patternUnits="userSpaceOnUse"
                     :patternTransform="`translate(${viewport.x} ${viewport.y}) scale(${viewport.zoom})`">
                <circle cx="0.5" cy="0.5" r="0.5" fill="#21262d" />
            </pattern>
        </defs>

        {# Background grid #}
        <rect width="100%" height="100%" fill="url(#{{ id }}-grid)" />

        {# Viewport group (panned + zoomed) #}
        <g :transform="`translate(${viewport.x} ${viewport.y}) scale(${viewport.zoom})`">
            {# Edges layer — populated by _renderEdges() #}
            <g class="edges-layer"></g>

            {# Temp edge while dragging from port #}
            <path x-show="draggingEdge"
                  :d="tempEdgePath"
                  fill="none"
                  stroke="#6366f1"
                  stroke-width="2"
                  stroke-dasharray="6 3" />

            {# Nodes layer — populated by _renderNodes() #}
            <g class="nodes-layer"></g>
        </g>

        {# Empty state #}
        <text x="50%" y="50%"
              text-anchor="middle"
              fill="#30363d"
              font-size="14"
              x-show="nodes.length === 0"
              class="select-none pointer-events-none">
            Double-click to add a node, or use the toolbar
        </text>
    </svg>

    {% if minimap %}
    {{ pipeline_minimap(id) }}
    {% endif %}
</div>
{% endmacro %}


{# Toolbar with zoom, layout, and node actions #}
{% macro pipeline_toolbar(canvas_id) %}
<div class="absolute top-2 left-2 z-10 flex items-center gap-1 bg-[#161b22]/90 backdrop-blur border border-[#30363d] rounded-lg px-1.5 py-1">
    <button @click="autoLayout()" class="p-1.5 rounded hover:bg-[#21262d] text-[#8b949e] hover:text-white" title="Auto layout (Dagre)">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="8" y="14" width="7" height="7"/><line x1="6.5" y1="10" x2="6.5" y2="14"/><line x1="17.5" y1="10" x2="17.5" y2="14"/></svg>
    </button>
    <button @click="fitView()" class="p-1.5 rounded hover:bg-[#21262d] text-[#8b949e] hover:text-white" title="Fit to view">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
    </button>
    <div class="w-px h-4 bg-[#30363d] mx-0.5"></div>
    <button @click="zoomIn()" class="p-1.5 rounded hover:bg-[#21262d] text-[#8b949e] hover:text-white" title="Zoom in">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
    </button>
    <button @click="zoomOut()" class="p-1.5 rounded hover:bg-[#21262d] text-[#8b949e] hover:text-white" title="Zoom out">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
    </button>
    <span class="text-[10px] text-[#484f58] px-1 min-w-[36px] text-center" x-text="Math.round(viewport.zoom * 100) + '%'"></span>
    <div class="w-px h-4 bg-[#30363d] mx-0.5"></div>
    <button @click="deleteSelected()" class="p-1.5 rounded hover:bg-[#21262d] text-[#8b949e] hover:text-red-400"
            :class="{ 'opacity-30 pointer-events-none': selectedNodes.length === 0 && selectedEdges.length === 0 }"
            title="Delete selected (Backspace)">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
    </button>
</div>

{# Zoom level + node count info (bottom-right) #}
<div class="absolute bottom-2 right-2 z-10 text-[10px] text-[#484f58] bg-[#161b22]/80 px-2 py-1 rounded">
    <span x-text="nodes.length"></span> nodes ·
    <span x-text="edges.length"></span> edges
</div>
{% endmacro %}


{# Minimap overview (optional) — nodes rendered imperatively by pipeline.js #}
{% macro pipeline_minimap(canvas_id, width="140px") %}
<div class="absolute bottom-2 left-2 z-10 bg-[#161b22] border border-[#30363d] rounded"
     style="width: {{ width }}; height: 90px; overflow: hidden;">
    <svg width="100%" height="100%">
        <g :transform="minimapTransform">
            <g class="minimap-nodes"></g>
        </g>
        {# Viewport indicator #}
        <rect :x="minimapViewport.x" :y="minimapViewport.y"
              :width="minimapViewport.w" :height="minimapViewport.h"
              fill="none" stroke="#6366f1" stroke-width="1" rx="2" />
    </svg>
</div>
{% endmacro %}