{% extends "base.html" %}
{% from "components/map.html" import map_assets %}

{% block title %}Tusk Studio{% endblock %}

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

{% block styles %}{% endblock %}

{% block header_actions %}
<button onclick="showSettingsModal()" class="icon-btn" title="Settings">
    <i data-lucide="settings"></i>
</button>
{% endblock %}

{% block content %}
<!-- v0.4 Round 2: redesigned Studio interior. Class names map 1:1 to
     docs/design/redesign-v3.html. All styles live in studio-redesign.css
     and styles.css; all JS lives in studio.js / studio-views.js. -->
<div class="studio-shell w-full">
    <aside class="r-sidebar relative" x-data="resizableSidebar('studio')">
        <div class="resize-handle" @mousedown="startResize($event)"></div>

        <div class="side-section">
            <div class="side-label">
                <span>Connections</span>
                <button onclick="showConnModal()" class="icon-btn icon-mini" title="Add connection">
                    <i data-lucide="plus" class="plus"></i>
                </button>
            </div>
            <div id="connections-list">
                <div class="side-empty">No connections yet</div>
            </div>
            <div id="duckdb-connection" class="side-item mt-1" onclick="selectDuckDB()">
                <span class="dot gray" id="duckdb-status"></span>
                <i data-lucide="box"></i>
                <span>DuckDB (local)</span>
            </div>
        </div>

        <div class="side-section">
            <div class="side-label">
                <span>Files</span>
                <span class="flex gap-1">
                    <button onclick="showCreateFileModal()" class="icon-btn icon-mini" title="New database">
                        <i data-lucide="file-plus"></i>
                    </button>
                    <button onclick="showAddFolderModal()" class="icon-btn icon-mini" title="Add folder">
                        <i data-lucide="folder-plus"></i>
                    </button>
                </span>
            </div>
            <div id="files-list">
                <div class="side-empty">No folders added</div>
            </div>
        </div>

        <div class="side-section flex-grow">
            <div class="side-label">
                <span>Schema</span>
                <button onclick="refreshSchema()" class="icon-btn icon-mini" title="Refresh (F5)">
                    <i data-lucide="refresh-cw"></i>
                </button>
            </div>
            <input type="text" id="schema-search" class="side-search"
                   placeholder="Search tables…"
                   oninput="filterSchema(this.value)">
            <div id="schema-tree" class="side-scroll">
                <div class="side-empty">Select a connection</div>
            </div>
        </div>

        <div class="side-section">
            <div class="side-label"><span>Saved queries</span></div>
            <div id="saved-queries-list">
                <div class="side-empty">No saved queries</div>
            </div>
        </div>

        <div class="side-section">
            <div class="side-label">
                <span>History</span>
                <button onclick="clearHistory()" class="icon-btn icon-mini" title="Clear">
                    <i data-lucide="trash-2"></i>
                </button>
            </div>
            <input type="text" id="history-search" class="side-search"
                   placeholder="Search…"
                   oninput="filterHistory(this.value)">
            <div id="history-list" class="history-list"></div>
        </div>
    </aside>

    <!-- Studio body: tabs row + (editor + results) -->
    <div class="studio-grid">
        <div class="studio-tabs" id="query-tabs-host">
            <div id="query-tabs" class="tabs-row"></div>
            <button onclick="createTab()" class="icon-btn ml-1" title="New tab">
                <i data-lucide="plus"></i>
            </button>
            <div id="active-conn-meta" class="conn-meta">
                <span class="dot gray"></span>
                <span>No connection</span>
            </div>
        </div>

        <div class="studio-body">
            <div class="studio-main">
                <!-- Editor wrap -->
                <div class="editor-wrap">
                    <div class="editor-toolbar">
                        <div class="left">
                            <span class="chip chip-violet hidden" id="conn-chip">
                                <i data-lucide="zap"></i><span id="conn-chip-label">Postgres</span>
                            </span>
                            <span class="chip chip-neutral" id="engine-chip">
                                <i data-lucide="database"></i><span id="engine-chip-label">PostgreSQL</span>
                            </span>
                            <span class="chip chip-amber hidden" id="dirty-chip">
                                <i data-lucide="edit-3"></i>unsaved
                            </span>
                        </div>
                        <div class="right">
                            <button class="btn btn-sm btn-ghost icon-coral" onclick="window.tuskAI.open()" title="Ask AI to explain or generate SQL (Cmd+I)">
                                <i data-lucide="sparkles"></i>Ask AI
                            </button>
                            <button class="btn btn-sm btn-ghost" onclick="explainCurrentQuery()" title="EXPLAIN PLAN — Postgres query plan">
                                <i data-lucide="activity"></i>Plan
                            </button>
                            <button class="btn btn-sm btn-ghost" onclick="formatCurrentQuery()" title="Pretty-print the SQL">
                                <i data-lucide="wand-2"></i>Format
                            </button>
                            <button class="btn btn-sm btn-ghost" onclick="showSaveQueryModal()" title="Save query">
                                <i data-lucide="git-branch"></i>Save
                            </button>
                            <button id="run-btn" class="btn btn-sm btn-brand" onclick="runQuery()">
                                <i data-lucide="play"></i>Run
                                <span class="kbd kbd-on-brand">⌘⏎</span>
                            </button>
                        </div>
                    </div>
                    <div id="sql-editor" class="editor-host"></div>
                </div>

                <!-- Resize handle -->
                <div class="editor-splitter" id="editor-results-splitter" title="Drag to resize editor"></div>

                <!-- Results -->
                <div class="results">
                    <div class="results-toolbar">
                        <div class="left">
                            <span class="results-label">Result</span>
                            <span id="result-stats-chip" class="chip chip-green hidden">
                                <i data-lucide="check"></i><span id="result-stats-text"></span>
                            </span>
                            <span id="result-geo-chip" class="chip chip-violet hidden">
                                <i data-lucide="map-pin"></i>Geo detected
                            </span>
                            <span id="result-pagination-chip" class="chip chip-amber hidden">
                                <i data-lucide="layers"></i>server-paginated
                            </span>
                        </div>
                        <div class="right">
                            <div class="tablist" id="result-views">
                                <button data-view="table" class="on" onclick="setResultView('table')"><i data-lucide="table"></i>Table</button>
                                <button data-view="map" onclick="setResultView('map')" id="result-view-map" class="hidden"><i data-lucide="map"></i>Map</button>
                                <button data-view="chart" onclick="setResultView('chart')"><i data-lucide="bar-chart-3"></i>Chart</button>
                                <button data-view="json" onclick="setResultView('json')"><i data-lucide="braces"></i>JSON</button>
                                <button data-view="plan" onclick="setResultView('plan')"><i data-lucide="cpu"></i>Plan</button>
                            </div>
                            <button class="btn btn-sm btn-ghost" onclick="copyAsInsert()" title="Copy as INSERT statements">INSERT</button>
                            <button class="btn btn-sm btn-ghost" onclick="copyAsCSV()" title="Copy as CSV">Copy CSV</button>
                            <button class="btn btn-sm btn-ghost" onclick="exportCSV()" title="Download CSV"><i data-lucide="download"></i>CSV</button>
                            <button class="btn btn-sm btn-ghost" onclick="exportJSON()" title="Download JSON"><i data-lucide="download"></i>JSON</button>
                            <button class="btn btn-sm btn-ghost hidden" id="result-parquet-btn" onclick="showParquetModal()" title="Export to Parquet"><i data-lucide="download"></i>Parquet</button>
                        </div>
                    </div>

                    <div class="view-pane" id="results-table-view">
                        <div id="results-header" class="results-header"></div>
                        <div id="results-table" class="results-table-host"></div>
                    </div>

                    <div class="view-pane hidden map-view" id="results-map-view">
                        <!-- map populated when user clicks Map tab; this fills the pane -->
                    </div>

                    <div class="view-pane hidden" id="results-json-view">
                        <pre class="json-view" id="results-json-content"></pre>
                    </div>

                    <div class="view-pane hidden" id="results-chart-view">
                        <div class="chart-stub">
                            <i data-lucide="bar-chart-3"></i>
                            <span>Chart view is coming in v0.5. Pick a numeric column from the result and we'll bar-chart it here.</span>
                        </div>
                    </div>

                    <div class="view-pane hidden" id="results-plan-view">
                        <div class="plan-view" id="results-plan-content">
                            <div class="plan-empty">Run the query first, then click Plan to see EXPLAIN.</div>
                        </div>
                    </div>

                    <div class="results-status" id="results-status">
                        <span id="status-selected">0 selected of 0</span>
                        <div class="grow"></div>
                        <span id="status-pager-info">Page 1 of 1</span>
                        <span class="status-sep">·</span>
                        <span id="status-stream">streamed</span>
                        <div class="pager status-pager-buttons" id="status-pager">
                            <button id="pager-first" onclick="goToPage(1)" title="First"><i data-lucide="chevrons-left"></i></button>
                            <button id="pager-prev" onclick="pagerPrev()" title="Previous"><i data-lucide="chevron-left"></i></button>
                            <button id="pager-next" onclick="pagerNext()" title="Next"><i data-lucide="chevron-right"></i></button>
                            <button id="pager-last" onclick="pagerLast()" title="Last"><i data-lucide="chevrons-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block modals %}
