{% extends "base.html" %}

{% block title %}{{ _('3D Harris Matrix Viewer') }} - {{ site_name }}{% endblock %}

{% block extra_css %}
<style>
    .viewer-container {
        display: flex;
        gap: 15px;
        height: calc(100vh - 200px);
    }

    #matrix-container {
        flex: 1;
        border: 1px solid #ddd;
        background: #fafafa;
        position: relative;
        min-width: 500px;
    }

    #model-container {
        flex: 1;
        border: 1px solid #ddd;
        background: #000;
        position: relative;
        min-width: 500px;
    }

    .controls-panel {
        background: white;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .group-node {
        fill: #f0f0f0;
        stroke: #666;
        stroke-width: 2px;
        rx: 10;
        ry: 10;
    }

    .group-label {
        font-size: 14px;
        font-weight: bold;
        fill: #333;
        text-anchor: middle;
    }

    .us-node {
        cursor: pointer;
        stroke: #333;
        stroke-width: 2px;
        transition: all 0.3s;
    }

    .us-node.selected {
        stroke: #ff0000;
        stroke-width: 4px;
        filter: drop-shadow(0 0 10px rgba(255,0,0,0.5));
    }

    .us-node:hover {
        filter: drop-shadow(0 0 8px rgba(0,0,0,0.3));
        transform: scale(1.1);
    }

    .us-label {
        font-size: 11px;
        font-weight: bold;
        text-anchor: middle;
        pointer-events: none;
        fill: #fff;
    }

    .edge {
        fill: none;
        stroke-width: 2px;
        marker-end: url(#arrowhead);
    }

    .edge-label {
        font-size: 9px;
        fill: #666;
        text-anchor: middle;
        pointer-events: none;
    }

    .tooltip {
        position: absolute;
        padding: 12px;
        background: white;
        border: 1px solid #ccc;
        border-radius: 4px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        max-width: 300px;
        z-index: 1000;
    }

    #model-info {
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(255,255,255,0.9);
        padding: 10px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 10;
    }

    .sync-indicator {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #4CAF50;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 11px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .sync-indicator.active {
        opacity: 1;
    }

    #node-info-panel {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 320px;
        max-height: calc(100% - 20px);
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        padding: 16px;
        overflow-y: auto;
        display: none;
        z-index: 100;
    }

    #node-info-panel.visible {
        display: block;
    }

    #node-info-panel h4 {
        margin: 0 0 12px 0;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        border-bottom: 2px solid #4CAF50;
        padding-bottom: 8px;
    }

    #node-info-panel .info-section {
        margin-bottom: 16px;
    }

    #node-info-panel .info-section h5 {
        font-size: 13px;
        font-weight: 600;
        color: #666;
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #node-info-panel .info-item {
        margin: 4px 0;
        font-size: 13px;
        display: flex;
        gap: 8px;
    }

    #node-info-panel .info-label {
        font-weight: 600;
        color: #555;
        min-width: 60px;
    }

    #node-info-panel .info-value {
        color: #333;
        flex: 1;
    }

    #node-info-panel .relations-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #node-info-panel .relations-list li {
        padding: 6px 8px;
        margin: 4px 0;
        background: #f5f5f5;
        border-left: 3px solid #4CAF50;
        border-radius: 3px;
        font-size: 12px;
        cursor: pointer;
        transition: background 0.2s;
    }

    #node-info-panel .relations-list li:hover {
        background: #e8f5e9;
    }

    #node-info-panel .relation-type {
        font-weight: 600;
        color: #2196F3;
        text-transform: uppercase;
        font-size: 10px;
        margin-right: 4px;
    }

    #node-info-panel .close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #999;
        padding: 0;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
    }

    #node-info-panel .close-btn:hover {
        color: #333;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <h2>
                <i class="fas fa-cube"></i>
                {{ _('3D Harris Matrix Viewer') }}: {{ site_name }}
            </h2>
        </div>
    </div>

    <!-- Controls -->
    <div class="row mt-3">
        <div class="col-12">
            <div class="controls-panel">
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">{{ _('Group By') }}</label>
                        <select class="form-select form-select-sm" id="groupBy" onchange="updateGrouping()">
                            <option value="period">{{ _('Period') }}</option>
                            <option value="area">{{ _('Area') }}</option>
                            <option value="period_area">{{ _('Period + Area') }}</option>
                            <option value="none">{{ _('None') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ _('Layout') }}</label>
                        <select class="form-select form-select-sm" id="layout" onchange="updateLayout()">
                            <option value="hierarchical">{{ _('Hierarchical') }}</option>
                            <option value="tree">{{ _('Tree') }}</option>
                            <option value="force">{{ _('Force') }}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ _('3D Model') }}</label>
                        <select class="form-select form-select-sm" id="modelSelect" onchange="load3DModel()">
                            <option value="">{{ _('Select model') }}</option>
                            {% if models %}
                                {% for model in models %}
                                <option value="/static/uploads/{{ model.path }}">{{ model.name }}</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                        <button class="btn btn-sm btn-outline-primary mt-1 w-100" onclick="showUploadDialog()">
                            <i class="fas fa-upload"></i> {{ _('Upload Model') }}
                        </button>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">{{ _('Actions') }}</label>
                        <div class="btn-group w-100" role="group">
                            <button class="btn btn-sm btn-outline-primary" onclick="resetView()">
                                <i class="fas fa-compress"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-success" onclick="exportSVG()">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Viewers -->
    <div class="row">
        <div class="col-12">
            <div class="viewer-container">
                <!-- Matrix Viewer -->
                <div id="matrix-container">
                    <div class="sync-indicator" id="matrixSync">
                        <i class="fas fa-sync-alt"></i> {{ _('Synced') }}
                    </div>
                    <svg id="matrix-svg" width="100%" height="100%"></svg>
                    <div class="tooltip" id="matrixTooltip"></div>

                    <!-- Node Info Panel -->
                    <div id="node-info-panel">
                        <button class="close-btn" onclick="closeNodeInfo()">&times;</button>
                        <h4 id="node-title">{{ _('Node Details') }}</h4>

                        <div class="info-section">
                            <h5>{{ _('Properties') }}</h5>
                            <div id="node-properties"></div>
                        </div>

                        <div class="info-section" id="parents-section" style="display:none;">
                            <h5>{{ _('Covered By / Cut By / Filled By') }} ↑</h5>
                            <ul class="relations-list" id="parent-relations"></ul>
                        </div>

                        <div class="info-section" id="children-section" style="display:none;">
                            <h5>{{ _('Covers / Cuts / Fills') }} ↓</h5>
                            <ul class="relations-list" id="child-relations"></ul>
                        </div>
                    </div>
                </div>

                <!-- 3D Model Viewer -->
                <div id="model-container">
                    <div id="model-info">
                        <strong>{{ _('3D Model') }}</strong><br>
                        <span id="modelName">{{ _('No model loaded') }}</span>
                    </div>
                    <div class="sync-indicator" id="modelSync">
                        <i class="fas fa-crosshairs"></i> {{ _('Focused') }}
                    </div>
                    <canvas id="model-canvas"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Back Button -->
    <div class="row mt-3">
        <div class="col-12">
            <a href="{{ url_for('export_harris_graphml') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> {{ _('Back') }}
            </a>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ _('Upload 3D Model') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="uploadForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label class="form-label">{{ _('3D Model File') }}</label>
                        <input type="file" class="form-control" id="modelFile" name="model_file" accept=".obj,.gltf,.glb" required>
                        <div class="form-text">{{ _('Upload OBJ, GLTF, or GLB file') }}</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ _('Site') }}</label>
                        <input type="hidden" id="siteName" name="site_name" value="{{ site_name }}">
                        <input type="text" class="form-control" value="{{ site_name }}" readonly disabled>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ _('US (Optional)') }}</label>
                        <input type="text" class="form-control" id="usId" name="us_id" placeholder="{{ _('Leave empty for site-level model') }}">
                    </div>
                </form>
                <div id="uploadProgress" class="progress d-none mt-3">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                </div>
                <div id="uploadResult" class="alert d-none mt-3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
                <button type="button" class="btn btn-primary" onclick="uploadModel()">
                    <i class="fas fa-upload"></i> {{ _('Upload') }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm@2.13.0/dist/graphviz.umd.js"></script>
<script src="{{ url_for('static', filename='js/stratigraphic_layout.js') }}"></script>

<script>
// Graph data from server (s3Dgraphy JSON v1.5 format)
const s3dData = {{ graph_json | safe }};

// Transform s3Dgraphy JSON v1.5 to viewer format
function transformS3DGraphData(s3dData) {
    // Get first graph from graphs collection
    const graphs = s3dData.graphs || {};
    const graphId = Object.keys(graphs)[0];
    if (!graphId) {
        return { nodes: [], edges: [] };
    }

    const graph = graphs[graphId];

    // Flatten all node categories into single array
    const nodes = [];
    const nodeCategories = graph.nodes || {};

    // Helper function to extract US number from various sources
    function extractUSNumber(nodeId, nodeData) {
        // Try to get from us_number field
        if (nodeData.us_number) return nodeData.us_number;

        // Try to extract from node ID (e.g., "Site_Area_123" → "123")
        const parts = nodeId.split('_');
        const lastPart = parts[parts.length - 1];
        if (!isNaN(lastPart)) return lastPart;

        return null;
    }

    // Process stratigraphic nodes
    if (nodeCategories.stratigraphic) {
        const strat = nodeCategories.stratigraphic;

        // US nodes
        if (strat.US) {
            for (const [nodeId, nodeData] of Object.entries(strat.US)) {
                const usNumber = extractUSNumber(nodeId, nodeData);
                nodes.push({
                    id: nodeId,
                    us_number: usNumber,
                    unit_type: nodeData.unit_type || 'US',
                    name: nodeData.name || `US ${usNumber}`,
                    description: nodeData.description_interp || nodeData.description_strat || nodeData.description || '',
                    site: nodeData.site,
                    area: nodeData.area,
                    period: nodeData.period,
                    phase: nodeData.phase,
                    ...nodeData
                });
            }
        }

        // USVs nodes
        if (strat.USVs) {
            for (const [nodeId, nodeData] of Object.entries(strat.USVs)) {
                const usNumber = extractUSNumber(nodeId, nodeData);
                nodes.push({
                    id: nodeId,
                    us_number: usNumber,
                    unit_type: nodeData.unit_type || 'USV',
                    name: nodeData.name || `${nodeData.unit_type || 'USV'} ${usNumber}`,
                    description: nodeData.description_interp || nodeData.description || '',
                    ...nodeData
                });
            }
        }

        // SF nodes
        if (strat.SF) {
            for (const [nodeId, nodeData] of Object.entries(strat.SF)) {
                const usNumber = extractUSNumber(nodeId, nodeData);
                nodes.push({
                    id: nodeId,
                    us_number: usNumber,
                    unit_type: nodeData.unit_type || 'SF',
                    name: nodeData.name || `${nodeData.unit_type || 'SF'} ${usNumber}`,
                    description: nodeData.description || '',
                    ...nodeData
                });
            }
        }
    }

    // Process other node categories
    const otherCategories = ['documents', 'extractors', 'combiners', 'properties', 'authors', 'epochs', 'groups', 'links', 'geo'];
    for (const category of otherCategories) {
        if (nodeCategories[category]) {
            for (const [nodeId, nodeData] of Object.entries(nodeCategories[category])) {
                nodes.push({
                    id: nodeId,
                    unit_type: category.toUpperCase(),
                    name: nodeData.name || nodeId,
                    ...nodeData
                });
            }
        }
    }

    // Flatten all edge types into single array
    const edges = [];
    const edgeTypes = graph.edges || {};

    for (const [edgeType, edgeList] of Object.entries(edgeTypes)) {
        if (Array.isArray(edgeList)) {
            for (const edge of edgeList) {
                edges.push({
                    source: edge.from,
                    target: edge.to,
                    edge_type: edgeType,
                    stratigraphic_relation: edge.stratigraphic_relation || edgeType.toUpperCase().replace(/_/g, ' '),
                    ...edge
                });
            }
        }
    }

    console.log('Transformed nodes:', nodes.length, 'Sample:', nodes.slice(0, 3));
    console.log('Transformed edges:', edges.length, 'Sample:', edges.slice(0, 3));

    return { nodes, edges };
}

// Convert to viewer format
const graphData = transformS3DGraphData(s3dData);

// Extended Matrix color palette
const EM_COLORS = {
    'Taglio': '#8B4513',
    'Deposito': '#D2691E',
    'Riempimento': '#CD853F',
    'Humus': '#F4A460',
    'Terreno arativo': '#F4A460',
    'Muro': '#808080',
    'Pavimento': '#4682B4',
    'Distruzione': '#FFD700',
    'Crollo': '#FFD700',
    'Costruzione': '#90EE90',
    'default': '#DDA0DD'
};

function getNodeColor(node) {
    const desc = node.description || '';
    for (const [key, color] of Object.entries(EM_COLORS)) {
        if (desc.includes(key)) return color;
    }
    return EM_COLORS.default;
}

// ========== MATRIX VISUALIZATION ==========
let svg, g, zoom;
let selectedNode = null;
let groupedData = null;

function initMatrix() {
    const container = d3.select('#matrix-container');
    const bbox = container.node().getBoundingClientRect();
    const width = bbox.width;
    const height = bbox.height;

    svg = d3.select('#matrix-svg')
        .attr('viewBox', [0, 0, width, height]);

    // Define arrowhead
    svg.append('defs').append('marker')
        .attr('id', 'arrowhead')
        .attr('viewBox', '-0 -5 10 10')
        .attr('refX', 15)
        .attr('refY', 0)
        .attr('orient', 'auto')
        .attr('markerWidth', 6)
        .attr('markerHeight', 6)
        .append('path')
        .attr('d', 'M 0,-5 L 10,0 L 0,5')
        .attr('fill', '#333');

    zoom = d3.zoom()
        .scaleExtent([0.1, 4])
        .on('zoom', (event) => g.attr('transform', event.transform));

    svg.call(zoom);
    g = svg.append('g');

    updateGrouping();
}

function updateGrouping() {
    const groupBy = document.getElementById('groupBy').value;
    groupedData = groupNodes(graphData.nodes, groupBy);
    renderHierarchical();
}

function groupNodes(nodes, groupBy) {
    if (groupBy === 'none') {
        return { groups: [], nodes: nodes };
    }

    const groups = {};
    nodes.forEach(node => {
        let key;
        if (groupBy === 'period') {
            key = node.period || 'Unknown';
        } else if (groupBy === 'area') {
            key = node.area || 'Unknown';
        } else if (groupBy === 'period_area') {
            key = `${node.period || 'Unknown'} - ${node.area || 'Unknown'}`;
        }

        if (!groups[key]) {
            groups[key] = { name: key, nodes: [] };
        }
        groups[key].nodes.push(node);
    });

    return {
        groups: Object.values(groups),
        nodes: nodes
    };
}

async function renderHierarchical() {
    g.selectAll('*').remove();

    const container = d3.select('#matrix-container').node().getBoundingClientRect();
    const width = container.width;
    const height = container.height;

    console.log('Container dimensions:', width, height);
    console.log('Nodes before layout:', graphData.nodes.length);

    // Create a simple hierarchical layout using D3 force simulation
    // This is more reliable than StratigraphicLayout

    // Build level-based positioning (stratigraphic layers)
    const nodeMap = new Map(graphData.nodes.map(n => [n.id, n]));

    // Calculate levels (depth from top nodes)
    function calculateLevels() {
        const levels = new Map();
        const visited = new Set();

        // Find root nodes (no incoming edges)
        const hasIncoming = new Set();
        graphData.edges.forEach(e => hasIncoming.add(e.target));
        const roots = graphData.nodes.filter(n => !hasIncoming.has(n.id));

        console.log('Root nodes (most recent):', roots.length);

        // BFS to assign levels (INVERTED: root = highest level)
        const queue = roots.map(n => ({ node: n, level: 0 }));
        let maxLevel = 0;

        while (queue.length > 0) {
            const { node, level } = queue.shift();

            if (visited.has(node.id)) continue;
            visited.add(node.id);

            levels.set(node.id, level);
            maxLevel = Math.max(maxLevel, level);

            // Find children (nodes this covers/cuts/fills)
            const children = graphData.edges
                .filter(e => e.source === node.id)
                .map(e => nodeMap.get(e.target))
                .filter(n => n && !visited.has(n.id));

            children.forEach(child => {
                queue.push({ node: child, level: level + 1 });
            });
        }

        // Assign level 0 to unconnected nodes
        graphData.nodes.forEach(n => {
            if (!levels.has(n.id)) {
                levels.set(n.id, 0);
            }
        });

        console.log('Max stratigraphic level:', maxLevel);
        return { levels, maxLevel };
    }

    const { levels, maxLevel } = calculateLevels();

    // Position nodes by level (INVERTED: level 0 at BOTTOM, max level at TOP)
    const levelHeight = Math.max(100, height / (maxLevel + 2));
    const nodesByLevel = new Map();

    graphData.nodes.forEach(node => {
        const level = levels.get(node.id) || 0;
        if (!nodesByLevel.has(level)) {
            nodesByLevel.set(level, []);
        }
        nodesByLevel.get(level).push(node);
    });

    // Assign positions
    nodesByLevel.forEach((nodesAtLevel, level) => {
        const levelWidth = width - 100;
        const spacing = levelWidth / (nodesAtLevel.length + 1);

        nodesAtLevel.forEach((node, i) => {
            node.x = 50 + spacing * (i + 1);
            // INVERTED: maxLevel - level puts oldest (highest level) at BOTTOM
            node.y = height - 50 - (maxLevel - level) * levelHeight;
        });
    });

    console.log('Sample node positions:', graphData.nodes.slice(0, 3).map(n => ({id: n.id, level: levels.get(n.id), x: n.x, y: n.y})));

    // No visual grouping boxes - keep matrix clean like GraphViz

    // Draw edges FIRST (so they appear behind nodes)
    const edges = g.append('g').selectAll('path')
        .data(graphData.edges)
        .enter().append('path')
        .attr('class', 'edge')
        .attr('d', d => {
            const source = graphData.nodes.find(n => n.id === d.source);
            const target = graphData.nodes.find(n => n.id === d.target);
            if (!source || !target || !source.x || !target.x) return '';

            // Straight vertical lines (GraphViz DOT style)
            const nodeHeight = 35;
            const startY = source.y + nodeHeight / 2;
            const endY = target.y - nodeHeight / 2;

            return `M${source.x},${startY} L${target.x},${endY}`;
        })
        .attr('stroke', '#333')
        .attr('stroke-width', 2)
        .attr('fill', 'none')
        .attr('marker-end', 'url(#arrowhead)');

    // Draw nodes as rectangles (GraphViz style)
    const nodeWidth = 80;
    const nodeHeight = 35;

    const nodesWithPos = graphData.nodes.filter(d => d.x && d.y);
    console.log('Nodes with positions:', nodesWithPos.length);
    console.log('All X positions:', nodesWithPos.map(n => n.x));

    const nodes = g.append('g').selectAll('rect')
        .data(nodesWithPos)
        .enter().append('rect')
        .attr('class', 'us-node')
        .attr('x', d => {
            console.log(`Drawing node ${d.id} at x=${d.x}, y=${d.y}`);
            return d.x - nodeWidth / 2;
        })
        .attr('y', d => d.y - nodeHeight / 2)
        .attr('width', nodeWidth)
        .attr('height', nodeHeight)
        .attr('rx', 4)
        .attr('ry', 4)
        .attr('fill', d => getNodeColor(d))
        .attr('stroke', '#333')
        .attr('stroke-width', 2)
        .on('click', (event, d) => selectNode(d))
        .on('mouseover', (event, d) => showTooltip(event, d))
        .on('mouseout', hideTooltip);

    console.log('Nodes drawn:', nodes.size());

    // Node labels (with unit type + number)
    g.append('g').selectAll('text')
        .data(graphData.nodes.filter(d => d.x && d.y))
        .enter().append('text')
        .attr('class', 'us-label')
        .attr('x', d => d.x)
        .attr('y', d => d.y + 4)
        .attr('text-anchor', 'middle')
        .style('font-weight', 'bold')
        .style('font-size', '12px')
        .style('pointer-events', 'none')
        .text(d => {
            // Show unit_type + us_number (e.g., "US12", "DOC4001")
            if (d.unit_type && d.us_number) {
                return `${d.unit_type}${d.us_number}`;
            }
            // Fallback to us_number or name
            return d.us_number || d.name || d.id.split('_').pop();
        });
}


function selectNode(node) {
    // Immediate visual feedback
    d3.selectAll('.us-node').classed('selected', false);
    const selectedNodeEl = d3.selectAll('.us-node').filter(d => d.id === node.id);
    selectedNodeEl.classed('selected', true);

    // Pulse animation for immediate feedback (rectangles)
    selectedNodeEl
        .transition().duration(150)
        .attr('stroke-width', 4)
        .attr('stroke', '#FF5722')
        .transition().duration(150)
        .attr('stroke-width', 2)
        .attr('stroke', '#333');

    selectedNode = node;

    // Show sync indicator
    document.getElementById('matrixSync').classList.add('active');
    setTimeout(() => {
        document.getElementById('matrixSync').classList.remove('active');
    }, 800);

    // Show node info panel
    showNodeInfo(node);

    // Focus 3D model on this US (non-blocking)
    requestAnimationFrame(() => focus3DOnUS(node));
}

function showNodeInfo(node) {
    const panel = document.getElementById('node-info-panel');
    const title = document.getElementById('node-title');
    const properties = document.getElementById('node-properties');
    const parentRelations = document.getElementById('parent-relations');
    const childRelations = document.getElementById('child-relations');
    const parentsSection = document.getElementById('parents-section');
    const childrenSection = document.getElementById('children-section');

    // Set title
    title.textContent = `US ${node.us_number || node.name || node.id.split('_').pop()}`;

    // Show properties
    let propsHTML = '';
    if (node.us_number) propsHTML += `<div class="info-item"><span class="info-label">{{ _('US') }}:</span><span class="info-value">${node.us_number}</span></div>`;
    if (node.type) propsHTML += `<div class="info-item"><span class="info-label">{{ _('Type') }}:</span><span class="info-value">${node.type}</span></div>`;
    if (node.area) propsHTML += `<div class="info-item"><span class="info-label">{{ _('Area') }}:</span><span class="info-value">${node.area}</span></div>`;
    if (node.period) propsHTML += `<div class="info-item"><span class="info-label">{{ _('Period') }}:</span><span class="info-value">${node.period}</span></div>`;
    if (node.definition) propsHTML += `<div class="info-item"><span class="info-label">{{ _('Definition') }}:</span><span class="info-value">${node.definition}</span></div>`;

    properties.innerHTML = propsHTML || '<div class="info-item">{{ _("No data available") }}</div>';

    // Find parent relations (nodes that cover/cut/fill this node)
    const parents = graphData.edges.filter(edge =>
        edge.target === node.id &&
        ['COVERS', 'CUTS', 'FILLS', 'COVERED_BY', 'CUT_BY', 'FILLED_BY'].includes(edge.stratigraphic_relation)
    );

    // Find child relations (nodes covered/cut/filled by this node)
    const children = graphData.edges.filter(edge =>
        edge.source === node.id &&
        ['COVERS', 'CUTS', 'FILLS', 'COVERED_BY', 'CUT_BY', 'FILLED_BY'].includes(edge.stratigraphic_relation)
    );

    // Show parents
    if (parents.length > 0) {
        parentRelations.innerHTML = parents.map(edge => {
            const parentNode = graphData.nodes.find(n => n.id === edge.source);
            const relType = edge.stratigraphic_relation;
            const usNumber = parentNode?.us_number || parentNode?.id.split('_').pop() || '?';
            return `<li onclick="navigateToNode('${edge.source}')">
                <span class="relation-type">${relType}</span>
                US ${usNumber}
            </li>`;
        }).join('');
        parentsSection.style.display = 'block';
    } else {
        parentsSection.style.display = 'none';
    }

    // Show children
    if (children.length > 0) {
        childRelations.innerHTML = children.map(edge => {
            const childNode = graphData.nodes.find(n => n.id === edge.target);
            const relType = edge.stratigraphic_relation;
            const usNumber = childNode?.us_number || childNode?.id.split('_').pop() || '?';
            return `<li onclick="navigateToNode('${edge.target}')">
                <span class="relation-type">${relType}</span>
                US ${usNumber}
            </li>`;
        }).join('');
        childrenSection.style.display = 'block';
    } else {
        childrenSection.style.display = 'none';
    }

    // Show panel
    panel.classList.add('visible');
}

function closeNodeInfo() {
    document.getElementById('node-info-panel').classList.remove('visible');
    d3.selectAll('.us-node').classed('selected', false);
    selectedNode = null;
}

function navigateToNode(nodeId) {
    const node = graphData.nodes.find(n => n.id === nodeId);
    if (node) {
        selectNode(node);

        // Scroll to node in SVG
        const svg = document.getElementById('matrix-svg');
        const container = document.getElementById('matrix-container');
        if (node.y && container) {
            container.scrollTop = node.y - container.clientHeight / 2;
        }
    }
}

function showTooltip(event, d) {
    const tooltip = d3.select('#matrixTooltip');
    tooltip.style('opacity', 1);
    tooltip.html(`
        <h6>${d.name || 'US ' + d.us_number}</h6>
        <div><strong>US:</strong> ${d.us_number || '-'}</div>
        <div><strong>{{ _("Description") }}:</strong> ${d.description || '-'}</div>
        <div><strong>{{ _("Type") }}:</strong> ${d.unit_type || '-'}</div>
        <div><strong>{{ _("Period") }}:</strong> ${d.period || '-'}</div>
        <div><strong>{{ _("Area") }}:</strong> ${d.area || '-'}</div>
    `);
    tooltip.style('left', (event.pageX + 15) + 'px');
    tooltip.style('top', (event.pageY - 30) + 'px');
}

function hideTooltip() {
    d3.select('#matrixTooltip').style('opacity', 0);
}

function updateLayout() {
    updateGrouping();
}

function resetView() {
    svg.transition().call(zoom.transform, d3.zoomIdentity);
}

function exportSVG() {
    const svgData = document.getElementById('matrix-svg').outerHTML;
    const blob = new Blob([svgData], {type: 'image/svg+xml'});
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = '{{ site_name }}_matrix.svg';
    link.click();
    URL.revokeObjectURL(url);
}

// ========== 3D VISUALIZATION ==========
let scene, camera, renderer, controls;
let currentModel = null;
let usMarkers = {};

function init3D() {
    const container = document.getElementById('model-container');
    const canvas = document.getElementById('model-canvas');

    // Scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x1a1a1a);

    // Camera
    const aspect = container.clientWidth / container.clientHeight;
    camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
    camera.position.set(0, 10, 20);

    // Renderer
    renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);

    // Lights
    const ambientLight = new THREE.AmbientLight(0x404040, 2);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(10, 10, 5);
    scene.add(directionalLight);

    // Controls
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    // Grid
    const gridHelper = new THREE.GridHelper(50, 50);
    scene.add(gridHelper);

    // Animate
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate();

    // Handle resize
    window.addEventListener('resize', () => {
        const bbox = container.getBoundingClientRect();
        camera.aspect = bbox.width / bbox.height;
        camera.updateProjectionMatrix();
        renderer.setSize(bbox.width, bbox.height);
    });
}

