{% extends "base.html" %}
{% from "components/map.html" import map_assets %}
{% from "components/pipeline.html" import pipeline_assets, pipeline_canvas %}

{% block title %}Tusk Data - ETL Pipeline Builder{% endblock %}

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

{% block header_actions %}
<button onclick="showCode()" class="btn btn-sm">
    <i data-lucide="code"></i>View code
</button>
{% endblock %}

{% block content %}
<!-- Drop Overlay (shown when dragging files) -->
<div id="drop-overlay" class="drop-overlay hidden">
    <div class="drop-overlay-content">
        <i data-lucide="upload" class="w-12 h-12 mx-auto mb-3 text-indigo-400"></i>
        <div class="text-lg font-medium">Drop file to load</div>
        <div class="text-sm" style="color:var(--fg-3)">CSV, Parquet, JSON, OSM/PBF</div>
    </div>
</div>
<div class="studio-shell w-full">
<aside id="data-sidebar" class="r-sidebar relative" x-data="resizableSidebar('data')">
    <div class="resize-handle" @mousedown="startResize($event)"></div>
    <!-- Datasets Section -->
    <div class="p-3 border-b border-[#30363d]">
        <div class="flex items-center justify-between mb-3">
            <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide">1. Datasets</span>
            <button @click="showSourceModal()" class="p-1 hover:bg-[#21262d] rounded text-[#8b949e] hover:text-white" title="Add dataset">
                <i data-lucide="plus" class="w-4 h-4"></i>
            </button>
        </div>
        <div id="datasets-list" class="space-y-1">
            <div id="datasets-empty" class="text-[#8b949e] text-xs py-2">Click + to add a dataset</div>
        </div>
    </div>

    <!-- Transforms Section -->
    <div class="flex-1 p-3 overflow-auto">
        <div class="flex items-center justify-between mb-3">
            <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide">2. Transforms</span>
            <button @click="showAddTransformModal()" class="p-1 hover:bg-[#21262d] rounded text-[#8b949e] hover:text-white" title="Add transform">
                <i data-lucide="plus" class="w-4 h-4"></i>
            </button>
        </div>
        <div id="transforms-list" class="space-y-1">
            <div class="text-[#8b949e] text-xs py-2">Add filters, sorts, joins...<br/>(optional)</div>
        </div>
    </div>

    <!-- Quick Transforms -->
    <div class="p-3 border-t border-[#30363d]">
        <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide">Quick Transforms</span>
        <div class="mt-2 space-y-1">
            <button @click="quickTransform('filter')" class="w-full text-left px-2 py-1.5 rounded hover:bg-[#21262d] text-sm flex items-center gap-2">
                <i data-lucide="filter" class="w-4 h-4 text-[#58a6ff]"></i> Filter
            </button>
            <button @click="quickTransform('select')" class="w-full text-left px-2 py-1.5 rounded hover:bg-[#21262d] text-sm flex items-center gap-2">
                <i data-lucide="columns" class="w-4 h-4 text-[#58a6ff]"></i> Select Columns
            </button>
            <button @click="quickTransform('sort')" class="w-full text-left px-2 py-1.5 rounded hover:bg-[#21262d] text-sm flex items-center gap-2">
                <i data-lucide="arrow-up-down" class="w-4 h-4 text-[#58a6ff]"></i> Sort
            </button>
            <button @click="quickTransform('group_by')" class="w-full text-left px-2 py-1.5 rounded hover:bg-[#21262d] text-sm flex items-center gap-2">
                <i data-lucide="group" class="w-4 h-4 text-[#58a6ff]"></i> Group By
            </button>
        </div>
    </div>

    <!-- Saved Pipelines -->
    <div class="p-3 border-t border-[#30363d]" x-data="{ expanded: true }">
        <div class="flex items-center justify-between mb-2 cursor-pointer" @click="expanded = !expanded; $nextTick(() => lucide.createIcons())">
            <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide flex items-center gap-1">
                <i data-lucide="bookmark" class="w-3.5 h-3.5"></i> Saved Pipelines
            </span>
            <svg x-show="expanded" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#8b949e]"><path d="m6 9 6 6 6-6"/></svg>
            <svg x-show="!expanded" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#8b949e]"><path d="m9 18 6-6-6-6"/></svg>
        </div>
        <div x-show="expanded" id="sidebar-pipelines" class="space-y-1 max-h-64 overflow-auto">
            <div class="text-[#8b949e] text-xs py-1">No saved pipelines</div>
        </div>
    </div>

    <!-- Downloads -->
    <div class="p-3 border-t border-[#30363d]" x-data="{ expanded: false }">
        <div class="flex items-center justify-between mb-2 cursor-pointer" @click="expanded = !expanded; if(expanded) htmx.trigger('#downloads-list', 'load'); $nextTick(() => lucide.createIcons())">
            <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide flex items-center gap-1">
                <i data-lucide="download-cloud" class="w-3.5 h-3.5"></i> Downloads
            </span>
            <div class="flex items-center gap-1">
                <button @click.stop="$dispatch('open-add-download')" class="p-0.5 hover:bg-[#21262d] rounded text-[#8b949e] hover:text-white" title="Add download source">
                    <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                </button>
                <svg x-show="expanded" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#8b949e]"><path d="m6 9 6 6 6-6"/></svg>
                <svg x-show="!expanded" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[#8b949e]"><path d="m9 18 6-6-6-6"/></svg>
            </div>
        </div>
        <div x-show="expanded"
             id="downloads-list"
             class="max-h-48 overflow-auto"
             hx-get="/api/downloads/sources"
             hx-trigger="load"
             hx-swap="innerHTML">
            <div class="text-[#8b949e] text-xs py-1">Loading...</div>
        </div>
    </div>

    <!-- Actions -->
    <div class="p-3 border-t border-[#30363d] space-y-2">
        <div class="flex items-center justify-between mb-2">
            <span class="text-xs font-semibold text-[#8b949e] uppercase tracking-wide">3. Execute</span>
            <button @click="$dispatch('open-extensions')" class="p-1 hover:bg-[#21262d] rounded text-[#8b949e] hover:text-white" title="DuckDB Extensions">
                <i data-lucide="puzzle" class="w-4 h-4"></i>
            </button>
        </div>
        <button @click="runPipeline()" class="w-full bg-[#238636] hover:bg-[#2ea043] py-2 px-4 rounded-lg text-sm font-medium flex items-center justify-center gap-2">
            <i data-lucide="play" class="w-4 h-4"></i> Run Pipeline
        </button>
        <div class="flex gap-2">
            <button @click="showImportModal()" class="flex-1 bg-[#21262d] hover:bg-[#30363d] py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-1.5">
                <i data-lucide="database" class="w-3.5 h-3.5"></i> Import to DB
            </button>
            <button @click="showSavePipelineModal()" class="flex-1 bg-[#21262d] hover:bg-[#30363d] py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-1.5" title="Save pipeline">
                <i data-lucide="save" class="w-3.5 h-3.5"></i> Save
            </button>
            <button @click="showLoadPipelineModal()" class="bg-[#21262d] hover:bg-[#30363d] py-2 px-3 rounded-lg text-sm flex items-center justify-center" title="Load saved pipeline">
                <i data-lucide="folder-open" class="w-3.5 h-3.5"></i>
            </button>
        </div>
    </div>
</aside>

<!-- Main Panel - Results -->
<main style="flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)">
    <!-- Preview Header -->
    <div id="preview-header" style="padding:8px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface);flex-wrap:wrap;gap:8px">
        <div style="display:flex;align-items:center;gap:8px">
            <span style="font-weight:500;font-size:13px">Preview</span>
            <span id="results-stats" class="chip chip-green hidden"></span>
            <span id="engine-badge" class="chip chip-neutral hidden"></span>
        </div>
        <div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">
            <button id="toggle-canvas-btn" onclick="togglePipelineCanvas()" class="btn btn-sm btn-ghost" title="Toggle pipeline canvas">
                <i data-lucide="workflow"></i>Canvas
            </button>
            <span style="width:1px;height:18px;background:var(--border)"></span>
            <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-3)">
                Engine:
                <select id="engine-select" onchange="changeEngine()" style="font-size:12px;padding:3px 8px">
                    <option value="ibis+duckdb">Ibis · DuckDB (default)</option>
                    <option value="ibis+polars">Ibis · Polars</option>
                    <option value="duckdb">DuckDB (legacy)</option>
                    <option value="polars">Polars (legacy)</option>
                </select>
            </label>
            <button onclick="runProfile()" class="btn btn-sm btn-ghost" title="Profile columns (Ibis)">
                <i data-lucide="bar-chart-3"></i>Profile
            </button>
            <span style="width:1px;height:18px;background:var(--border)"></span>
            <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-3)">
                Rows:
                <select id="preview-limit" onchange="changeLimit()" style="font-size:12px;padding:3px 8px;width:80px">
                    <option value="100">100</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                    <option value="5000">5000</option>
                </select>
            </label>
            <span style="width:1px;height:18px;background:var(--border)"></span>
            <button onclick="exportResults('csv')" class="btn btn-sm btn-ghost"><i data-lucide="download"></i>CSV</button>
            <button onclick="exportResults('parquet')" class="btn btn-sm btn-ghost"><i data-lucide="download"></i>Parquet</button>
        </div>
    </div>

    <!-- Pipeline canvas (collapsible) -->
    <div id="pipeline-canvas-container" class="hidden" style="border-bottom:1px solid var(--border)">
        {{ pipeline_canvas(id="data-pipeline", height="280px", toolbar=true, minimap=false) }}
    </div>

    <!-- Results -->
    <div id="results-container" style="flex:1;overflow:auto;padding:32px 24px">
        <div style="max-width:520px;margin:0 auto;text-align:center">
            <i data-lucide="workflow" style="width:64px;height:64px;color:var(--fg-4);margin-bottom:16px"></i>
            <h3 style="font-family:var(--serif);font-size:28px;line-height:1.1;letter-spacing:-.01em;margin-bottom:6px">Build a data pipeline</h3>
            <p style="color:var(--fg-3);font-size:14px;margin-bottom:20px">From file or table to clean output in three steps.</p>

            <div class="card" style="padding:18px;text-align:left;display:flex;flex-direction:column;gap:14px">
                <div style="display:flex;align-items:flex-start;gap:12px">
                    <span style="width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0">1</span>
                    <div style="font-size:13px"><strong>Select a data source</strong><br/><span style="color:var(--fg-3)">File (CSV, Parquet, JSON, OSM) or database table/query</span></div>
                </div>
                <div style="display:flex;align-items:flex-start;gap:12px">
                    <span style="width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0">2</span>
                    <div style="font-size:13px"><strong>Add transforms</strong> <span style="color:var(--fg-4)">(optional)</span><br/><span style="color:var(--fg-3)">Filter, sort, join, group by…</span></div>
                </div>
                <div style="display:flex;align-items:flex-start;gap:12px">
                    <span style="width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0">3</span>
                    <div style="font-size:13px"><strong>Run &amp; export</strong><br/><span style="color:var(--fg-3)">Preview, export to CSV / Parquet, or import to DB</span></div>
                </div>
            </div>
        </div>
    </div>
