{% extends "base.html" %}

{% block title %}Harris Matrix Editor - {{ site_name }} - PyArchInit-Mini{% endblock %}

{% block extra_css %}
<style>
/* Editor Layout */
#editor-container {
    display: flex;
    height: calc(100vh - 150px);
    gap: 10px;
}

/* Toolbar */
#toolbar {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    width: 300px;
    overflow-y: auto;
}

/* Canvas */
#cy-canvas {
    flex: 1;
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    position: relative;
    min-height: 0;    /* Critical: allows flex child to shrink correctly */
    overflow: hidden;
}

/* Cytoscape container — absolute fill so height:100% always works */
#cy {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Node Type Buttons */
.node-type-btn {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    font-size: 0.9em;
    padding: 8px 12px;
}

/* Relationship Type Select */
#relationshipType {
    width: 100%;
}

/* Properties Panel */
#properties-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    width: 300px;
    overflow-y: auto;
}

.property-field {
    margin-bottom: 10px;
}

.property-field label {
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 3px;
    display: block;
    color: var(--text-primary);
}

.property-field input,
.property-field select,
.property-field textarea {
    width: 100%;
    font-size: 0.9em;
}

/* Mode indicator */
#mode-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background: var(--bg-surface);
    padding: 8px 15px;
    border-radius: 4px;
    border: 2px solid var(--accent-primary);
    font-weight: 600;
    color: var(--text-primary);
}

#mode-indicator.edge-mode {
    border-color: #28a745;
}

/* Canvas controls */
#canvas-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

#canvas-controls button {
    margin-left: 5px;
}

/* Legend */
.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 0.85em;
    color: var(--text-primary);
}

.legend-color {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-color);
    margin-right: 8px;
    flex-shrink: 0;
}