function load3DModel() {
    let modelPath = document.getElementById('modelSelect').value;
    if (!modelPath) return;

    // URL encode the path properly (encode spaces but keep slashes)
    modelPath = modelPath.split('/').map(part => encodeURIComponent(part)).join('/');

    // Clear previous model
    if (currentModel) {
        scene.remove(currentModel);
    }

    document.getElementById('modelName').textContent = '{{ _("Loading") }}...';

    // Detect file format from extension
    const ext = modelPath.split('.').pop().toLowerCase();

    if (ext === 'gltf' || ext === 'glb') {
        // Load GLTF/GLB
        const loader = new THREE.GLTFLoader();
        loader.load(modelPath,
            (gltf) => {
                currentModel = gltf.scene;

                // GLTF models already have materials and colors
                // Just apply some basic enhancements if needed
                currentModel.traverse((child) => {
                    if (child instanceof THREE.Mesh) {
                        // Enable vertex colors if present
                        if (child.geometry.attributes.color) {
                            child.material.vertexColors = true;
                        }
                        // Ensure proper lighting
                        if (child.material.type === 'MeshStandardMaterial') {
                            child.material.needsUpdate = true;
                        }
                    }
                });

                // Center and scale
                const box = new THREE.Box3().setFromObject(currentModel);
                const center = box.getCenter(new THREE.Vector3());
                currentModel.position.sub(center);

                const size = box.getSize(new THREE.Vector3());
                const maxDim = Math.max(size.x, size.y, size.z);
                const scale = 10 / maxDim;
                currentModel.scale.setScalar(scale);

                scene.add(currentModel);

                document.getElementById('modelName').textContent = modelPath.split('/').pop() + ' (GLTF)';

                // Create US markers
                createUSMarkers();
            },
            (progress) => {
                // Optional: show loading progress
                const percent = (progress.loaded / progress.total * 100).toFixed(0);
                document.getElementById('modelName').textContent = `{{ _("Loading") }} ${percent}%`;
            },
            (error) => {
                console.error('Error loading GLTF model:', error);
                document.getElementById('modelName').textContent = '{{ _("Error loading model") }}';
            }
        );
    } else {
        // Load OBJ
        const loader = new THREE.OBJLoader();
        loader.load(modelPath,
            (object) => {
                currentModel = object;

                // Apply material
                object.traverse((child) => {
                    if (child instanceof THREE.Mesh) {
                        child.material = new THREE.MeshPhongMaterial({
                            color: 0x888888,
                            flatShading: false
                        });
                    }
                });

                // Center and scale
                const box = new THREE.Box3().setFromObject(object);
                const center = box.getCenter(new THREE.Vector3());
                object.position.sub(center);

                const size = box.getSize(new THREE.Vector3());
                const maxDim = Math.max(size.x, size.y, size.z);
                const scale = 10 / maxDim;
                object.scale.setScalar(scale);

                scene.add(object);

                document.getElementById('modelName').textContent = modelPath.split('/').pop() + ' (OBJ)';

                // Create US markers
                createUSMarkers();
            },
            undefined,
            (error) => {
                console.error('Error loading OBJ model:', error);
                document.getElementById('modelName').textContent = '{{ _("Error loading model") }}';
            }
        );
    }
}

