{% extends "base.html" %}
{% block title %}Agent Canvas — Fusion-MLX{% endblock %}

{% block head %}
<style>
    #canvas-container {
        position: relative;
        width: 100%;
        height: calc(100vh - 120px);
        background: #f8f9fa;
        overflow: hidden;
        cursor: grab;
    }
    [data-theme="dark"] #canvas-container {
        background: #1a1b1e;
    }
    #canvas-svg {
        width: 100%;
        height: 100%;
    }
    .canvas-node {
        cursor: pointer;
        transition: filter 0.15s;
    }
    .canvas-node:hover {
        filter: brightness(1.1);
    }
    .canvas-node rect {
        rx: 8;
        ry: 8;
    }
    .canvas-edge {
        stroke: #94a3b8;
        stroke-width: 2;
        fill: none;
        marker-end: url(#arrowhead);
    }
    [data-theme="dark"] .canvas-edge {
        stroke: #475569;
    }
    .edge-label {
        font-size: 11px;
        fill: #64748b;
    }
    .toolbar {
        display: flex;
        gap: 8px;
        padding: 8px 16px;
        background: var(--bg-primary, #fff);
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        align-items: center;
    }
    [data-theme="dark"] .toolbar {
        background: #27272a;
        border-color: #3f3f46;
    }
    .toolbar-btn {
        padding: 6px 12px;
        border: 1px solid var(--border-color, #e2e8f0);
        border-radius: 6px;
        background: var(--bg-primary, #fff);
        cursor: pointer;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .toolbar-btn:hover {
        background: var(--bg-hover, #f1f5f9);
    }
    [data-theme="dark"] .toolbar-btn {
        background: #3f3f46;
        border-color: #52525b;
        color: #e4e4e7;
    }
    [data-theme="dark"] .toolbar-btn:hover {
        background: #52525b;
    }
    .node-palette {
        width: 200px;
        padding: 12px;
        border-right: 1px solid var(--border-color, #e2e8f0);
        background: var(--bg-primary, #fff);
    }
    [data-theme="dark"] .node-palette {
        background: #27272a;
        border-color: #3f3f46;
    }
    .palette-item {
        padding: 8px 12px;
        margin: 4px 0;
        border-radius: 6px;
        cursor: grab;
        font-size: 13px;
        border: 1px solid transparent;
    }
    .palette-item:hover {
        background: var(--bg-hover, #f1f5f9);
        border-color: var(--border-color, #e2e8f0);
    }
    [data-theme="dark"] .palette-item:hover {
        background: #3f3f46;
    }
    .node-type-start { border-left: 3px solid #22c55e; }
    .node-type-llm { border-left: 3px solid #3b82f6; }
    .node-type-tool { border-left: 3px solid #f59e0b; }
    .node-type-condition { border-left: 3px solid #8b5cf6; }
    .node-type-loop { border-left: 3px solid #ec4899; }
    .node-type-end { border-left: 3px solid #ef4444; }
    #properties-panel {
        width: 280px;
        padding: 12px;
        border-left: 1px solid var(--border-color, #e2e8f0);
        background: var(--bg-primary, #fff);
        overflow-y: auto;
    }
    [data-theme="dark"] #properties-panel {
        background: #27272a;
        border-color: #3f3f46;
    }
    .prop-group {
        margin-bottom: 12px;
    }
    .prop-group label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 4px;
        color: var(--text-secondary, #64748b);
    }
    .prop-group input, .prop-group select {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid var(--border-color, #e2e8f0);
        border-radius: 4px;
        font-size: 13px;
        background: var(--bg-primary, #fff);
    }
    [data-theme="dark"] .prop-group input,
    [data-theme="dark"] .prop-group select {
        background: #3f3f46;
        border-color: #52525b;
        color: #e4e4e7;
    }
    .layout { display: flex; height: calc(100vh - 120px); }
    .no-graph { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 16px; }
</style>
{% endblock %}

{% block content %}
<div class="toolbar">
    <span style="font-weight: 600; font-size: 14px;">🧩 Agent Canvas</span>
    <div style="flex:1"></div>
    <button class="toolbar-btn" onclick="newGraph()">+ New</button>
    <button class="toolbar-btn" onclick="saveGraph()">💾 Save</button>
    <button class="toolbar-btn" onclick="loadGraph()">📂 Load</button>
    <button class="toolbar-btn" onclick="exportGraph()">📤 Export</button>
    <button class="toolbar-btn" onclick="runGraph()">▶ Run</button>
    <select id="graph-selector" onchange="onGraphSelect(this.value)" style="display:none; padding:4px 8px; border-radius:4px; font-size:13px;">
        <option value="">-- Select Graph --</option>
    </select>
</div>
<div class="layout">
    <div class="node-palette" id="palette">
        <div style="font-size:12px; font-weight:600; margin-bottom:8px; color:#64748b;">NODE TYPES</div>
        <div class="palette-item node-type-start" draggable="true" data-type="start" ondragstart="onDragStart(event)">▶ Start</div>
        <div class="palette-item node-type-llm" draggable="true" data-type="llm" ondragstart="onDragStart(event)">🤖 LLM Think</div>
        <div class="palette-item node-type-tool" draggable="true" data-type="tool" ondragstart="onDragStart(event)">🔧 Tool Call</div>
        <div class="palette-item node-type-condition" draggable="true" data-type="condition" ondragstart="onDragStart(event)">🔀 Condition</div>
        <div class="palette-item node-type-loop" draggable="true" data-type="loop" ondragstart="onDragStart(event)">🔄 Loop</div>
        <div class="palette-item node-type-end" draggable="true" data-type="end" ondragstart="onDragStart(event)">⏹ End</div>
    </div>
    <div id="canvas-container" style="flex:1">
        <svg id="canvas-svg">
            <defs>
                <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8" />
                </marker>
                <marker id="arrowhead-dark" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#475569" />
                </marker>
            </defs>
        </svg>
        <div class="no-graph" id="no-graph-msg">Drag nodes from the palette to start building your agent graph</div>
    </div>
    <div id="properties-panel">
        <div style="font-size:12px; font-weight:600; margin-bottom:8px; color:#64748b;">PROPERTIES</div>
        <div id="properties-content" style="color:#94a3b8; font-size:13px;">Select a node to edit its properties</div>
    </div>
</div>
<script src="{{ static('js/canvas.js') }}"></script>
{% endblock %}