{% extends 'base.html' %}
{% load static %}

{% block css %}
    {{ block.super }}
    <style>
        .recon-advanced-viewer {
            width: 100%;
            min-height: 62vh;
            box-sizing: border-box;
            background: #111;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.5rem;
            overflow: hidden;
            height: 62vh;
        }
        .recon-advanced-help {
            font-size: 0.9rem;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid py-4">
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
            <div>
                <h2 class="mb-1">Advanced Series Reconstruction</h2>
                <p class="text-muted mb-0">Plan reconstruction from interactive DV3D MPR viewports with crosshair-linked navigation.</p>
            </div>
            <a class="btn btn-outline-secondary btn-sm" href="{{ series.get_absolute_url }}">
                <i class="bi bi-arrow-left me-1"></i> Back to series
            </a>
        </div>

        <div class="alert alert-info recon-advanced-help">
            <div><strong>Workflow:</strong> the page auto-configures a 3-volume MPR layout on load and attempts to enable crosshair-linked navigation. Adjust crosshairs as needed, then generate reconstructions.</div>
        </div>

        <div id="advanced_recon_root" class="dicom-viewer-root recon-advanced-viewer" data-images='{{ image_ids_json|safe }}'></div>

        <div class="card border-0 shadow-sm mt-3">
            <div class="card-body">
                <form
                    id="advanced-recon-form"
                    class="row g-3"
                    method="post"
                    action="{% url 'atlas:series_optimize' series_id=series.pk %}"
                    hx-post="{% url 'atlas:series_optimize' series_id=series.pk %}"
                    hx-target="#advanced-recon-feedback"
                    hx-swap="innerHTML"
                    hx-indicator="#advanced-recon-indicator"
                >
                    {% csrf_token %}
                    <input type="hidden" name="operation" value="reconstruct">
                    <input type="hidden" name="recon_viewerstate_json" id="id_recon_viewerstate_json">

                    <div class="col-12 col-lg-4">
                        <div class="fw-semibold mb-2">Output planes</div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="adv-recon-axial" name="recon_planes" value="axial" checked>
                            <label class="form-check-label" for="adv-recon-axial">Axial</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="adv-recon-coronal" name="recon_planes" value="coronal" checked>
                            <label class="form-check-label" for="adv-recon-coronal">Coronal</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="adv-recon-sagittal" name="recon_planes" value="sagittal" checked>
                            <label class="form-check-label" for="adv-recon-sagittal">Sagittal</label>
                        </div>
                    </div>

                    <div class="col-12 col-lg-4">
                        <label class="form-label" for="adv-recon-thickness">Slab thickness (mm)</label>
                        <input id="adv-recon-thickness" type="number" step="0.1" min="0.1" name="recon_slice_thickness" class="form-control" value="3.0">

                        <label class="form-label mt-2" for="adv-recon-spacing">Slice spacing (mm)</label>
                        <input id="adv-recon-spacing" type="number" step="0.1" min="3" name="recon_slice_spacing" class="form-control" value="3.0">
                        <small class="text-muted d-block mt-1">Spacing is user-controlled and defaults to 3.0 mm minimum to reduce generated stack size.</small>
                    </div>

                    <div class="col-12 col-lg-4">
                        <label class="form-label" for="adv-recon-mode">Projection mode</label>
                        <select id="adv-recon-mode" name="recon_thickness_mode" class="form-select">
                            <option value="mean" selected>Average intensity</option>
                            <option value="max">Maximum intensity</option>
                            <option value="min">Minimum intensity</option>
                        </select>

                        <div class="d-flex flex-wrap gap-2 mt-3">
                            <button type="button" id="apply-mpr-layout" class="btn btn-outline-primary btn-sm">Apply MPR layout</button>
                            <button type="submit" class="btn btn-primary btn-sm">Generate recon series</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer d-flex align-items-center gap-2">
                <span id="advanced-recon-indicator" class="spinner-border spinner-border-sm text-primary htmx-indicator" role="status" aria-hidden="true"></span>
                <small class="text-muted">The current viewer state is captured at submit and attached to the reconstruction request.</small>
            </div>
        </div>

        <div class="card border-0 shadow-sm mt-3">
            <div class="card-body">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                    <h6 class="mb-0">Live Reconstruction Plan</h6>
                    <small id="advanced-plan-status" class="text-muted">Waiting for viewer telemetry...</small>
                </div>
                <div class="row g-2 small">
                    <div class="col-12 col-md-4"><strong>Viewport 1:</strong> <span id="advanced-plan-vp0">-</span></div>
                    <div class="col-12 col-md-4"><strong>Viewport 2:</strong> <span id="advanced-plan-vp1">-</span></div>
                    <div class="col-12 col-md-4"><strong>Viewport 3:</strong> <span id="advanced-plan-vp2">-</span></div>
                </div>
                <div class="row g-2 small mt-1">
                    <div class="col-12 col-md-6"><strong>Slab thickness:</strong> <span id="advanced-plan-thickness">3.0 mm</span></div>
                    <div class="col-12 col-md-6"><strong>Slice spacing:</strong> <span id="advanced-plan-spacing">3.0 mm</span></div>
                </div>
            </div>
        </div>

        <div id="advanced-recon-feedback" class="small mt-3"></div>
    </div>

    <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer"></script>
    <script>
        (function () {
            var ORIENTATION_LABELS = {
                axial: 'Axial',
                coronal: 'Coronal',
                sagittal: 'Sagittal',
            };

            function getViewerApi(name) {
                return window[name + '_advanced_recon_root'] || window[name + '_advanced_recon'] || window[name + '_root'] || window[name];
            }

            function parseViewerState(raw) {
                if (!raw) {
                    return null;
                }
                if (typeof raw === 'string') {
                    try {
                        return JSON.parse(raw);
                    } catch (err) {
                        return null;
                    }
                }
                return raw;
            }

            function getDisplayOrientation(value) {
                if (!value) {
                    return 'Unknown';
                }
                return ORIENTATION_LABELS[value] || String(value).charAt(0).toUpperCase() + String(value).slice(1);
            }

            function ensureMprLayout() {
                var exportFn = getViewerApi('exportViewerState');
                var importFn = getViewerApi('importViewerState');
                if (typeof importFn !== 'function') {
                    return false;
                }

                var existing = parseViewerState(typeof exportFn === 'function' ? exportFn() : null) || {};
                var stackIdx = Array.isArray(existing.stackIdx) ? existing.stackIdx : [];
                var stacks = Array.isArray(existing.stacks) ? existing.stacks : [];
                var baseStack = typeof stackIdx[0] === 'number' ? stackIdx[0] : (stacks.length > 0 ? 0 : null);

                var nextState = {
                    grid: { rows: 1, cols: 3 },
                    modes: ['volume', 'volume', 'volume'],
                    orientations: ['axial', 'coronal', 'sagittal'],
                    volumeSliceIndices: [null, null, null],
                };

                if (stacks.length > 0 && baseStack !== null) {
                    nextState.stacks = stacks;
                    nextState.stackIdx = [baseStack, baseStack, baseStack];
                }

                try {
                    importFn(nextState);
                    return true;
                } catch (err) {
                    console.warn('Failed to apply automatic MPR layout', err);
                    return false;
                }
            }

            function tryEnableCrosshairs() {
                var labels = ['Enable Cross Reference Lines', 'Enable Crosshairs'];
                var root = document.getElementById('advanced_recon_root');
                var scope = root ? root.parentElement || document : document;
                var buttons = scope.querySelectorAll('button');
                var clicked = false;

                buttons.forEach(function (btn) {
                    if (clicked) {
                        return;
                    }
                    var text = (btn.textContent || '').trim();
                    if (!text) {
                        return;
                    }
                    for (var i = 0; i < labels.length; i++) {
                        if (text.indexOf(labels[i]) !== -1) {
                            btn.click();
                            clicked = true;
                            break;
                        }
                    }
                });

                return clicked;
            }

            function formatViewportPlan(state, idx) {
                if (!state) {
                    return '-';
                }
                var modes = Array.isArray(state.modes) ? state.modes : [];
                var orientations = Array.isArray(state.orientations) ? state.orientations : [];
                var slices = Array.isArray(state.volumeSliceIndices) ? state.volumeSliceIndices : [];
                var mode = modes[idx] || 'unknown';
                var orientation = getDisplayOrientation(orientations[idx]);
                var slice = slices[idx];
                var sliceText = typeof slice === 'number' ? ('slice ' + slice) : 'slice n/a';
                return orientation + ' (' + mode + ', ' + sliceText + ')';
            }

            function updateLivePlan() {
                var exportFn = getViewerApi('exportViewerState');
                var thicknessInput = document.getElementById('adv-recon-thickness');
                var spacingInput = document.getElementById('adv-recon-spacing');
                var state = parseViewerState(typeof exportFn === 'function' ? exportFn() : null);

                var statusEl = document.getElementById('advanced-plan-status');
                var vp0 = document.getElementById('advanced-plan-vp0');
                var vp1 = document.getElementById('advanced-plan-vp1');
                var vp2 = document.getElementById('advanced-plan-vp2');
                var thicknessEl = document.getElementById('advanced-plan-thickness');
                var spacingEl = document.getElementById('advanced-plan-spacing');

                if (statusEl) {
                    statusEl.textContent = state ? 'Viewer telemetry active' : 'Waiting for viewer telemetry...';
                }
                if (vp0) {
                    vp0.textContent = formatViewportPlan(state, 0);
                }
                if (vp1) {
                    vp1.textContent = formatViewportPlan(state, 1);
                }
                if (vp2) {
                    vp2.textContent = formatViewportPlan(state, 2);
                }

                if (thicknessEl) {
                    var thicknessValue = thicknessInput && thicknessInput.value ? thicknessInput.value : '3.0';
                    thicknessEl.textContent = thicknessValue + ' mm';
                }
                if (spacingEl) {
                    var spacingValue = spacingInput && spacingInput.value ? spacingInput.value : '3.0';
                    spacingEl.textContent = spacingValue + ' mm';
                }
            }

            var applyBtn = document.getElementById('apply-mpr-layout');
            if (applyBtn) {
                applyBtn.addEventListener('click', function () {
                    ensureMprLayout();
                    setTimeout(updateLivePlan, 400);
                });
            }

            var form = document.getElementById('advanced-recon-form');
            var hidden = document.getElementById('id_recon_viewerstate_json');
            if (form && hidden) {
                form.addEventListener('submit', function () {
                    var exportFn = getViewerApi('exportViewerState');
                    if (typeof exportFn !== 'function') {
                        hidden.value = '';
                        return;
                    }
                    try {
                        var state = exportFn();
                        hidden.value = typeof state === 'string' ? state : JSON.stringify(state || {});
                    } catch (err) {
                        hidden.value = '';
                        console.warn('Failed to capture viewer state', err);
                    }
                });
            }

            var thicknessInput = document.getElementById('adv-recon-thickness');
            var spacingInput = document.getElementById('adv-recon-spacing');
            if (thicknessInput) {
                thicknessInput.addEventListener('input', updateLivePlan);
            }
            if (spacingInput) {
                spacingInput.addEventListener('input', updateLivePlan);
            }

            var autoAttempts = 0;
            var autoTimer = setInterval(function () {
                autoAttempts += 1;
                var mprApplied = ensureMprLayout();
                var crosshairEnabled = tryEnableCrosshairs();
                updateLivePlan();

                if ((mprApplied && crosshairEnabled) || autoAttempts >= 12) {
                    clearInterval(autoTimer);
                }
            }, 600);

            setInterval(updateLivePlan, 700);
            setTimeout(updateLivePlan, 1500);
        })();
    </script>
{% endblock %}