<?php declare(strict_types=1); ?>
<!-- ── SQL Editor ─────────────────────────────────────────────────────────── -->
<div class="modal fade sqled-modal" id="sqlEditorModal" tabindex="-1" aria-labelledby="sqlEditorLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content sqled">
            <div class="modal-header sqled-header">
                <div class="sqled-title-wrap">
                    <h5 class="modal-title" id="sqlEditorLabel"><i class="bi bi-terminal me-2"></i>SQL Editor</h5>
                    <div class="sqled-sub">
                        Runs against <strong id="sqledDbName">this project</strong>’s database
                        <span class="sqled-badge" id="sqledDialect" title="Active database engine">SQL</span>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body sqled-body">
                <!-- Compose &amp; rehearse — none of these write to the database -->
                <div class="sqled-bar">
                    <span class="sqled-bar-label">Safe:</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="sqledPreview" title="See the plan — statements, row counts, risky ops. Nothing runs.">
                        <i class="bi bi-list-check"></i> Preview
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="sqledDryRun" title="Rehearse the whole script, then roll it all back — saves nothing (supported engines only).">
                        <i class="bi bi-shield-check"></i> Dry run
                    </button>
                    <span class="sqled-sep"></span>
                    <label class="btn btn-sm btn-outline-secondary mb-0" title="Open a .sql file into the editor (up to 5 MB).">
                        <i class="bi bi-upload"></i> Load .sql
                        <input type="file" id="sqledFile" accept=".sql,.txt,text/plain" hidden>
                    </label>
                    <div class="dropdown d-inline-block">
                        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" title="Insert a ready-made snippet — it adapts to your engine.">
                            <i class="bi bi-braces"></i> Snippets
                        </button>
                        <ul class="dropdown-menu sqled-snippets">
                            <li><h6 class="dropdown-header">Schema — safe by default</h6></li>
                            <li><button type="button" class="dropdown-item" data-snippet="create">Create table (if not exists)</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="drop-table">Drop table (if exists)</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="add-col">Add column</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="drop-col">Drop column</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="rename">Rename table</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="index">Add index</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="unique">Add unique index</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="fk">Add foreign key</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="timestamps">Add created/updated timestamps</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="view">Create / replace view</button></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><h6 class="dropdown-header">Data (DML)</h6></li>
                            <li><button type="button" class="dropdown-item" data-snippet="insert">Insert rows</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="update">Update rows (with WHERE)</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="delete">Delete rows (with WHERE)</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="upsert">Insert or update (upsert)</button></li>
                            <li><button type="button" class="dropdown-item text-danger" data-snippet="truncate">Empty a table (truncate)</button></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><h6 class="dropdown-header">Query</h6></li>
                            <li><button type="button" class="dropdown-item" data-snippet="select">Select &amp; filter</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="join">Select with JOIN</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="aggregate">Group &amp; count</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="paginate">Paginate (limit / offset)</button></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><h6 class="dropdown-header">Utility</h6></li>
                            <li><button type="button" class="dropdown-item" data-snippet="count">Count rows</button></li>
                            <li><button type="button" class="dropdown-item" data-snippet="tables">List tables</button></li>
                        </ul>
                    </div>
                    <div class="dropdown d-inline-block">
                        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" id="sqledHistoryBtn" data-bs-toggle="dropdown" title="Reload a script you ran recently (saved in this browser).">
                            <i class="bi bi-clock-history"></i> History
                        </button>
                        <ul class="dropdown-menu sqled-history-menu" id="sqledHistoryMenu"><li><span class="dropdown-item-text text-muted">No history yet.</span></li></ul>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="sqledFormat" title="Tidy the formatting — cosmetic only.">
                        <i class="bi bi-magic"></i> Format
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="sqledClear" title="Empty the editor.">
                        <i class="bi bi-eraser"></i> Clear
                    </button>
                    <span class="sqled-sep"></span>
                    <label class="sqled-check" title="Stop at the first statement that fails (earlier ones stay applied).">
                        <input type="checkbox" id="sqledStop" checked> Stop on error
                    </label>
                    <label class="sqled-check" title="Wrap the run in a transaction and roll back on error (only engines with transactional DDL can undo CREATE/ALTER).">
                        <input type="checkbox" id="sqledTx"> Transaction
                    </label>
                </div>

                <!-- CodeMirror mounts here -->
                <div class="sqled-editor" id="sqledEditor"></div>

                <!-- real-time dialect-mismatch suggestion (appears as you type/paste) -->
                <div class="sqled-live-mismatch d-none" id="sqledLiveMismatch"></div>

                <!-- results -->
                <div class="sqled-results" id="sqledResults">
                    <div class="sqled-empty"><i class="bi bi-info-circle me-1"></i>Write or paste SQL above. Use <strong>Preview</strong> to see the plan safely, then <strong>Run</strong> (bottom-right) to execute it against your database.</div>
                </div>
            </div>

            <div class="modal-footer sqled-footer">
                <div class="sqled-status" id="sqledStatus"></div>
                <span class="sqled-writes-note"><i class="bi bi-exclamation-circle"></i> These buttons write to your database</span>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" title="Close the editor.">Close</button>
                <button type="button" class="btn btn-outline-primary" id="sqledRunSel" title="Run only the highlighted text — writes to the database.">
                    <i class="bi bi-cursor-text"></i> Run selection
                </button>
                <button type="button" class="btn btn-primary sqled-run-real" id="sqledRun2" title="Run the whole script — writes to your database (⌘/Ctrl + Enter).">
                    <i class="bi bi-database-fill-down"></i> Run <span class="sqled-runhint">writes to DB</span> <span class="sqled-kbd">⌘⏎</span>
                </button>
            </div>
        </div>
    </div>
</div>