</main>
</div>
{% endblock %}

{% block modals %}
<!-- File Browser Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-file-browser.window="open = true"
     x-on:close-file-browser.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-[60] flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl w-[600px] max-h-[80vh] border border-[#30363d] shadow-2xl flex flex-col" @click.stop>
        <div class="p-4 border-b border-[#30363d] flex items-center justify-between">
            <h3 class="text-lg font-bold">Select File</h3>
            <button @click="open = false" class="text-gray-400 hover:text-white text-xl px-2">&times;</button>
        </div>
        <div class="px-4 py-2 border-b border-[#30363d] flex items-center gap-2">
            <button @click="browseParent()" class="p-1.5 hover:bg-[#21262d] rounded" title="Go up">
                <i data-lucide="arrow-up" class="w-4 h-4"></i>
            </button>
            <input id="browser-path" value="~" class="flex-1 bg-[#0d1117] border border-[#30363d] rounded px-3 py-1.5 text-sm font-mono focus:outline-none focus:border-indigo-500" @keydown.enter="browseTo($el.value)">
            <button @click="browseTo(document.getElementById('browser-path').value)" class="px-3 py-1.5 bg-[#21262d] hover:bg-[#30363d] rounded text-sm">Go</button>
        </div>
        <div id="browser-files" class="flex-1 overflow-auto p-2 min-h-[300px]">
            <div class="text-gray-500 text-center py-8">Loading...</div>
        </div>
        <div class="p-4 border-t border-[#30363d] flex justify-end">
            <button @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
        </div>
    </div>
</div>

<!-- Source Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-source-modal.window="open = true"
     x-on:close-source-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[550px] border border-[#30363d] shadow-2xl" @click.stop>
        <h3 class="text-lg font-bold mb-4">Add Dataset</h3>

        <!-- Dataset Name (optional, shared across all tabs) -->
        <div class="mb-4">
            <label class="block text-sm text-gray-400 mb-1">Name <span class="text-[#484f58]">(optional)</span></label>
            <input id="source-name" placeholder="Auto-generated from path if empty" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500 text-sm">
        </div>

        <!-- Source Type Tabs -->
        <div class="flex gap-1 mb-4 bg-[#0d1117] p-1 rounded-lg">
            <button @click="setSourceTab('file')" id="source-tab-file" class="flex-1 px-3 py-2 rounded text-sm font-medium bg-[#21262d] text-white">
                <i data-lucide="file" class="w-4 h-4 inline mr-1"></i> File
            </button>
            <button @click="setSourceTab('database')" id="source-tab-database" class="flex-1 px-3 py-2 rounded text-sm font-medium text-[#8b949e] hover:text-white">
                <i data-lucide="database" class="w-4 h-4 inline mr-1"></i> Database
            </button>
            <button @click="setSourceTab('plugin')" id="source-tab-plugin" class="flex-1 px-3 py-2 rounded text-sm font-medium text-[#8b949e] hover:text-white">
                <i data-lucide="puzzle" class="w-4 h-4 inline mr-1"></i> Plugins
            </button>
        </div>

        <!-- File Source -->
        <div id="source-file-section" class="space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">File Path</label>
                <div class="flex gap-2">
                    <input id="source-path" placeholder="~/data/myfile.csv" @change="detectFileType()" class="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500 font-mono text-sm">
                    <button @click="showFileBrowser()" class="px-3 py-2 bg-[#21262d] hover:bg-[#30363d] rounded-lg text-sm flex items-center gap-1">
                        <i data-lucide="folder-open" class="w-4 h-4"></i> Browse
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-1">Supports CSV, Parquet, JSON and OSM (.osm.pbf) files</p>
            </div>
            <div id="osm-layer-section" class="hidden">
                <label class="block text-sm text-gray-400 mb-1">OSM Layer</label>
                <select id="osm-layer" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                    <option value="nodes">Nodes/Points - POIs, addresses, standalone points</option>
                    <option value="ways">Ways/Lines - Roads, paths, building outlines</option>
                    <option value="relations">Relations - Routes, boundaries, complex structures</option>
                    <option value="all">All Data - Everything (nodes + ways + relations)</option>
                </select>
            </div>
            <button @click="previewSource()" class="text-sm text-indigo-400 hover:text-indigo-300">Preview file...</button>
            <div id="source-schema" class="hidden">
                <label class="block text-sm text-gray-400 mb-1">Columns</label>
                <div id="schema-columns" class="bg-[#0d1117] rounded-lg p-3 max-h-40 overflow-auto text-xs font-mono"></div>
            </div>
        </div>

        <!-- Database Source -->
        <div id="source-db-section" class="hidden space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Connection</label>
                <select id="source-db-connection" @change="loadDbTables()" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                    <option value="">Select a connection...</option>
                </select>
                <p class="text-xs text-gray-500 mt-1">Add connections from the Studio page</p>
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Source Type</label>
                <div class="flex gap-2">
                    <button @click="setDbSourceType('table')" id="db-source-table-btn" class="flex-1 px-3 py-2 rounded bg-[#21262d] text-white text-sm">Table</button>
                    <button @click="setDbSourceType('query')" id="db-source-query-btn" class="flex-1 px-3 py-2 rounded bg-[#0d1117] text-[#8b949e] hover:text-white text-sm">Custom Query</button>
                </div>
            </div>
            <div id="db-table-section">
                <label class="block text-sm text-gray-400 mb-1">Table</label>
                <select id="source-db-table" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                    <option value="">Select a table...</option>
                </select>
            </div>
            <div id="db-query-section" class="hidden">
                <label class="block text-sm text-gray-400 mb-1">SQL Query</label>
                <textarea id="source-db-query" rows="4" placeholder="SELECT * FROM my_table WHERE ..." class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500 font-mono text-sm"></textarea>
            </div>
            <button @click="previewDbSource()" class="text-sm text-indigo-400 hover:text-indigo-300">Preview data...</button>
            <div id="db-source-schema" class="hidden">
                <label class="block text-sm text-gray-400 mb-1">Columns</label>
                <div id="db-schema-columns" class="bg-[#0d1117] rounded-lg p-3 max-h-40 overflow-auto text-xs font-mono"></div>
            </div>
        </div>

        <!-- Plugin Datasets Source -->
        <div id="source-plugin-section" class="hidden space-y-4">
            <p class="text-xs text-gray-500">Datasets exposed by installed plugins. Queryable via DuckDB <code class="text-[#f0883e]">sqlite_scan()</code>.</p>
            <div id="plugin-datasets-list" class="space-y-2 max-h-64 overflow-auto">
                <div class="text-xs text-[#8b949e] py-4 text-center">Loading plugin datasets...</div>
            </div>
        </div>

        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button @click="open = false; $dispatch('close-source-modal')" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
            <button @click="selectSource()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Select</button>
        </div>
    </div>
</div>

<!-- Transform Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-transform-modal.window="open = true"
     x-on:close-transform-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[500px] max-h-[80vh] border border-[#30363d] shadow-2xl flex flex-col" @click.stop>
        <h3 class="text-lg font-bold mb-4">Add Transform</h3>
        <div id="transform-type-select" class="grid grid-cols-2 gap-2 mb-4">
            <button @click="selectTransformType('filter')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#58a6ff]/20 rounded-lg"><i data-lucide="filter" class="w-4 h-4 text-[#58a6ff]"></i></div>
                <div><div class="font-medium text-sm">Filter</div><div class="text-xs text-[#8b949e]">Filter rows by condition</div></div>
            </button>
            <button @click="selectTransformType('select')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#a371f7]/20 rounded-lg"><i data-lucide="columns" class="w-4 h-4 text-[#a371f7]"></i></div>
                <div><div class="font-medium text-sm">Select</div><div class="text-xs text-[#8b949e]">Select specific columns</div></div>
            </button>
            <button @click="selectTransformType('sort')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#f0883e]/20 rounded-lg"><i data-lucide="arrow-up-down" class="w-4 h-4 text-[#f0883e]"></i></div>
                <div><div class="font-medium text-sm">Sort</div><div class="text-xs text-[#8b949e]">Sort by columns</div></div>
            </button>
            <button @click="selectTransformType('group_by')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#3fb950]/20 rounded-lg"><i data-lucide="group" class="w-4 h-4 text-[#3fb950]"></i></div>
                <div><div class="font-medium text-sm">Group By</div><div class="text-xs text-[#8b949e]">Aggregate data</div></div>
            </button>
            <button @click="selectTransformType('rename')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#58a6ff]/20 rounded-lg"><i data-lucide="pencil" class="w-4 h-4 text-[#58a6ff]"></i></div>
                <div><div class="font-medium text-sm">Rename</div><div class="text-xs text-[#8b949e]">Rename columns</div></div>
            </button>
            <button @click="selectTransformType('drop_nulls')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#f85149]/20 rounded-lg"><i data-lucide="trash-2" class="w-4 h-4 text-[#f85149]"></i></div>
                <div><div class="font-medium text-sm">Drop Nulls</div><div class="text-xs text-[#8b949e]">Remove null values</div></div>
            </button>
            <button @click="selectTransformType('limit')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#8b949e]/20 rounded-lg"><i data-lucide="hash" class="w-4 h-4 text-[#8b949e]"></i></div>
                <div><div class="font-medium text-sm">Limit</div><div class="text-xs text-[#8b949e]">Limit number of rows</div></div>
            </button>
            <button @click="selectTransformType('join')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#3fb950]/20 rounded-lg"><i data-lucide="git-merge" class="w-4 h-4 text-[#3fb950]"></i></div>
                <div><div class="font-medium text-sm">Join</div><div class="text-xs text-[#8b949e]">Join with another dataset</div></div>
            </button>
            <button @click="selectTransformType('concat')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#f0883e]/20 rounded-lg"><i data-lucide="layers" class="w-4 h-4 text-[#f0883e]"></i></div>
                <div><div class="font-medium text-sm">Concat</div><div class="text-xs text-[#8b949e]">Union/append datasets</div></div>
            </button>
            <button @click="selectTransformType('distinct')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#a371f7]/20 rounded-lg"><i data-lucide="fingerprint" class="w-4 h-4 text-[#a371f7]"></i></div>
                <div><div class="font-medium text-sm">Distinct</div><div class="text-xs text-[#8b949e]">Remove duplicate rows</div></div>
            </button>
            <button @click="selectTransformType('window')" class="p-3 rounded-lg border border-[#30363d] hover:border-[#6366f1] hover:bg-[#6366f1]/10 text-left flex items-start gap-3 transition-colors">
                <div class="p-2 bg-[#79c0ff]/20 rounded-lg"><i data-lucide="bar-chart-3" class="w-4 h-4 text-[#79c0ff]"></i></div>
                <div><div class="font-medium text-sm">Window</div><div class="text-xs text-[#8b949e]">row_number, rank, lag, lead</div></div>
            </button>
        </div>
        <div id="transform-config" class="hidden flex-1 overflow-auto">
            <div id="config-filter" class="hidden space-y-3">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Column</label>
                    <select id="filter-column" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2"></select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Operator</label>
                    <select id="filter-operator" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="eq">Equals (=)</option>
                        <option value="ne">Not Equals</option>
                        <option value="gt">Greater Than</option>
                        <option value="gte">Greater or Equal</option>
                        <option value="lt">Less Than</option>
                        <option value="lte">Less or Equal</option>
                        <option value="contains">Contains</option>
                        <option value="is_null">Is Null</option>
                        <option value="is_not_null">Is Not Null</option>
                        <option value="is_empty">Is Empty (List)</option>
                        <option value="is_not_empty">Is Not Empty (List)</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Value</label>
                    <input id="filter-value" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                </div>
            </div>
            <div id="config-select" class="hidden space-y-3">
                <label class="block text-sm text-gray-400 mb-1">Select Columns</label>
                <div id="select-columns" class="bg-[#0d1117] rounded-lg p-3 max-h-48 overflow-auto space-y-1"></div>
            </div>
            <div id="config-sort" class="hidden space-y-3">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Sort By</label>
                    <select id="sort-column" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2"></select>
                </div>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" id="sort-descending" class="accent-indigo-500">
                    <span class="text-sm">Descending</span>
                </label>
            </div>
            <div id="config-group_by" class="hidden space-y-3">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Group By</label>
                    <div id="groupby-columns" class="bg-[#0d1117] rounded-lg p-3 max-h-32 overflow-auto space-y-1"></div>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Aggregations</label>
                    <div id="agg-rows" class="space-y-2"></div>
                    <button type="button" onclick="addAggRow()" class="mt-2 text-xs text-indigo-400 hover:text-indigo-300 flex items-center gap-1">
                        <i data-lucide="plus" class="w-3 h-3"></i> Add aggregation
                    </button>
                </div>
            </div>
            <div id="config-rename" class="hidden space-y-3">
                <div class="flex gap-2">
                    <div class="flex-1">
                        <label class="block text-sm text-gray-400 mb-1">From</label>
                        <select id="rename-from" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2"></select>
                    </div>
                    <div class="flex-1">
                        <label class="block text-sm text-gray-400 mb-1">To</label>
                        <input id="rename-to" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                    </div>
                </div>
            </div>
            <div id="config-drop_nulls" class="hidden space-y-3">
                <label class="block text-sm text-gray-400 mb-1">Columns (leave empty for all)</label>
                <div id="dropnulls-columns" class="bg-[#0d1117] rounded-lg p-3 max-h-48 overflow-auto space-y-1"></div>
            </div>
            <div id="config-limit" class="hidden space-y-3">
                <label class="block text-sm text-gray-400 mb-1">Number of Rows</label>
                <input id="limit-n" type="number" value="100" min="1" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
            </div>
            <div id="config-join" class="hidden space-y-3">
                <!-- Source tabs -->
                <div class="flex bg-[#0d1117] rounded-lg p-0.5 mb-2">
                    <button type="button" onclick="setJoinSourceTab('file')" id="join-tab-file" class="flex-1 px-3 py-1.5 rounded-md text-xs font-medium bg-[#21262d] text-white">File</button>
                    <button type="button" onclick="setJoinSourceTab('database')" id="join-tab-database" class="flex-1 px-3 py-1.5 rounded-md text-xs font-medium text-[#8b949e]">Database</button>
                </div>
                <!-- File source -->
                <div id="join-source-file">
                    <label class="block text-sm text-gray-400 mb-1">Join with File</label>
                    <div class="flex gap-2">
                        <input id="join-file-path" placeholder="~/data/other.csv" class="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 font-mono text-sm">
                        <button @click="browseJoinFile()" class="px-3 py-2 bg-[#21262d] hover:bg-[#30363d] rounded-lg text-sm">
                            <i data-lucide="folder-open" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
                <!-- Database source -->
                <div id="join-source-database" class="hidden space-y-2">
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Connection</label>
                        <select id="join-db-connection" onchange="loadJoinDbTables()" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                            <option value="">Select a connection...</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Table</label>
                        <select id="join-db-table" onchange="selectJoinDbTable()" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                            <option value="">Select connection first...</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Custom SQL (optional)</label>
                        <textarea id="join-db-sql" placeholder="Leave empty to use full table, or write a custom query" rows="2"
                                  class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 font-mono text-sm resize-y"></textarea>
                    </div>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Join Type</label>
                    <select id="join-how" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="inner">Inner Join - Only matching rows</option>
                        <option value="left">Left Join - All left + matching right</option>
                        <option value="right">Right Join - All right + matching left</option>
                        <option value="outer">Outer Join - All rows from both</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Join On Column (left table)</label>
                    <select id="join-left-on" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2"></select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Join On Column (right table)</label>
                    <select id="join-right-on" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="">Select source first...</option>
                    </select>
                </div>
            </div>
            <div id="config-concat" class="hidden space-y-3">
                <!-- Source tabs -->
                <div class="flex bg-[#0d1117] rounded-lg p-0.5 mb-2">
                    <button type="button" onclick="setConcatSourceTab('file')" id="concat-tab-file" class="flex-1 px-3 py-1.5 rounded-md text-xs font-medium bg-[#21262d] text-white">File</button>
                    <button type="button" onclick="setConcatSourceTab('database')" id="concat-tab-database" class="flex-1 px-3 py-1.5 rounded-md text-xs font-medium text-[#8b949e]">Database</button>
                </div>
                <!-- File source -->
                <div id="concat-source-file">
                    <label class="block text-sm text-gray-400 mb-1">Concat with File</label>
                    <div class="flex gap-2">
                        <input id="concat-file-path" placeholder="~/data/other.csv" class="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 font-mono text-sm">
                        <button @click="browseConcatFile()" class="px-3 py-2 bg-[#21262d] hover:bg-[#30363d] rounded-lg text-sm">
                            <i data-lucide="folder-open" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
                <!-- Database source -->
                <div id="concat-source-database" class="hidden space-y-2">
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Connection</label>
                        <select id="concat-db-connection" onchange="loadConcatDbTables()" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                            <option value="">Select a connection...</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Table</label>
                        <select id="concat-db-table" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                            <option value="">Select connection first...</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm text-gray-400 mb-1">Custom SQL (optional)</label>
                        <textarea id="concat-db-sql" placeholder="Leave empty to use full table, or write a custom query" rows="2"
                                  class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 font-mono text-sm resize-y"></textarea>
                    </div>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Concat Mode</label>
                    <select id="concat-how" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="vertical">Vertical - Stack rows (same columns)</option>
                        <option value="diagonal">Diagonal - Stack rows (fill missing columns with null)</option>
                        <option value="align">Align - Match columns by name</option>
                    </select>
                </div>
            </div>
            <div id="config-distinct" class="hidden space-y-3">
                <label class="block text-sm text-gray-400 mb-1">Dedup Columns (leave empty for all)</label>
                <div id="distinct-columns" class="bg-[#0d1117] rounded-lg p-3 max-h-48 overflow-auto space-y-1"></div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Keep</label>
                    <select id="distinct-keep" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="first">First occurrence</option>
                        <option value="last">Last occurrence</option>
                        <option value="any">Any (fastest)</option>
                        <option value="none">None (drop all duplicates)</option>
                    </select>
                </div>
            </div>
            <div id="config-window" class="hidden space-y-3">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Function</label>
                    <select id="window-function" onchange="toggleWindowColumnField()" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="row_number">row_number - Sequential numbering</option>
                        <option value="rank">rank - Rank with gaps</option>
                        <option value="dense_rank">dense_rank - Rank without gaps</option>
                        <option value="lag">lag - Previous row value</option>
                        <option value="lead">lead - Next row value</option>
                        <option value="cum_sum">cum_sum - Running total</option>
                        <option value="cum_max">cum_max - Running maximum</option>
                        <option value="cum_min">cum_min - Running minimum</option>
                    </select>
                </div>
                <div id="window-column-field" class="hidden">
                    <label class="block text-sm text-gray-400 mb-1">Column</label>
                    <select id="window-column" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2"></select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Order By</label>
                    <select id="window-order-by" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2"></select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Partition By (optional)</label>
                    <select id="window-partition-by" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                        <option value="">No partition</option>
                    </select>
                </div>
                <div class="flex items-center gap-3">
                    <label class="flex items-center gap-2 text-sm">
                        <input type="checkbox" id="window-descending" class="rounded">
                        Descending order
                    </label>
                </div>
                <div id="window-offset-field" class="hidden">
                    <label class="block text-sm text-gray-400 mb-1">Offset</label>
                    <input id="window-offset" type="number" value="1" min="1" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Result Column Name</label>
                    <input id="window-alias" value="window_col" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 font-mono text-sm">
                </div>
            </div>
        </div>
        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button @click="open = false; $dispatch('close-transform-modal')" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
            <button id="add-transform-btn" @click="addTransform()" class="hidden bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Add</button>
        </div>
    </div>
</div>

<!-- Map Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-map-modal.window="open = true"
     x-on:close-map-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl w-[90vw] h-[85vh] border border-[#30363d] shadow-2xl flex flex-col" @click.stop>
        <div class="p-4 border-b border-[#30363d] flex items-center justify-between">
            <h3 class="text-lg font-bold">Map View</h3>
            <div class="flex items-center gap-2">
                <button @click="exportGeoJSON()" class="text-xs px-3 py-1.5 rounded bg-[#21262d] hover:bg-[#30363d] text-gray-400 hover:text-white">Export GeoJSON</button>
                <button @click="open = false" class="text-gray-400 hover:text-white text-xl px-2">&times;</button>
            </div>
        </div>
        <div id="map-crs-bar" class="hidden px-4 py-2 border-b border-[#30363d] bg-[#f0883e]/10 flex items-center gap-3 text-sm">
            <i data-lucide="alert-triangle" class="w-4 h-4 text-[#f0883e] flex-shrink-0"></i>
            <span class="text-[#f0883e]">Projected coordinates detected</span>
            <select id="map-crs-select" class="bg-[#0d1117] border border-[#30363d] rounded px-2 py-1 text-xs">
                <option value="">Select source CRS...</option>
                <optgroup label="UTM North">
                    <option value="32614">EPSG:32614 — UTM 14N (Mexico)</option>
                    <option value="32615">EPSG:32615 — UTM 15N (Central America)</option>
                    <option value="32616">EPSG:32616 — UTM 16N (Cuba, Yucatán)</option>
                    <option value="32617">EPSG:32617 — UTM 17N (Florida, Cuba)</option>
                    <option value="32618">EPSG:32618 — UTM 18N (Eastern US, Jamaica)</option>
                    <option value="32619">EPSG:32619 — UTM 19N (DR, Puerto Rico)</option>
                    <option value="32620">EPSG:32620 — UTM 20N (Lesser Antilles)</option>
                    <option value="32621">EPSG:32621 — UTM 21N (Guyana)</option>
                </optgroup>
                <optgroup label="UTM South">
                    <option value="32718">EPSG:32718 — UTM 18S (Peru)</option>
                    <option value="32719">EPSG:32719 — UTM 19S (Chile, Argentina)</option>
                    <option value="32720">EPSG:32720 — UTM 20S (Brazil)</option>
                    <option value="32721">EPSG:32721 — UTM 21S (Brazil)</option>
                    <option value="32722">EPSG:32722 — UTM 22S (Brazil)</option>
                    <option value="32723">EPSG:32723 — UTM 23S (Brazil)</option>
                </optgroup>
                <optgroup label="Other">
                    <option value="3857">EPSG:3857 — Web Mercator</option>
                    <option value="2002">EPSG:2002 — Dominican Republic</option>
                </optgroup>
            </select>
            <input id="map-crs-custom" type="text" placeholder="or enter EPSG code" class="w-28 bg-[#0d1117] border border-[#30363d] rounded px-2 py-1 text-xs">
            <button onclick="window._applyReproject()" class="px-3 py-1 bg-[#238636] hover:bg-[#2ea043] rounded text-xs font-medium">Reproject</button>
        </div>
        <div id="map-container" class="flex-1"></div>
    </div>
</div>

<!-- Code Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-code-modal.window="open = true"
     x-on:close-code-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl w-[700px] max-h-[80vh] border border-[#30363d] shadow-2xl flex flex-col" @click.stop>
        <div class="p-4 border-b border-[#30363d] flex items-center justify-between">
            <h3 class="text-lg font-bold">Generated Polars Code</h3>
            <div class="flex items-center gap-2">
                <button @click="copyCodeFromModal()" class="text-xs px-3 py-1.5 rounded bg-[#21262d] hover:bg-[#30363d] text-gray-400 hover:text-white">Copy</button>
                <button @click="open = false" class="text-gray-400 hover:text-white text-xl px-2">&times;</button>
            </div>
        </div>
        <div class="flex-1 overflow-auto p-4">
            <pre id="code-modal-content" class="mono text-sm text-gray-300 whitespace-pre-wrap bg-[#0d1117] p-4 rounded-lg"></pre>
        </div>
    </div>
</div>

<!-- Import to DB Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-import-modal.window="open = true"
     x-on:close-import-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[500px] border border-[#30363d] shadow-2xl" @click.stop>
        <h3 class="text-lg font-bold mb-4">Import to Database</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Database</label>
                <select id="import-db-type" @change="toggleImportOptions()" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                    <option value="duckdb">DuckDB (In-Memory)</option>
                    <option value="duckdb-file">DuckDB (File)</option>
                    <option value="postgres">PostgreSQL Connection</option>
                </select>
            </div>
            <div id="import-duckdb-path" class="hidden">
                <label class="block text-sm text-gray-400 mb-1">Database File Path</label>
                <input id="import-db-path" placeholder="~/data/mydb.duckdb" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 font-mono text-sm">
            </div>
            <div id="import-postgres-conn" class="hidden">
                <label class="block text-sm text-gray-400 mb-1">PostgreSQL Connection</label>
                <select id="import-pg-connection" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
                    <option value="">Loading connections...</option>
                </select>
                <p class="text-xs text-[#8b949e] mt-1">Add connections from the Admin page</p>
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Table Name</label>
                <input id="import-table-name" placeholder="my_table" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
            </div>
            <div class="bg-[#0d1117] rounded-lg p-3 text-sm text-[#8b949e]">
                <div class="flex items-start gap-2">
                    <i data-lucide="info" class="w-4 h-4 mt-0.5 flex-shrink-0"></i>
                    <div>This will create a table with the current pipeline results. You can then query it from the Studio page.</div>
                </div>
            </div>
        </div>
        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
            <button id="import-btn" @click="importToDB()" class="bg-[#238636] hover:bg-[#2ea043] px-4 py-2 rounded-lg font-medium flex items-center gap-2">
                <i data-lucide="database" class="w-4 h-4"></i> Import
            </button>
        </div>
    </div>
</div>

<!-- Save Pipeline Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-save-modal.window="open = true"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[400px] border border-[#30363d] shadow-2xl" @click.stop>
        <h3 class="text-lg font-bold mb-4">Save Pipeline</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Pipeline Name</label>
                <input id="save-pipeline-name" placeholder="My Pipeline" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2">
            </div>
        </div>
        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
            <button @click="savePipelineWithName()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Save</button>
        </div>
    </div>
</div>

<!-- Load Pipeline Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-load-modal.window="open = true"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[500px] max-h-[80vh] border border-[#30363d] shadow-2xl flex flex-col" @click.stop>
        <h3 class="text-lg font-bold mb-4">Load Pipeline</h3>
        <div id="saved-pipelines-list" class="flex-1 overflow-auto space-y-2 min-h-[200px]">
            <div class="text-[#8b949e] text-center py-8">No saved pipelines</div>
        </div>
        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Close</button>
        </div>
    </div>
</div>

<!-- Add Download Source Modal -->
<div x-data="{ open: false, name: '', url: '', schedule: '', category: 'custom', format: 'auto' }"
     x-show="open"
     x-on:open-add-download.window="open = true; name = ''; url = ''; schedule = ''; category = 'custom'; format = 'auto'"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[500px] border border-[#30363d] shadow-2xl" @click.stop>
        <h3 class="text-lg font-bold mb-4">Add Download Source</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Name</label>
                <input x-model="name" placeholder="My Data Source" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500">
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">URL</label>
                <input x-model="url" placeholder="https://example.com/data.csv" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-indigo-500">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Category</label>
                    <select x-model="category" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500">
                        <option value="custom">Custom</option>
                        <option value="government">Government</option>
                        <option value="open-data">Open Data</option>
                        <option value="api">API</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-400 mb-1">Format</label>
                    <select x-model="format" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500">
                        <option value="auto">Auto-detect</option>
                        <option value="csv">CSV</option>
                        <option value="json">JSON</option>
                        <option value="parquet">Parquet</option>
                        <option value="xml">XML</option>
                        <option value="zip">ZIP</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="block text-sm text-gray-400 mb-1">Schedule <span class="text-[#484f58]">(optional, cron expression)</span></label>
                <input x-model="schedule" placeholder="0 */6 * * * (every 6 hours)" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:border-indigo-500">
            </div>
        </div>
        <div class="flex gap-3 justify-end pt-4 mt-4 border-t border-[#30363d]">
            <button @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
            <button @click="
                if (!name || !url) { tuskToast('Name and URL are required', 'error'); return; }
                fetch('/api/downloads/sources', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, url, category, format, schedule })
                }).then(r => {
                    if (r.ok) {
                        tuskToast('Download source added', 'success');
                        open = false;
                        htmx.trigger('#downloads-list', 'load');
                    } else {
                        r.json().then(d => tuskToast(d.error || 'Failed to add source', 'error'));
                    }
                }).catch(e => tuskToast(e.message, 'error'));
            " class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium flex items-center gap-2">
                <i data-lucide="plus" class="w-4 h-4"></i> Add Source
            </button>
        </div>
    </div>
</div>

<!-- DuckDB Extensions Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-extensions.window="open = true; refreshDuckDBExtensions()"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="absolute inset-0 bg-black/60" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl w-[600px] max-h-[80vh] border border-[#30363d] shadow-2xl flex flex-col" @click.stop>
        <div class="p-4 border-b border-[#30363d] flex items-center justify-between">
            <h3 class="text-lg font-bold flex items-center gap-2">
                <i data-lucide="puzzle" class="w-5 h-5 text-[#8b949e]"></i> DuckDB Extensions
            </h3>
            <div class="flex items-center gap-2">
                <button @click="refreshDuckDBExtensions()" class="text-sm text-gray-400 hover:text-white px-2 py-1 rounded hover:bg-[#21262d]">
                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                </button>
                <button @click="open = false" class="text-gray-400 hover:text-white text-xl px-2">&times;</button>
            </div>
        </div>
        <div class="px-4 py-2 border-b border-[#30363d] flex items-center gap-2">
            <label class="flex items-center gap-2 text-sm text-[#8b949e]">
                <input type="checkbox" id="show-all-duckdb-ext" @change="refreshDuckDBExtensions()" class="accent-indigo-500">
                Show all available
            </label>
        </div>
        <div id="duckdb-extensions-list" class="flex-1 overflow-auto">
            <div class="p-4 text-[#8b949e]">Loading...</div>
        </div>
        <div class="p-4 border-t border-[#30363d] text-xs text-[#8b949e]">
            <i data-lucide="info" class="w-3 h-3 inline"></i>
            Extensions are installed globally in ~/.duckdb/extensions/
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/data.js"></script>
{% endblock %}