{% extends "base.html" %}

{% block title %}Results - 1D Poisson Simulator{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2><i class="bi bi-graph-up"></i> Simulation Results</h2>
        <p class="text-muted">View and analyze your simulation results</p>
        <hr>
    </div>
</div>

<div class="row">
    <!-- Left Panel - Results List -->
    <div class="col-lg-3">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-clock-history"></i> Recent Simulations
                    <button class="btn btn-sm btn-outline-primary float-end" id="refreshResultsBtn" title="Refresh">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </h5>
            </div>
            <div class="card-body p-0">
                <div id="resultsList" class="list-group list-group-flush">
                    <!-- Results will be loaded here -->
                </div>
            </div>
        </div>
        
        <!-- Result Info -->
        <div class="card mt-3" id="resultInfoCard" style="display: none;">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-info-circle"></i> Simulation Info</h6>
            </div>
            <div class="card-body">
                <div id="resultInfo">
                    <!-- Info will be displayed here -->
                </div>
            </div>
        </div>
        
        <!-- Advanced Plot Settings -->
        <div class="card mt-3" id="plotSettingsCard" style="display: none;">
            <div class="card-header bg-light">
                <h6 class="mb-0">
                    <i class="bi bi-gear"></i> Plot Settings
                    <button class="btn btn-sm btn-outline-secondary float-end" id="resetPlotBtn">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </button>
                </h6>
            </div>
            <div class="card-body">
                <!-- Y-axis Scale -->
                <div class="mb-3">
                    <label class="form-label fw-bold small">Y-axis Scale</label>
                    <div class="btn-group btn-group-sm w-100" role="group">
                        <input type="radio" class="btn-check" name="yScale" id="yScaleLinear" value="linear" checked>
                        <label class="btn btn-outline-primary" for="yScaleLinear">Linear</label>

                        <input type="radio" class="btn-check" name="yScale" id="yScaleLog" value="log">
                        <label class="btn btn-outline-primary" for="yScaleLog">Log</label>
                    </div>
                </div>

                <!-- Grid -->
                <div class="mb-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="showGrid" checked>
                        <label class="form-check-label small" for="showGrid">Show Grid</label>
                    </div>
                </div>

                <!-- Legend -->
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="showLegend" checked>
                        <label class="form-check-label small" for="showLegend">Show Legend</label>
                    </div>
                </div>

                <!-- Line Width -->
                <div class="mb-3">
                    <label for="lineWidth" class="form-label small">Line Width</label>
                    <input type="range" class="form-range" id="lineWidth" min="1" max="5" value="2" step="0.5">
                    <small class="text-muted">Width: <span id="lineWidthValue">2</span></small>
                </div>

                <!-- Wavefunction Toggle (for All plots mode) -->
                <div class="mb-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="showWavefunctions" checked>
                        <label class="form-check-label small" for="showWavefunctions">
                            Show Wavefunctions in Band Plot
                            <i class="bi bi-info-circle text-muted" title="Only applies to 'All' plot mode when Schrödinger-Poisson data is available"></i>
                        </label>
                    </div>
                </div>

                <!-- Split Band View Toggle -->
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="splitBandView">
                        <label class="form-check-label small" for="splitBandView">
                            Split Ec/Ev in Separate Subplots
                            <i class="bi bi-info-circle text-muted" title="Display conduction and valence bands in separate vertically-stacked plots. Only applies to Band Structure and Wavefunctions plot modes."></i>
                        </label>
                    </div>
                </div>

                <small class="text-muted">
                    <i class="bi bi-info-circle"></i> Use mouse wheel to zoom, drag to pan
                </small>
            </div>
        </div>

        <!-- Actions -->
        <div class="card mt-3" id="resultActionsCard" style="display: none;">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-tools"></i> Actions</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary btn-sm" id="downloadResultsBtn">
                        <i class="bi bi-download"></i> Download Data
                    </button>
                    <button class="btn btn-outline-info btn-sm" id="exportPlotsBtn">
                        <i class="bi bi-image"></i> Export Plots
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" id="compareResultsBtn">
                        <i class="bi bi-arrows-angle-contract"></i> Compare
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Panel - Visualization -->
    <div class="col-lg-9">
        <!-- Plot Type Selector -->
        <div class="card mb-3">
            <div class="card-body">
                <div class="btn-group" role="group" id="plotTypeSelector">
                    <input type="radio" class="btn-check" name="plotType" id="plotAll" value="all" checked>
                    <label class="btn btn-outline-primary" for="plotAll">
                        <i class="bi bi-grid-3x3"></i> All
                    </label>

                    <input type="radio" class="btn-check" name="plotType" id="plotBand" value="band">
                    <label class="btn btn-outline-primary" for="plotBand">
                        <i class="bi bi-graph-up"></i> Band Structure
                    </label>

                    <input type="radio" class="btn-check" name="plotType" id="plotCharge" value="charge">
                    <label class="btn btn-outline-primary" for="plotCharge">
                        <i class="bi bi-bar-chart"></i> Charge Density
                    </label>

                    <input type="radio" class="btn-check" name="plotType" id="plotWave" value="wave">
                    <label class="btn btn-outline-primary" for="plotWave">
                        <i class="bi bi-activity"></i> Wavefunctions
                    </label>

                    <input type="radio" class="btn-check" name="plotType" id="plotCV" value="cv">
                    <label class="btn btn-outline-primary" for="plotCV">
                        <i class="bi bi-bezier2"></i> C-V
                    </label>
                </div>
            </div>
        </div>

        <!-- Bias Voltage Selector -->
        <div class="card mb-3" id="biasResultsCard" style="display: none;">
            <div class="card-header bg-warning bg-opacity-10">
                <h6 class="mb-0">
                    <i class="bi bi-lightning-charge"></i> Bias Sweep Results
                    <span class="badge bg-primary ms-2" id="biasPointCount"></span>
                </h6>
            </div>
            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-5">
                        <label for="biasVoltageSelect" class="form-label">Select Voltage Point</label>
                        <select class="form-select" id="biasVoltageSelect">
                            <!-- Populated dynamically -->
                        </select>
                    </div>
                    <div class="col-md-4">
                        <button class="btn btn-outline-primary btn-sm" id="compareBiasBtn">
                            <i class="bi bi-arrows-angle-contract"></i> Compare All Bias Points
                        </button>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-outline-success btn-sm" id="animateBiasBtn">
                            <i class="bi bi-play-circle"></i> Animate
                        </button>
                    </div>
                </div>
                <div class="mt-2">
                    <small class="text-muted">
                        <i class="bi bi-info-circle"></i>
                        This simulation has multiple bias voltage results.
                        Select a voltage to view its band diagram, or compare/animate all points.
                    </small>
                </div>
            </div>
        </div>

        <!-- Plots Container -->
        <div id="plotsContainer">
            <div class="alert alert-secondary">
                <i class="bi bi-info-circle"></i> Select a simulation from the list to view results
            </div>
        </div>

        <!-- Eigenvalues Table -->
        <div class="card mt-3" id="eigenvaluesCard" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-table"></i> Eigenvalues</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Electron States</h6>
                        <table class="table table-sm table-striped" id="electronEigenvalues">
                            <thead>
                                <tr>
                                    <th>State</th>
                                    <th>Energy (eV)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>Hole States</h6>
                        <table class="table table-sm table-striped" id="holeEigenvalues">
                            <thead>
                                <tr>
                                    <th>State</th>
                                    <th>Energy (eV)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="mt-3" id="transitionEnergy" style="display: none;">
                    <div class="alert alert-info">
                        <strong>Transition Energy (E<sub>1</sub> - HH<sub>1</sub>):</strong>
                        <span id="transitionEnergyValue"></span> eV
                        <br>
                        <strong>Wavelength:</strong>
                        <span id="transitionWavelength"></span> nm
                    </div>
                </div>
            </div>
        </div>

        <!-- Data Export Section -->
        <div class="card mt-3" id="dataExportCard" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-table"></i> Numerical Data</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive" style="max-height: 400px;">
                    <table class="table table-sm table-hover">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th>Position (nm)</th>
                                <th>E<sub>c</sub> (eV)</th>
                                <th>E<sub>v</sub> (eV)</th>
                                <th>E<sub>f</sub> (eV)</th>
                                <th>n (cm⁻³)</th>
                                <th>p (cm⁻³)</th>
                            </tr>
                        </thead>
                        <tbody id="dataTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->

<!-- Export Options Modal -->
<div class="modal fade" id="exportModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Export Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>Select Export Format:</h6>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="exportFormat" id="exportPNG" value="png" checked>
                    <label class="form-check-label" for="exportPNG">
                        PNG (Raster Image)
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="exportFormat" id="exportPDF" value="pdf">
                    <label class="form-check-label" for="exportPDF">
                        PDF (Vector Graphics)
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="exportFormat" id="exportSVG" value="svg">
                    <label class="form-check-label" for="exportSVG">
                        SVG (Vector Graphics)
                    </label>
                </div>

                <hr>

                <h6>Resolution (for PNG):</h6>
                <select class="form-select" id="exportDPI">
                    <option value="150">150 DPI (Screen)</option>
                    <option value="300" selected>300 DPI (Print)</option>
                    <option value="600">600 DPI (High Quality)</option>
                </select>
            </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" id="confirmExportBtn">
                    <i class="bi bi-download"></i> Export
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
    .result-item {
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .result-item:hover {
        background-color: #f8f9fa;
    }

    .result-item.active {
        background-color: #e7f3ff;
        border-left: 3px solid #0d6efd;
    }

    .result-name {
        font-weight: 600;
        color: #212529;
    }

    .result-timestamp {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .delete-result-btn {
        opacity: 0;
        transition: opacity 0.2s;
        padding: 0.25rem 0.5rem;
    }

    .result-item:hover .delete-result-btn {
        opacity: 1;
    }

    .convergence-badge {
        font-size: 0.7rem;
    }

    .plot-image {
        max-width: 100%;
        height: auto;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        margin-bottom: 1rem;
    }

    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
    }
</style>
{% endblock %}

{% block extra_js %}
<!-- Chart.js with Zoom Plugin -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
<script src="{{ url_for('static', filename='js/results.js') }}"></script>
{% endblock %}