<!-- Connection Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-conn-modal.window="open = true"
     x-on:close-conn-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[480px] max-h-[90vh] overflow-y-auto border border-[#30363d] shadow-2xl" @click.stop x-data="{ sshOpen: false }">
        <h3 id="conn-modal-title" class="text-lg font-bold mb-4">Add Connection</h3>
        <form id="conn-form" class="space-y-4">
            <input type="hidden" name="edit_id" id="conn-edit-id" value="">
            <div>
                <label class="block text-sm text-gray-400 mb-1">Connection Name</label>
                <input name="name" id="conn-name" placeholder="My Database" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500" required>
            </div>
            <div id="conn-type-selector" class="flex gap-4 flex-wrap">
                <label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="type" value="postgres" checked onchange="toggleConnFields()" class="accent-indigo-500"><span>&#128024; PostgreSQL</span></label>
                <label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="type" value="sqlite" onchange="toggleConnFields()" class="accent-indigo-500"><span>&#128451;&#65039; SQLite</span></label>
                <label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="type" value="duckdb" onchange="toggleConnFields()" class="accent-indigo-500"><span>&#129414; DuckDB</span></label>
            </div>
            <div id="postgres-fields" class="space-y-3">
                <div class="grid grid-cols-3 gap-3">
                    <div class="col-span-2"><label class="block text-sm text-gray-400 mb-1">Host</label><input name="host" id="conn-host" placeholder="localhost" value="localhost" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500"></div>
                    <div><label class="block text-sm text-gray-400 mb-1">Port</label><input name="port" id="conn-port" placeholder="5432" value="5432" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500"></div>
                </div>
                <div><label class="block text-sm text-gray-400 mb-1">Database</label><input name="database" id="conn-database" placeholder="postgres" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 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">User</label><input name="user" id="conn-user" placeholder="postgres" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500"></div>
                    <div><label class="block text-sm text-gray-400 mb-1">Password</label><input name="password" id="conn-password" type="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500"><p id="password-hint" class="text-xs text-gray-500 mt-1 hidden">Leave empty to keep current</p></div>
                </div>

                <!-- SSH tunnel: collapsible. Host the DB lives on stays in the
                     fields above; here we describe how to reach it. -->
                <div class="border border-[#30363d] rounded-lg">
                    <button type="button"
                            @click="sshOpen = !sshOpen"
                            class="w-full flex items-center justify-between px-3 py-2 text-sm text-gray-300 hover:bg-[#21262d]">
                        <span class="flex items-center gap-2">
                            <i data-lucide="lock" class="w-4 h-4"></i>
                            SSH Tunnel
                            <span class="text-xs text-gray-500" id="ssh-summary"></span>
                        </span>
                        <span x-text="sshOpen ? '▾' : '▸'" class="text-gray-500"></span>
                    </button>
                    <div x-show="sshOpen" x-cloak class="p-3 border-t border-[#30363d] space-y-3">
                        <p class="text-xs text-gray-500">
                            Optional. Reach the database through a bastion host. The fields above are
                            seen <em>from the bastion</em>, so use the database's internal hostname (often
                            <code class="bg-[#0d1117] px-1 rounded">localhost</code> or a private IP).
                        </p>
                        <div class="grid grid-cols-3 gap-3">
                            <div class="col-span-2">
                                <label class="block text-sm text-gray-400 mb-1">SSH Host</label>
                                <input name="ssh_host" id="conn-ssh-host" placeholder="bastion.example.com"
                                       class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                            </div>
                            <div>
                                <label class="block text-sm text-gray-400 mb-1">Port</label>
                                <input name="ssh_port" id="conn-ssh-port" placeholder="22" value="22"
                                       class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-1">SSH User</label>
                            <input name="ssh_user" id="conn-ssh-user" placeholder="deploy"
                                   class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-1">
                                Private Key <span class="text-xs text-gray-500">(PEM contents — paste, don't upload)</span>
                            </label>
                            <textarea name="ssh_private_key" id="conn-ssh-key" rows="4"
                                      placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;..."
                                      class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 font-mono text-xs focus:outline-none focus:border-indigo-500"></textarea>
                            <p class="text-xs text-gray-500 mt-1">Leave empty to use the SSH password below.</p>
                        </div>
                        <div>
                            <label class="block text-sm text-gray-400 mb-1">
                                SSH Password <span class="text-xs text-gray-500">(or key passphrase)</span>
                            </label>
                            <input type="password" name="ssh_password" id="conn-ssh-password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;"
                                   class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
                        </div>
                    </div>
                </div>
            </div>
            <div id="file-db-fields" class="hidden">
                <label class="block text-sm text-gray-400 mb-1">Database Path</label>
                <input name="path" id="conn-path" placeholder="~/data/app.db" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500">
            </div>
            <div class="flex gap-3 justify-between pt-2">
                <button type="button" id="test-conn-btn" onclick="testConnection()" class="px-4 py-2 rounded-lg bg-[#21262d] hover:bg-[#30363d] text-sm">Test Connection</button>
                <div class="flex gap-3">
                    <button type="button" @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
                    <button type="submit" id="conn-submit-btn" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Connect</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Databases Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-databases-modal.window="open = true"
     x-on:close-databases-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @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>
        <div class="flex items-center justify-between mb-4"><h3 class="text-lg font-bold">Databases on Server</h3><button @click="open = false" class="text-gray-400 hover:text-white text-xl">&times;</button></div>
        <p class="text-sm text-gray-400 mb-4">Click on a database to create a connection.</p>
        <div id="databases-list" class="flex-1 overflow-auto space-y-2"><div class="text-gray-500">Loading...</div></div>
    </div>
</div>

<!-- Settings Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-settings-modal.window="open = true"
     x-on:close-settings-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @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">Settings</h3>
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-300 mb-2">PostgreSQL Client Path</label>
            <p class="text-xs text-gray-500 mb-3">Path to pg_dump, psql, etc.</p>
            <div id="pg-paths-list" class="space-y-2 mb-3"><div class="text-gray-500 text-sm">Loading...</div></div>
            <div class="flex gap-2">
                <input id="pg-bin-path-input" type="text" placeholder="Custom path" class="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500">
                <button onclick="setPgBinPath()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg text-sm font-medium">Set</button>
            </div>
            <button onclick="clearPgBinPath()" class="text-sm text-gray-400 hover:text-white mt-2">Reset to auto-detect</button>
        </div>
        <div class="flex justify-end pt-2 border-t border-[#30363d]"><button @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Close</button></div>
    </div>
</div>

<!-- Save Query Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-save-query-modal.window="open = true"
     x-on:close-save-query-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[400px] border border-[#30363d] shadow-2xl" @click.stop>
        <h3 id="save-query-title" class="text-lg font-bold mb-4">Save Query</h3>
        <form id="save-query-form" class="space-y-4">
            <input type="hidden" id="save-query-id" value="">
            <div><label class="block text-sm text-gray-400 mb-1">Query Name</label><input id="save-query-name" placeholder="My Query" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500" required></div>
            <div><label class="block text-sm text-gray-400 mb-1">Folder (optional)</label><input id="save-query-folder" placeholder="e.g., Reports" class="w-full bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-500"></div>
            <div class="bg-[#0d1117] border border-[#30363d] rounded-lg p-3 max-h-32 overflow-auto"><pre id="save-query-preview" class="font-mono text-xs text-gray-400 whitespace-pre-wrap"></pre></div>
            <div class="flex gap-3 justify-end pt-2">
                <button type="button" @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Save</button>
            </div>
        </form>
    </div>
</div>

<!-- Create File Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-create-file-modal.window="open = true"
     x-on:close-create-file-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @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">Create New Database</h3>
        <form id="create-file-form" class="space-y-4">
            <div>
                <label class="block text-sm text-gray-400 mb-2">Database Type</label>
                <div class="flex gap-4">
                    <label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="file_type" value="sqlite" checked class="accent-indigo-500"><span>&#128451;&#65039; SQLite</span></label>
                    <label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="file_type" value="duckdb" class="accent-indigo-500"><span>&#129414; DuckDB</span></label>
                </div>
            </div>
            <div><label class="block text-sm text-gray-400 mb-1">File Path</label><input id="create-file-path" placeholder="~/data/mydb.sqlite" 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" required></div>
            <div class="flex gap-3 justify-end pt-2">
                <button type="button" @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
                <button type="submit" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg font-medium">Create</button>
            </div>
        </form>
    </div>
</div>

<!-- Folder Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-folder-modal.window="open = true"
     x-on:close-folder-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @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">Add Data Folder</h3>
        <form id="folder-form" class="space-y-4">
            <div><label class="block text-sm text-gray-400 mb-1">Folder Path</label><input id="folder-path" placeholder="~/data" 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" required></div>
            <div class="flex gap-3 justify-end pt-2">
                <button type="button" @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Add Folder</button>
            </div>
        </form>
    </div>
</div>

<!-- Parquet Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-parquet-modal.window="open = true"
     x-on:close-parquet-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @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">Export to Parquet</h3>
        <form id="parquet-form" class="space-y-4">
            <div><label class="block text-sm text-gray-400 mb-1">Output Path</label><input id="parquet-path" placeholder="~/data/output.parquet" 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" required></div>
            <div class="flex gap-3 justify-end pt-2">
                <button type="button" @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d]">Cancel</button>
                <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium">Export</button>
            </div>
        </form>
    </div>
</div>

<!-- File Preview Modal -->
<div x-data="{ open: false }"
     x-show="open"
     x-on:open-file-preview-modal.window="open = true"
     x-on:close-file-preview-modal.window="open = false"
     x-on:keydown.escape.window="open = false"
     x-cloak
     class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
    <div class="absolute inset-0" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl p-6 w-[800px] max-h-[80vh] border border-[#30363d] shadow-2xl flex flex-col" @click.stop>
        <div class="flex items-center justify-between mb-4"><h3 id="file-preview-title" class="text-lg font-bold">File Preview</h3><button @click="open = false" class="text-gray-400 hover:text-white text-xl">&times;</button></div>
        <div id="file-preview-info" class="text-sm text-gray-400 mb-3"></div>
        <div id="file-preview-content" class="flex-1 overflow-auto"><div class="text-gray-500">Loading...</div></div>
        <div class="flex gap-2 mt-4 pt-4 border-t border-[#30363d]">
            <button onclick="insertFileQuery()" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg text-sm font-medium">Insert Query</button>
            <button @click="open = false" class="px-4 py-2 rounded-lg hover:bg-[#21262d] text-sm">Close</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 bg-black/80 flex items-center justify-center z-50">
    <div class="absolute inset-0" @click="open = false"></div>
    <div class="relative bg-[#161b22] rounded-xl w-[90vw] h-[85vh] border border-[#30363d] shadow-2xl flex flex-col overflow-hidden" @click.stop>
        <div class="flex items-center justify-between px-4 py-3 border-b border-[#30363d]">
            <div class="flex items-center gap-3"><h3 class="text-lg font-bold">Map View</h3><span id="map-feature-count" class="text-xs text-gray-400 bg-[#21262d] px-2 py-1 rounded">0 features</span></div>
            <div class="flex items-center gap-2">
                <button onclick="exportGeoJSON()" class="text-xs px-3 py-1.5 rounded bg-green-600 hover:bg-green-700 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>
{% endblock %}

{% block scripts %}
<script type="module" src="/static/studio.js"></script>
<script src="/static/studio-views.js"></script>
{% endblock %}