function createUSMarkers() {
    // Create markers for each US based on their spatial data
    graphData.nodes.forEach(node => {
        if (!node.us_number) return;

        // Use period/area to position markers (simplified)
        // In real implementation, use actual 3D coordinates from database
        const marker = new THREE.Mesh(
            new THREE.SphereGeometry(0.3, 16, 16),
            new THREE.MeshBasicMaterial({
                color: getNodeColor(node).replace('#', '0x'),
                transparent: true,
                opacity: 0.7
            })
        );

        // Position based on some logic (example: random for demo)
        marker.position.set(
            (Math.random() - 0.5) * 10,
            Math.random() * 10,
            (Math.random() - 0.5) * 10
        );

        marker.userData = { us: node.us_number, node: node };
        usMarkers[node.id] = marker;
        scene.add(marker);
    });
}

function focus3DOnUS(node) {
    if (!usMarkers[node.id]) return;

    const marker = usMarkers[node.id];

    // Immediate highlight of target marker
    marker.material.opacity = 1.0;
    marker.material.emissive = new THREE.Color(0xff0000);

    // Animate camera to focus on marker
    const targetPos = marker.position.clone();
    targetPos.y += 5;
    targetPos.z += 10;

    animateCameraToPosition(targetPos, marker.position);

    // Fade out other markers (deferred to not block animation)
    setTimeout(() => {
        Object.values(usMarkers).forEach(m => {
            if (m !== marker) {
                m.material.opacity = 0.3;
                m.material.emissive = new THREE.Color(0x000000);
            }
        });
    }, 50);

    // Show sync indicator
    document.getElementById('modelSync').classList.add('active');
    setTimeout(() => {
        document.getElementById('modelSync').classList.remove('active');
    }, 800);
}