/* Help text */
.help-text {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 5px;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center py-3 border-bottom">
        <div>
            <h1 class="h4 mb-1">
                <i class="fas fa-project-diagram"></i> Harris Matrix Editor
            </h1>
            <small class="text-muted">
                Site: <strong>{{ site_name }}</strong>
                <span class="mx-2">|</span>
                Mode: <strong id="current-mode">{{ mode|capitalize }}</strong>
            </small>
        </div>
        <div>
            <button class="btn btn-success btn-sm" id="save-btn" title="Save to database">
                <i class="fas fa-save"></i> Save
            </button>
            <button class="btn btn-info btn-sm" id="export-graphml-btn"
                    title="EM-canonical GraphML (s3dgraphy schema, for Datacenter / 3D pipeline)">
                <i class="fas fa-download"></i> GraphML
            </button>
            <button class="btn btn-secondary btn-sm" id="export-dot-btn" title="Export to Graphviz DOT">
                <i class="fas fa-download"></i> DOT
            </button>
            <button class="btn btn-warning btn-sm" id="export-png-btn" title="Export current view as PNG image">
                <i class="fas fa-image"></i> PNG
            </button>
            <!-- Spec 3-bis: Harris Swimlane controls -->
            <button onclick="showNewRowModal()" class="btn btn-primary btn-sm" title="Add a new swimlane row (period + phase)">+ New Row</button>
            <button onclick="saveSwimlaneState()" class="btn btn-success btn-sm" title="Save swimlane changes back to the database">&#128190; Save Swimlane</button>
            <button onclick="exportYedGraphml()" class="btn btn-info btn-sm"
                    title="yEd-flavored GraphML with TableNode swimlanes (open in yEd Desktop)">&#11015; Export yEd GraphML</button>
            <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#exportFormatsHelp" title="What are these export formats?">
                <i class="fas fa-question-circle"></i>
            </button>
            <a href="{{ url_for('harris_creator.index') }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <!-- Editor Layout -->
    <div id="editor-container" class="mt-3">
        <!-- Left Toolbar -->
        <div id="toolbar">
            <h6 class="mb-3"><i class="fas fa-tools"></i> Tools</h6>

            <!-- Mode Selection -->
            <div class="mb-4">
                <h6 class="text-muted mb-2">Mode</h6>
                <div class="btn-group w-100" role="group">
                    <input type="radio" class="btn-check" name="editorMode" id="nodeMode" value="node" checked>
                    <label class="btn btn-outline-primary btn-sm" for="nodeMode">
                        <i class="fas fa-square"></i> Nodes
                    </label>

                    <input type="radio" class="btn-check" name="editorMode" id="edgeMode" value="edge">
                    <label class="btn btn-outline-success btn-sm" for="edgeMode">
                        <i class="fas fa-arrow-right"></i> Edges
                    </label>
                </div>
                <p class="help-text mt-2">
                    <strong>Node Mode:</strong> Click on canvas to add nodes<br>
                    <strong>Edge Mode:</strong> Click source then target node
                </p>
            </div>

            <!-- Node Type Selection (shown in node mode) -->
            <div id="node-tools" class="mb-4">
                <h6 class="text-muted mb-2">Node Type</h6>
                <div id="node-type-buttons">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>

            <!-- Relationship Type Selection (shown in edge mode) -->
            <div id="edge-tools" class="mb-4" style="display: none;">
                <h6 class="text-muted mb-2">Relationship Type</h6>
                <select id="relationshipType" class="form-select form-select-sm">
                    <!-- Will be populated by JavaScript -->
                </select>
                <p class="help-text mt-2">
                    Select relationship type, then click source node and target node to create connection.
                </p>
            </div>

            <!-- Legend -->
            <div class="mb-3">
                <h6 class="text-muted mb-2">Legend</h6>
                <div id="node-legend">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>

            <!-- Actions -->
            <div>
                <h6 class="text-muted mb-2">Actions</h6>
                <button class="btn btn-sm btn-outline-danger w-100 mb-2" id="delete-selected-btn">
                    <i class="fas fa-trash"></i> Delete Selected
                </button>
                <button class="btn btn-sm btn-outline-warning w-100 mb-2" id="clear-all-btn">
                    <i class="fas fa-eraser"></i> Clear All
                </button>
                <button class="btn btn-sm btn-outline-secondary w-100" id="layout-btn">
                    <i class="fas fa-sitemap"></i> Auto Layout
                </button>
            </div>
        </div>

        <!-- Canvas -->
        <div id="cy-canvas">
            <!-- Mode Indicator -->
            <div id="mode-indicator">
                <i class="fas fa-square"></i> Node Mode
            </div>

            <!-- Cytoscape Canvas -->
            <div id="cy"></div>

            <!-- Canvas Controls -->
            <div id="canvas-controls">
                <button class="btn btn-sm btn-light" id="zoom-in-btn" title="Zoom In">
                    <i class="fas fa-search-plus"></i>
                </button>
                <button class="btn btn-sm btn-light" id="zoom-out-btn" title="Zoom Out">
                    <i class="fas fa-search-minus"></i>
                </button>
                <button class="btn btn-sm btn-light" id="fit-btn" title="Fit to Screen">
                    <i class="fas fa-expand"></i>
                </button>
            </div>

            <!-- Tooltip for node hover -->
            <div id="cy-tooltip" style="display:none; position:absolute; z-index:1001; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:6px; padding:10px 14px; font-size:0.82rem; box-shadow:var(--shadow-md); pointer-events:none; max-width:250px;">
            </div>
        </div>

        <!-- Right Properties Panel -->
        <div id="properties-panel">
            <h6 class="mb-3"><i class="fas fa-cog"></i> Properties</h6>

            <div id="no-selection" class="text-center text-muted py-5">
                <i class="fas fa-hand-pointer fa-3x mb-3"></i>
                <p>Select a node or edge to edit its properties</p>
            </div>

            <div id="node-properties" style="display: none;">
                <h6 class="text-primary mb-3">Node Properties</h6>

                <div class="property-field">
                    <label>US Number *</label>
                    <input type="text" class="form-control form-control-sm" id="prop-us-number" required>
                </div>

                <div class="property-field">
                    <label>Unit Type</label>
                    <select class="form-select form-select-sm" id="prop-unit-type">
                        <!-- Will be populated -->
                    </select>
                </div>

                <div class="property-field">
                    <label>Description</label>
                    <textarea class="form-control form-control-sm" id="prop-description" rows="2"></textarea>
                </div>

                <div class="property-field">
                    <label>Area</label>
                    <input type="text" class="form-control form-control-sm" id="prop-area"
                           placeholder="e.g., Area A, Trench 1">
                </div>

                <div class="property-field">
                    <label>Period</label>
                    <select class="form-select form-select-sm" id="prop-period">
                        <option value="">-- Select Period --</option>
                        <!-- Will be populated by JavaScript -->
                    </select>
                </div>

                <div class="property-field">
                    <label>Phase</label>
                    <select class="form-select form-select-sm" id="prop-phase">
                        <option value="">-- Select Phase --</option>
                        <!-- Will be populated based on selected period -->
                    </select>
                </div>

                <div class="property-field">
                    <label>Datazione <small class="text-muted">(from periodizzazione)</small></label>
                    <input type="text" class="form-control form-control-sm" id="prop-datazione"
                           placeholder="Es: Età contemporanea / Età contemporanea" readonly>
                </div>

                <div class="property-field" id="file-path-field" style="display: none;">
                    <label>File Path <small class="text-muted">(for DOC type)</small></label>
                    <input type="text" class="form-control form-control-sm" id="prop-file-path"
                           placeholder="docs/plan.pdf">
                </div>

                <button class="btn btn-sm btn-primary w-100 mt-3" id="apply-node-props-btn">
                    <i class="fas fa-check"></i> Apply Changes
                </button>
            </div>

            <div id="edge-properties" style="display: none;">
                <h6 class="text-success mb-3">Edge Properties</h6>

                <div class="property-field">
                    <label>From US</label>
                    <input type="text" class="form-control form-control-sm" id="prop-from-us" readonly>
                </div>

                <div class="property-field">
                    <label>To US</label>
                    <input type="text" class="form-control form-control-sm" id="prop-to-us" readonly>
                </div>

                <div class="property-field">
                    <label>Relationship Type</label>
                    <select class="form-select form-select-sm" id="prop-relationship-type">
                        <!-- Will be populated -->
                    </select>
                </div>

                <button class="btn btn-sm btn-primary w-100 mt-3" id="apply-edge-props-btn">
                    <i class="fas fa-check"></i> Apply Changes
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Hidden data -->
<input type="hidden" id="site-name" value="{{ site_name }}">
<input type="hidden" id="existing-nodes" value="{{ existing_nodes }}">
<input type="hidden" id="existing-relationships" value="{{ existing_relationships }}">

<!-- Export formats help modal -->
<div class="modal fade" id="exportFormatsHelp" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fas fa-question-circle"></i> Export formats &mdash; GraphML vs yEd GraphML</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>The editor exposes <strong>two GraphML outputs</strong> that look similar but serve different audiences.</p>
        <table class="table table-bordered table-sm">
          <thead class="table-light">
            <tr><th></th><th class="text-info">GraphML</th><th class="text-info">Export yEd GraphML</th></tr>
          </thead>
          <tbody>
            <tr><th>Trigger</th><td>Auto-regenerated on every US save (Spec&nbsp;2)</td><td>On-demand when you click the button (Spec&nbsp;3-bis)</td></tr>
            <tr><th>File</th><td><code>data/paradata/&lt;site&gt;/stratigraphy.graphml</code></td><td><code>data/exports/harris_yed/&lt;site&gt;-harris-yed.graphml</code></td></tr>
            <tr><th>Schema</th><td>s3dgraphy clean &mdash; canonical EM nodes (StratigraphicNode) and edges (<code>overlies</code>, <code>abuts</code>, <code>is_after</code>, &hellip;)</td><td>yEd-flavored &mdash; <code>y:TableNode</code> + <code>y:Rows</code> for swimlanes, <code>y:ShapeNode</code> children with VocabProvider colors</td></tr>
            <tr><th>Audience</th><td>EM Datacenter, 3D pipeline, Heriverse, programmatic consumers</td><td>Humans using <strong>yEd Desktop</strong> for review/printing</td></tr>
            <tr><th>Round-trip</th><td>Yes (s3dgraphy reader)</td><td>No (one-way export for presentation)</td></tr>
          </tbody>
        </table>
        <h6>DOT / PNG</h6>
        <ul>
          <li><strong>DOT</strong> &mdash; Graphviz source, useful for batch rendering or version-controlling diagrams as text.</li>
          <li><strong>PNG</strong> &mdash; Rasterized snapshot of the current Cytoscape view.</li>
        </ul>
        <h6>Quick reference</h6>
        <ul>
          <li>Need to feed a 3D / EM pipeline &rarr; use <strong>GraphML</strong>.</li>
          <li>Need to open in yEd Desktop and tweak by hand &rarr; use <strong>Export yEd GraphML</strong>.</li>
          <li>Need a quick image for a report &rarr; use <strong>PNG</strong>.</li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Cytoscape.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>

<!-- Dagre layout for hierarchical graphs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script>

<!-- ELK layout for orthogonal edges -->
<!-- cytoscape-elk removed: unused (dagre layout is used instead) -->

<!-- Editor JavaScript -->
<script src="{{ url_for('static', filename='js/harris_creator_editor.js') }}"></script>

<script>
// === Spec 3-bis: Harris Swimlane integration ===

// Initialize _currentSite server-side from hidden input so Save/+ Row/Export
// work even if loadSwimlaneState() never succeeds (e.g. DB migration pending).
window._currentSite = (document.getElementById('site-name') || {}).value || null;

async function loadSwimlaneState(site) {
    try {
        const r = await fetch(`/harris-creator/api/load/${encodeURIComponent(site)}`);
        if (!r.ok) {
            const body = await r.text();
            console.error("Failed to load swimlane state:", body);
            // Surface backend errors so the user understands why swimlanes
            // are missing (typical cause: node_uuid column / migration not run).
            const msg = body.length > 400 ? body.slice(0, 400) + '...' : body;
            alert(`Swimlane load failed (HTTP ${r.status}):\n\n${msg}\n\n` +
                  `If you see "node_uuid does not exist", run the migration on the server:\n` +
                  `  pyarchinit-mini-migrate-vocab --apply --yes --database <DSN>`);
            return;
        }
        const state = await r.json();
        renderSwimlaneState(state);
    } catch (e) {
        console.error("loadSwimlaneState error:", e);
        alert(`Swimlane load error: ${e.message}`);
    }
}

function renderSwimlaneState(state) {
    if (typeof cy === 'undefined') {
        console.warn("Cytoscape not initialized yet — skipping renderSwimlaneState");
        return;
    }

    // Clear existing elements
    cy.elements().remove();

    const swimlaneNodes = state.nodes.filter(el => el.data.is_swimlane);
    const usNodes = state.nodes.filter(el => !el.data.is_swimlane);

    // Add compound parents first (swimlanes)
    if (swimlaneNodes.length > 0) {
        cy.add(swimlaneNodes.map(el => ({
            group: 'nodes',
            data: el.data,
            classes: 'swimlane',
        })));
    }

    // Add US children with parent
    if (usNodes.length > 0) {
        cy.add(usNodes.map(el => ({
            group: 'nodes',
            data: el.data,
            position: el.position || undefined,
        })));
    }

    // Add edges
    if (state.edges && state.edges.length > 0) {
        cy.add(state.edges.map(el => ({
            group: 'edges',
            data: el.data,
        })));
    }

    // Apply swimlane styling on the parent compound nodes
    cy.nodes('.swimlane').forEach(n => {
        const color = n.data('color') || '#EEEEEE';
        n.style({
            'background-color': color,
            'background-opacity': 0.2,
            'border-color': color,
            'border-width': 2,
            'label': n.data('label'),
            'text-valign': 'top',
            'text-halign': 'left',
            'padding': 10,
            'font-size': '14px',
            'font-weight': 'bold',
        });
    });

    // Save state references for later use
    window._currentSite = state.site;
    window._pendingChanges = state.pending_changes || {
        us_updates: [], us_inserts: [], us_deletes: []
    };

    console.log(`Loaded swimlane state for ${state.site}: ${state.rows.length} rows, ${usNodes.length} US, ${state.edges.length} edges`);
}

// Auto-load on page ready: use ?site=... if present, else server-rendered site_name.
window.addEventListener('DOMContentLoaded', () => {
    const params = new URLSearchParams(window.location.search);
    const site = params.get('site') || window._currentSite;
    if (site) {
        // Wait briefly for Cytoscape to init then load
        const tryLoad = (retries) => {
            if (typeof cy !== 'undefined') {
                loadSwimlaneState(site);
            } else if (retries > 0) {
                setTimeout(() => tryLoad(retries - 1), 200);
            } else {
                console.warn("Cytoscape never initialized, swimlane load skipped");
            }
        };
        tryLoad(10);
    }
});
</script>

<script>
// === Spec 3-bis: drag-drop + pending changes + Save + +New Row + Export ===

function setupSwimlaneDragHandlers() {
    if (typeof cy === 'undefined') return;

    cy.on('dragfree', 'node', function(evt) {
        const node = evt.target;
        if (node.hasClass('swimlane')) return;  // ignore parent drags

        const newParent = node.parent().id() || null;
        const oldParent = node.data('_lastParent') || node.data('parent');

        if (newParent && newParent !== oldParent) {
            const usId = node.data('us');
            const parentEl = cy.getElementById(newParent);
            const update = {
                us: usId,
                periodo_iniziale: parentEl.data('period_name'),
                fase_iniziale: parentEl.data('phase_name'),
            };
            // Replace any existing pending update for this US
            if (!window._pendingChanges) {
                window._pendingChanges = {us_updates: [], us_inserts: [], us_deletes: []};
            }
            window._pendingChanges.us_updates = window._pendingChanges.us_updates.filter(
                u => u.us !== usId
            );
            window._pendingChanges.us_updates.push(update);
            node.data('_lastParent', newParent);
            showUnsavedIndicator();
        }
    });
}

function showUnsavedIndicator() {
    let ind = document.getElementById('swimlane-unsaved-indicator');
    if (!ind) {
        ind = document.createElement('div');
        ind.id = 'swimlane-unsaved-indicator';
        ind.style.cssText = 'position:fixed;top:10px;right:10px;background:#FFC107;padding:8px 16px;border-radius:4px;z-index:9999;font-weight:bold;box-shadow:0 2px 4px rgba(0,0,0,0.2)';
        ind.textContent = '● Unsaved changes';
        document.body.appendChild(ind);
    }
    ind.style.display = 'block';
}

function hideUnsavedIndicator() {
    const ind = document.getElementById('swimlane-unsaved-indicator');
    if (ind) ind.style.display = 'none';
}

async function saveSwimlaneState() {
    const site = window._currentSite;
    if (!site) {
        alert('No site selected. Return to the Harris Matrix Creator index and choose or create a site.');
        return;
    }
    try {
        const r = await fetch(`/harris-creator/api/save/${encodeURIComponent(site)}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(window._pendingChanges || {}),
        });
        if (!r.ok) {
            alert(`Save failed: ${await r.text()}`);
            return;
        }
        const result = await r.json();
        alert(`Saved: ${result.updated} updates, ${result.inserted} inserts, ${result.deleted} deletes`);
        if (result.errors && result.errors.length > 0) {
            console.error('Save errors:', result.errors);
            alert('Some errors occurred — check console.');
        }
        hideUnsavedIndicator();
        window._pendingChanges = {us_updates: [], us_inserts: [], us_deletes: []};
        // Reload to capture side effects (auto_regen, etc.)
        loadSwimlaneState(site);
    } catch (e) {
        alert(`Save error: ${e.message}`);
    }
}

function showNewRowModal() {
    const site = window._currentSite;
    if (!site) {
        alert('No site selected. Return to the Harris Matrix Creator index and choose or create a site.');
        return;
    }
    const period = prompt('Period name:');
    if (!period) return;
    const phase = prompt('Phase name (optional):') || null;
    const startStr = prompt('Start date (year, optional, negative for BCE):');
    const endStr = prompt('End date (year, optional):');
    const start = startStr && startStr.trim() ? parseInt(startStr, 10) : null;
    const end = endStr && endStr.trim() ? parseInt(endStr, 10) : null;

    fetch(`/harris-creator/api/swimlanes/${encodeURIComponent(site)}`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            period_name: period,
            phase_name: phase,
            start_date: start,
            end_date: end,
        }),
    }).then(r => {
        if (!r.ok) {
            return r.text().then(t => alert(`Create row failed: ${t}`));
        }
        return r.json().then(row => {
            alert(`Created row: ${row.row_id}`);
            loadSwimlaneState(site);
        });
    }).catch(e => alert(`Network error: ${e.message}`));
}

function exportYedGraphml() {
    const site = window._currentSite;
    if (!site) {
        alert('No site selected. Return to the Harris Matrix Creator index and choose or create a site.');
        return;
    }
    window.location.href = `/harris-creator/api/export/${encodeURIComponent(site)}/yed-graphml`;
}

// Hook into editor init
window.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        if (typeof cy !== 'undefined') {
            setupSwimlaneDragHandlers();
        }
    }, 1000);
});
</script>
{% endblock %}