function animateCameraToPosition(position, target) {
    const duration = 600;  // Faster animation (was 1000ms)
    const startPos = camera.position.clone();
    const startTarget = controls.target.clone();
    const startTime = Date.now();

    function animate() {
        const elapsed = Date.now() - startTime;
        const t = Math.min(elapsed / duration, 1);

        // Smoother ease-out function (cubic)
        const eased = 1 - Math.pow(1 - t, 3);

        camera.position.lerpVectors(startPos, position, eased);
        controls.target.lerpVectors(startTarget, target, eased);
        controls.update();

        if (t < 1) {
            requestAnimationFrame(animate);
        }
    }

    animate();
}

// ========== UPLOAD FUNCTIONALITY ==========
function showUploadDialog() {
    const modal = new bootstrap.Modal(document.getElementById('uploadModal'));
    modal.show();

    // Reset form
    document.getElementById('uploadForm').reset();
    document.getElementById('uploadProgress').classList.add('d-none');
    document.getElementById('uploadResult').classList.add('d-none');
}

function uploadModel() {
    const form = document.getElementById('uploadForm');
    const fileInput = document.getElementById('modelFile');
    const siteName = document.getElementById('siteName').value;
    const usId = document.getElementById('usId').value;

    if (!fileInput.files || fileInput.files.length === 0) {
        showUploadResult('error', '{{ _("Please select a file") }}');
        return;
    }

    const formData = new FormData();
    formData.append('model_file', fileInput.files[0]);
    formData.append('site_name', siteName);
    if (usId) {
        formData.append('us_id', usId);
    }

    // Show progress
    document.getElementById('uploadProgress').classList.remove('d-none');
    document.getElementById('uploadResult').classList.add('d-none');

    // Upload via AJAX
    fetch('/3d/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('uploadProgress').classList.add('d-none');

        if (data.success) {
            showUploadResult('success', data.message || '{{ _("Upload successful") }}');

            // Refresh model dropdown
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            showUploadResult('error', data.error || '{{ _("Upload failed") }}');
        }
    })
    .catch(error => {
        document.getElementById('uploadProgress').classList.add('d-none');
        showUploadResult('error', '{{ _("Upload error") }}: ' + error.message);
    });
}

function showUploadResult(type, message) {
    const result = document.getElementById('uploadResult');
    result.classList.remove('d-none', 'alert-success', 'alert-danger');
    result.classList.add(type === 'success' ? 'alert-success' : 'alert-danger');
    result.textContent = message;
}

// Initialize on load
document.addEventListener('DOMContentLoaded', () => {
    initMatrix();
    init3D();
});
</script>
{% endblock %}