{% extends "base.html" %}
{% block title %}Column Design - ConcreteDesignPy{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@14/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/plotly.js-dist-min/plotly.min.js"></script>
<style>
/* Column page specific styles */
.col-page-layout { display: flex; gap: 2rem; align-items: flex-start; }
.col-page-left { flex: 0 0 500px; }
.col-page-right { flex: 1; min-width: 0; }
.col-page-right .results-panel { position: sticky; top: 1rem; }

/* Report sections */
.report-full { margin-top: 1.5rem; }
.report-section {
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem;
}
.report-section h4 {
    font-size: .95rem; color: var(--primary-dark); margin: 0 0 .75rem;
    padding-bottom: .35rem; border-bottom: 2px solid var(--primary-light);
}
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 2rem; font-size: .85rem; }
.report-grid dt { color: var(--gray-500); }
.report-grid dd { font-family: "SF Mono","Fira Code",monospace; font-weight: 500; text-align: right; }
.report-eq { background: var(--gray-50); padding: .6rem 1rem; border-radius: 4px; margin: .5rem 0; font-size: .9rem; }
.report-table {
    width: 100%; border-collapse: collapse; font-size: .8rem; margin: .5rem 0;
}
.report-table th {
    background: var(--primary-dark); color: #fff; padding: .35rem .5rem;
    text-align: center; font-weight: 600; font-size: .75rem;
}
.report-table td {
    padding: .3rem .5rem; text-align: center; border-bottom: 1px solid var(--gray-200);
    font-family: "SF Mono","Fira Code",monospace; font-size: .78rem;
}
.report-table tr:nth-child(even) { background: var(--gray-50); }
.report-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dc-table th { background: #b91c1c; }
.dc-table .status-pass { background: #dcfce7; }
.dc-table .status-fail { background: #fee2e2; }
</style>
{% endblock %}

{% block content %}
<div class="calc-page">
    <a href="/" class="back-link">&larr; All Calculators</a>
    <h1>Strain-Compatibility Analysis of Reinforced Concrete Section</h1>
    <p class="ref">NSCP 2015 / ACI 318-19 &mdash; Column P-M / P-M-M Interaction Diagram</p>

    <div class="col-page-layout">
        <div class="col-page-left">
            <form id="calc-form" class="calc-form">
                <div class="form-section">
                    <h3>Analysis Mode</h3>
                    <div style="display:flex;gap:.5rem;">
                        <button type="button" id="btn-uniaxial" class="btn-primary" style="flex:1;" onclick="setAnalysisMode('uniaxial')">Uniaxial P-M</button>
                        <button type="button" id="btn-biaxial" class="btn-secondary" style="flex:1;" onclick="setAnalysisMode('biaxial')">Biaxial P-M-M</button>
                    </div>
                </div>
                <div class="form-section">
                    <h3>Materials</h3>
                    <div class="form-row">
                        <div class="form-group"><label>f'c (MPa)</label><input type="number" name="fc" value="30" step="0.1" required></div>
                        <div class="form-group"><label>fy (MPa)</label><input type="number" name="fy" value="415" step="0.1" required></div>
                    </div>
                </div>

                <div class="form-section">
                    <h3>Section Properties</h3>
                    <div class="form-row">
                        <div class="form-group"><label>Width, b (mm)</label><input type="number" name="b" value="450" required></div>
                        <div class="form-group"><label>Depth, h (mm)</label><input type="number" name="h" value="450" required></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group"><label>Cover (mm)</label><input type="number" name="cover" value="40" required></div>
                        <div class="form-group">
                            <label>Confinement</label>
                            <select name="confinement">
                                <option value="tied" selected>Tied</option>
                                <option value="spiral">Spiral</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <h3>Reinforcement
                        <span class="rebar-mode-toggle">
                            <label><input type="radio" name="rebar_mode" value="auto" checked> Auto</label>
                            <label><input type="radio" name="rebar_mode" value="manual"> Manual</label>
                        </span>
                    </h3>
                    <div id="rebar-auto">
                        <div class="form-row">
                            <div class="form-group"><label>Total bars</label><input type="number" name="n_bars" value="12" required></div>
                            <div class="form-group"><label>Bar dia. (mm)</label><input type="number" name="d_bar" value="25" required></div>
                            <div class="form-group"><label>Bars/side</label><input type="number" name="n_bars_side" value="0" placeholder="auto"></div>
                        </div>
                        <div class="form-row">
                            <div class="form-group"><label>nx (width)</label><input type="number" name="nx" value="4"></div>
                            <div class="form-group"><label>ny (depth)</label><input type="number" name="ny" value="4"></div>
                        </div>
                    </div>
                    <div id="rebar-manual" style="display:none;">
                        <p class="hint" style="text-align:left;margin-bottom:.5rem;">Y = from center (mm), Z = from bottom (mm)</p>
                        <div class="rebar-table-wrap">
                            <table class="rebar-edit-table" id="rebar-table">
                                <thead><tr><th>#</th><th>As (mm&sup2;)</th><th>Y (mm)</th><th>Z (mm)</th><th></th></tr></thead>
                                <tbody id="rebar-tbody"></tbody>
                            </table>
                        </div>
                        <div style="display:flex;gap:.5rem;margin-top:.5rem;">
                            <button type="button" class="btn-secondary" onclick="addRebarRow()">+ Add Bar</button>
                            <button type="button" class="btn-secondary" onclick="generateDefaultBars()">Generate from Section</button>
                        </div>
                    </div>
                </div>

                <div class="form-section">
                    <h3>Load Combinations</h3>
                    <div id="load-combo-table" style="width:100%;overflow:hidden;"></div>
                </div>

                <div class="form-section" id="biaxial-params" style="display:none;">
                    <h3>Biaxial Analysis</h3>
                    <div class="form-row">
                        <div class="form-group"><label>NA angles</label><input type="number" name="n_angles" value="24" min="6" step="6"></div>
                        <div class="form-group"><label>NA depths</label><input type="number" name="n_c_values" value="32" min="8" step="4"></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group"><label>Contour Pu (kN)</label><input type="number" name="contour_pu" value="1000" step="50"><p style="font-size:.72rem;color:var(--gray-400);margin:.2rem 0 0;">Pu level for Mx-My contour slice</p></div>
                    </div>
                </div>

                <button type="submit" class="btn-primary" style="width:100%;" id="submit-btn">Generate Interaction Diagram</button>
            </form>
        </div>

        <div class="col-page-right">
            <div id="results" class="results-panel" style="display:none;">
                <h2 id="results-title">P-M Interaction Diagram</h2>
                <div id="results-summary-biaxial" style="display:none;"></div>
                <div id="chart-pm" style="text-align:center;"></div>
                <div id="chart-3d" style="text-align:center;display:none;"></div>
                <div id="svg-rebar" style="text-align:center;margin-top:1rem;"></div>
            </div>
        </div>
    </div>

    <div id="charts-row-biaxial" style="display:none;margin-top:1rem;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
            <div id="chart-contour" style="width:100%;"></div>
            <div id="chart-fiber-col" style="width:100%;"></div>
        </div>
    </div>

    <!-- Full-width report below -->
    <div id="results-report" class="report-full" style="display:none;"></div>
</div>

<script>
// ── Analysis Mode ──
var analysisMode = 'uniaxial';
function setAnalysisMode(mode) {
    analysisMode = mode;
    document.getElementById('btn-uniaxial').className = mode === 'uniaxial' ? 'btn-primary' : 'btn-secondary';
    document.getElementById('btn-biaxial').className = mode === 'biaxial' ? 'btn-primary' : 'btn-secondary';
    document.getElementById('biaxial-params').style.display = mode === 'biaxial' ? '' : 'none';
    document.getElementById('submit-btn').textContent = mode === 'biaxial' ? 'Generate Biaxial Surface' : 'Generate Interaction Diagram';
    // Switch Handsontable columns
    rebuildHot(mode);
}

// ── Handsontable ──
var uniaxialData = [
    [1, '1.2D + 1.6L',        2500, 0, 150],
    [2, '1.2D + 1.0L + 1.0E', 1800, 0, 280],
    [3, '0.9D + 1.0E',        1200, 0, 250],
    [4, '1.2D + 1.6L + 0.5S', 2700, 0, 120],
    [5, '', null, null, null],
];
var biaxialData = [
    [1, '1.2D + 1.6L',        2000, 150, 100],
    [2, '0.9D + 1.0E',        800,  200, 180],
    [3, '', null, null, null],
];
var hotContainer = document.getElementById('load-combo-table');
var hot = null;

function rebuildHot(mode) {
    // Save current data before destroying
    if (hot) {
        try {
            var currentData = hot.getData();
            if (analysisMode === 'biaxial' && mode === 'uniaxial') biaxialData = currentData;
            else if (analysisMode === 'uniaxial' && mode === 'biaxial') uniaxialData = currentData;
        } catch(e) {}
        try { hot.destroy(); } catch(e) {}
        hot = null;
        // Clear container to prevent stale DOM
        hotContainer.innerHTML = '';
    }
    var data, colHeaders, columns;
    if (mode === 'biaxial') {
        data = JSON.parse(JSON.stringify(biaxialData));
        colHeaders = ['', 'Load Combination', 'P<sub>u</sub> (kN)', 'M<sub>ux</sub> (kN-m)', 'M<sub>uy</sub> (kN-m)'];
    } else {
        data = JSON.parse(JSON.stringify(uniaxialData));
        colHeaders = ['', 'Load Combination', 'P<sub>u</sub> (kN)', 'V<sub>u</sub> (kN)', 'M<sub>u</sub> (kN-m)'];
    }
    columns = [
        { type: 'numeric', readOnly: true, width: 30 },
        { type: 'text', width: 140 },
        { type: 'numeric', numericFormat: { pattern: '0.0' }, width: 75 },
        { type: 'numeric', numericFormat: { pattern: '0.0' }, width: 75 },
        { type: 'numeric', numericFormat: { pattern: '0.0' }, width: 75 },
    ];
    hot = new Handsontable(hotContainer, {
        data: data, colHeaders: colHeaders, columns: columns,
        rowHeaders: false, minRows: 5, minSpareRows: 1,
        contextMenu: true, stretchH: 'all', height: 'auto',
        className: 'htCenter', licenseKey: 'non-commercial-and-evaluation',
        afterCreateRow: function() { renumberLoadCombos(); },
        afterRemoveRow: function() { renumberLoadCombos(); },
    });
}
rebuildHot('uniaxial');

function renumberLoadCombos() {
    if (!hot || hot.isDestroyed) return;
    try {
        var data = hot.getData();
        for (var i = 0; i < data.length; i++) hot.setDataAtCell(i, 0, i + 1, 'renumber');
    } catch(e) {}
}

function getLoadCombos() {
    if (!hot || hot.isDestroyed) return [];
    var combos = [], data = hot.getData();
    for (var i = 0; i < data.length; i++) {
        var pu = data[i][2];
        if (pu === null || pu === '') continue;
        if (analysisMode === 'biaxial') {
            var mux = data[i][3], muy = data[i][4];
            if ((mux !== null && mux !== '') || (muy !== null && muy !== '')) {
                combos.push({
                    name: data[i][1] || ('LC ' + (i + 1)),
                    pu: parseFloat(pu),
                    mux: parseFloat(mux) || 0,
                    muy: parseFloat(muy) || 0,
                });
            }
        } else {
            var mu = data[i][4];
            if (mu !== null && mu !== '') {
                combos.push({
                    name: data[i][1] || ('LC ' + (i + 1)),
                    pu: parseFloat(pu),
                    vu: data[i][3] !== null && data[i][3] !== '' ? parseFloat(data[i][3]) : 0,
                    mu: parseFloat(mu),
                });
            }
        }
    }
    return combos;
}

// ── Rebar toggle ──
document.querySelectorAll('input[name="rebar_mode"]').forEach(function(r) {
    r.addEventListener('change', function() {
        document.getElementById('rebar-auto').style.display = this.value === 'auto' ? '' : 'none';
        document.getElementById('rebar-manual').style.display = this.value === 'manual' ? '' : 'none';
        if (this.value === 'manual' && !document.getElementById('rebar-tbody').children.length) generateDefaultBars();
    });
});

var rebarCounter = 0;
function addRebarRow(area, y, z) {
    rebarCounter++;
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + rebarCounter + '</td>'
        + '<td><input type="number" class="rb-area" value="' + (area || 490.9) + '" step="0.1"></td>'
        + '<td><input type="number" class="rb-y" value="' + (y || 0) + '" step="0.1"></td>'
        + '<td><input type="number" class="rb-z" value="' + (z || 0) + '" step="0.1"></td>'
        + '<td><button type="button" class="btn-remove" onclick="this.closest(\'tr\').remove();renumberBars();">&times;</button></td>';
    document.getElementById('rebar-tbody').appendChild(tr);
}
function renumberBars() {
    rebarCounter = 0;
    document.getElementById('rebar-tbody').querySelectorAll('tr').forEach(function(row) {
        row.cells[0].textContent = ++rebarCounter;
    });
}
function generateDefaultBars() {
    var f = document.getElementById('calc-form');
    var b = parseFloat(f.b.value)||450, h = parseFloat(f.h.value)||450;
    var cover = parseFloat(f.cover.value)||40, d_bar = parseFloat(f.d_bar.value)||25;
    var nx = parseInt(f.nx.value)||4, ny = parseInt(f.ny.value)||4;
    var tie = d_bar <= 32 ? 10 : 12, dp = cover + tie + d_bar / 2.0;
    var area = Math.PI * d_bar * d_bar / 4.0;
    document.getElementById('rebar-tbody').innerHTML = ''; rebarCounter = 0;
    var xn = -b/2+dp, xx = b/2-dp, zn = dp, zx = h-dp;
    for (var i=0;i<nx;i++) { var y = nx>1 ? xn+i*(xx-xn)/(nx-1) : 0; addRebarRow(area.toFixed(1),y.toFixed(1),zx.toFixed(1)); }
    for (var j=1;j<ny-1;j++) { var z = zx-j*(zx-zn)/(ny-1); addRebarRow(area.toFixed(1),xn.toFixed(1),z.toFixed(1)); addRebarRow(area.toFixed(1),xx.toFixed(1),z.toFixed(1)); }
    for (var i=0;i<nx;i++) { var y = nx>1 ? xn+i*(xx-xn)/(nx-1) : 0; addRebarRow(area.toFixed(1),y.toFixed(1),zn.toFixed(1)); }
}
function getManualBars() {
    var bars = [];
    document.getElementById('rebar-tbody').querySelectorAll('tr').forEach(function(row) {
        bars.push({ area: parseFloat(row.querySelector('.rb-area').value), y: parseFloat(row.querySelector('.rb-y').value), z: parseFloat(row.querySelector('.rb-z').value) });
    });
    return bars;
}

// ── Plotly Chart ──
function renderPlotlyChart(points, combos, payload) {
    // Build symmetric envelope: positive side → negative side (mirrored) → close
    var mu_nom = [], pu_nom = [], mu_fac = [], pu_fac = [];

    // Positive moment side (as-is from backend)
    for (var i = 0; i < points.length; i++) {
        mu_nom.push(points[i].mn); pu_nom.push(points[i].pn);
        mu_fac.push(points[i].mu); pu_fac.push(points[i].pu);
    }
    // Negative moment side (mirror, traverse in reverse to close the loop)
    for (var i = points.length - 1; i >= 0; i--) {
        mu_nom.push(-points[i].mn); pu_nom.push(points[i].pn);
        mu_fac.push(-points[i].mu); pu_fac.push(points[i].pu);
    }
    // Close
    if (points.length > 0) {
        mu_nom.push(mu_nom[0]); pu_nom.push(pu_nom[0]);
        mu_fac.push(mu_fac[0]); pu_fac.push(pu_fac[0]);
    }

    var traces = [
        {
            x: mu_nom, y: pu_nom, mode: 'lines', name: 'Nominal (Pn, Mn)',
            line: { color: '#93c5fd', width: 1.5, dash: 'dash' },
        },
        {
            x: mu_fac, y: pu_fac, mode: 'lines', name: 'Factored (\u03d5Pn, \u03d5Mn)',
            line: { color: '#1e40af', width: 2.5 },
            fill: 'toself', fillcolor: 'rgba(30,64,175,0.06)',
        },
    ];

    // Plot each load combination as a labeled marker
    if (combos.length > 0) {
        var colors = ['#dc2626','#f97316','#16a34a','#8b5cf6','#ec4899','#0891b2','#ca8a04','#6366f1'];
        combos.forEach(function(lc, i) {
            var clr = colors[i % colors.length];
            var sym = lc.status === 'OK' ? 'circle' : 'x';
            traces.push({
                x: [lc.mu], y: [lc.pu], mode: 'markers+text', name: lc.name,
                marker: { size: 10, color: clr, symbol: sym, line: { width: 1.5, color: '#fff' } },
                text: [lc.name], textposition: 'top right',
                textfont: { size: 10, color: clr },
            });
        });
    }

    var label = payload.b + '\u00d7' + payload.h + ' mm | ' + (payload.n_bars || (payload.manual_bars ? payload.manual_bars.length : '')) + '-\u03c6' + payload.d_bar;
    var layout = {
        title: { text: 'P-M Interaction Diagram<br><sup>' + label + ' | f\'c=' + payload.fc + ', fy=' + payload.fy + ' MPa</sup>', font: { size: 14 } },
        xaxis: { title: 'Moment, \u03d5Mn (kN-m)', zeroline: true, gridcolor: '#e5e7eb' },
        yaxis: { title: 'Axial, \u03d5Pn (kN)', zeroline: true, zerolinecolor: '#374151', zerolinewidth: 1.5, gridcolor: '#e5e7eb' },
        showlegend: true, legend: { x: 1, xanchor: 'right', y: 1, bgcolor: 'rgba(255,255,255,0.85)', bordercolor: '#d1d5db', borderwidth: 1, font: { size: 10 } },
        height: 600,
        margin: { t: 60, r: 20, b: 50, l: 65 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff',
        hovermode: 'closest',
    };

    var config = { responsive: true, displayModeBar: true, modeBarButtonsToRemove: ['lasso2d','select2d'], displaylogo: false };
    Plotly.newPlot('chart-pm', traces, layout, config);
}

// ── 3D Line Chart (wireframe by theta) ──
function render3DChart(pts, combos) {
    var traces = [];
    // Collect all surface points + mirrored for full shell
    var allX = [], allY = [], allZ = [], allPhi = [];
    for (var i = 0; i < pts.length; i++) {
        allX.push(pts[i].mux); allY.push(pts[i].muy); allZ.push(pts[i].pu); allPhi.push(pts[i].phi);
        if (pts[i].theta_deg > 0 && pts[i].theta_deg < 180) {
            allX.push(-pts[i].mux); allY.push(-pts[i].muy); allZ.push(pts[i].pu); allPhi.push(pts[i].phi);
        }
    }
    // Transparent mesh surface (Delaunay triangulation)
    traces.push({
        x: allX, y: allY, z: allZ,
        type: 'mesh3d', alphahull: 0,
        intensity: allPhi,
        colorscale: [[0, '#1e3a5f'], [0.3, '#1e40af'], [0.5, '#3b82f6'], [0.7, '#60a5fa'], [1, '#93c5fd']],
        colorbar: { title: '\u03c6', thickness: 15, len: 0.5 },
        opacity: 0.35,
        name: 'Interaction Surface',
        showlegend: false,
        flatshading: true,
        lighting: { ambient: 0.8, diffuse: 0.5, specular: 0.1 },
    });
    // Load combo markers
    if (combos && combos.length > 0) {
        var lcColors = ['#dc2626','#2563eb','#16a34a','#f59e0b'];
        for (var k = 0; k < combos.length; k++) {
            var lc = combos[k];
            traces.push({
                x: [lc.mux], y: [lc.muy], z: [lc.pu],
                mode: 'markers+text', type: 'scatter3d',
                name: lc.name + ' (' + lc.status + ')',
                marker: { size: 6, color: lc.status === 'OK' ? lcColors[k % 4] : '#dc2626', symbol: lc.status === 'OK' ? 'circle' : 'x' },
                text: [lc.name], textposition: 'top center', textfont: { size: 10 },
            });
        }
    }
    Plotly.newPlot('chart-3d', traces, {
        title: { text: 'P-M-M Interaction Surface (Factored)', font: { size: 14 } },
        scene: {
            xaxis: { title: 'Mux (kN-m)', gridcolor: '#e5e7eb' },
            yaxis: { title: 'Muy (kN-m)', gridcolor: '#e5e7eb' },
            zaxis: { title: 'Pu (kN)', gridcolor: '#e5e7eb' },
            camera: { eye: { x: 1.5, y: 1.5, z: 1.0 } },
        },
        height: 800, margin: { t: 40, r: 10, b: 10, l: 10 },
        showlegend: true,
        legend: { x: 0, y: 1, bgcolor: 'rgba(255,255,255,0.8)', font: { size: 9 } },
    }, { responsive: true });
}

// ── Mx-My Contour Chart ──
function renderContourChart(contours, combos, puLevel) {
    var traces = [];
    // Color gradient from light (low Pu) to dark (high Pu)
    var cScale = ['#bfdbfe','#93c5fd','#60a5fa','#3b82f6','#2563eb','#1e40af','#1e3a5f','#172554','#0f172a','#030712'];

    if (contours && contours.length > 0) {
        for (var ci = 0; ci < contours.length; ci++) {
            var ctr = contours[ci];
            var cx = [], cy = [];
            for (var i = 0; i < ctr.points.length; i++) { cx.push(ctr.points[i].mux); cy.push(ctr.points[i].muy); }
            var clr = cScale[Math.min(ci, cScale.length - 1)];
            var isUserLevel = Math.abs(ctr.pu_level - puLevel) < 1;
            traces.push({
                x: cx, y: cy, mode: 'lines',
                name: 'Pu=' + ctr.pu_level + ' kN',
                line: { color: clr, width: isUserLevel ? 3 : 1.5 },
                fill: ci === 0 ? 'toself' : 'none',
                fillcolor: ci === 0 ? 'rgba(191,219,254,0.08)' : undefined,
            });
        }
    }

    // Load combo markers
    if (combos && combos.length > 0) {
        var lcColors = ['#dc2626','#f97316','#16a34a','#f59e0b'];
        for (var j = 0; j < combos.length; j++) {
            var lc = combos[j];
            traces.push({
                x: [lc.mux], y: [lc.muy], mode: 'markers+text', name: lc.name,
                marker: { size: 10, color: lc.status === 'OK' ? lcColors[j%4] : '#dc2626', symbol: lc.status === 'OK' ? 'circle' : 'x', line: { width: 1.5, color: '#fff' } },
                text: [lc.name], textposition: 'top right', textfont: { size: 9, color: lcColors[j%4] },
            });
        }
    }
    Plotly.newPlot('chart-contour', traces, {
        title: { text: 'Mx-My Interaction Contours at Multiple Pu Levels', font: { size: 14 } },
        xaxis: { title: 'Mux (kN-m)', zeroline: true, zerolinecolor: '#999', gridcolor: '#e5e7eb', scaleanchor: 'y' },
        yaxis: { title: 'Muy (kN-m)', zeroline: true, zerolinecolor: '#999', gridcolor: '#e5e7eb' },
        height: 500, margin: { t: 40, r: 20, b: 60, l: 70 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff', showlegend: true,
        legend: { x: 1, xanchor: 'right', y: 1, bgcolor: 'rgba(255,255,255,0.85)', font: { size: 9 } },
    }, { responsive: true, displayModeBar: false });
}

// ── Biaxial Report ──
// ── 2D Fiber Heatmap for Column ──
function renderFiberPlotCol(fp) {
    if (!fp || !fp.stresses) return;
    var nx = fp.nx, ny = fp.ny;
    var xVals = [], yVals = [];
    var xSet = {}, ySet = {};
    for (var i = 0; i < fp.fiber_x.length; i++) { xSet[fp.fiber_x[i]] = 1; ySet[fp.fiber_y[i]] = 1; }
    xVals = Object.keys(xSet).map(Number).sort(function(a,b){return a-b;});
    yVals = Object.keys(ySet).map(Number).sort(function(a,b){return a-b;});

    // Build 2D stress grid
    var zStress = [];
    for (var yi = 0; yi < yVals.length; yi++) {
        var row = [];
        for (var xi = 0; xi < xVals.length; xi++) {
            var idx = yi * nx + xi;
            row.push(idx < fp.stresses.length ? fp.stresses[idx] : 0);
        }
        zStress.push(row);
    }

    // Colorscale: white (0 stress) to deep blue (max stress)
    var traces = [{
        z: zStress, x: xVals, y: yVals,
        type: 'heatmap', xgap: 1, ygap: 1,
        colorscale: [[0,'#f8fafc'],[0.15,'#e0f2fe'],[0.3,'#7dd3fc'],[0.5,'#0ea5e9'],[0.7,'#0369a1'],[1,'#0c4a6e']],
        colorbar: { title: 'Stress (MPa)', thickness: 12, len: 0.7, titleside: 'right', titlefont: { size: 10 } },
        hovertemplate: 'x=%{x:.0f}, y=%{y:.0f}<br>\u03c3=%{z:.2f} MPa<extra></extra>',
    }];

    // Section outline
    var halfB = xVals[xVals.length-1] + fp.dx/2, halfBn = xVals[0] - fp.dx/2;
    var halfH = yVals[yVals.length-1] + fp.dy/2, halfHn = yVals[0] - fp.dy/2;
    traces.push({
        x: [halfBn, halfB, halfB, halfBn, halfBn], y: [halfHn, halfHn, halfH, halfH, halfHn],
        mode: 'lines', line: { color: '#333', width: 2 }, showlegend: false, hoverinfo: 'skip',
    });

    // Bar markers with labels
    if (fp.bar_x && fp.bar_y) {
        var compX = [], compY = [], compText = [], tenX = [], tenY = [], tenText = [];
        for (var bi = 0; bi < fp.bar_x.length; bi++) {
            var s = fp.bar_stresses[bi];
            if (s >= 0) { compX.push(fp.bar_x[bi]); compY.push(fp.bar_y[bi]); compText.push(s.toFixed(0) + ' MPa'); }
            else { tenX.push(fp.bar_x[bi]); tenY.push(fp.bar_y[bi]); tenText.push(s.toFixed(0) + ' MPa'); }
        }
        if (compX.length > 0) traces.push({
            x: compX, y: compY, mode: 'markers', name: 'Compression bars',
            marker: { size: 12, color: '#dc2626', symbol: 'circle', line: { width: 2, color: '#fff' } },
            text: compText, hovertemplate: 'Bar: x=%{x:.0f}, y=%{y:.0f}<br>fs=%{text}<extra></extra>',
        });
        if (tenX.length > 0) traces.push({
            x: tenX, y: tenY, mode: 'markers', name: 'Tension bars',
            marker: { size: 12, color: '#1e40af', symbol: 'circle', line: { width: 2, color: '#fff' } },
            text: tenText, hovertemplate: 'Bar: x=%{x:.0f}, y=%{y:.0f}<br>fs=%{text}<extra></extra>',
        });
    }

    // NA line
    var maxY = yVals[yVals.length-1] + fp.dy / 2;
    var naY = maxY - fp.c;
    traces.push({
        x: [halfBn - 15, halfB + 15], y: [naY, naY],
        mode: 'lines', line: { color: '#dc2626', width: 2.5, dash: 'dash' },
        name: 'Neutral Axis', hoverinfo: 'skip',
    });

    Plotly.newPlot('chart-fiber-col', traces, {
        title: { text: 'Fiber Stress Distribution (\u03b8=0\u00b0, c=' + fp.c + ' mm)', font: { size: 14 } },
        xaxis: { title: 'x (mm)', gridcolor: '#e5e7eb', scaleanchor: 'y', zeroline: false },
        yaxis: { title: 'y (mm)', gridcolor: '#e5e7eb', zeroline: false },
        height: 500, margin: { t: 40, r: 60, b: 50, l: 60 },
        plot_bgcolor: '#f8fafc', paper_bgcolor: '#fff',
        showlegend: true,
        legend: { x: 0, y: -0.15, orientation: 'h', bgcolor: 'rgba(255,255,255,0.85)', font: { size: 9 } },
        annotations: [{ x: halfB + 20, y: naY, text: 'NA', showarrow: false, font: { size: 10, color: '#dc2626' } }],
    }, { responsive: true, displayModeBar: false });
}

function renderBiaxialReport(result, payload, combosCheck) {
    var info = result.section_info || {};
    var h = '';
    h += '<div class="report-section"><h4>Section Properties</h4>';
    h += '<div class="report-eq">\\[ A_g = ' + payload.b + ' \\times ' + payload.h + ' = ' + info.ag + ' \\text{ mm}^2 \\quad;\\quad A_{st} = ' + info.ast_total + ' \\text{ mm}^2 \\quad (\\rho = ' + (info.rho*100).toFixed(2) + '\\%) \\quad;\\quad \\beta_1 = ' + info.beta1 + ' \\]</div>';
    h += '</div>';
    h += '<div class="report-section"><h4>Axial Capacity</h4>';
    h += '<div class="report-eq">\\[ P_o = ' + result.pure_compression_kn + ' \\text{ kN} \\quad;\\quad \\phi P_{n,max} = ' + result.phi_pn_max_kn + ' \\text{ kN} \\quad;\\quad P_t = ' + result.pure_tension_kn + ' \\text{ kN} \\]</div>';
    h += '</div>';
    h += '<div class="report-section"><h4>Analysis Parameters</h4>';
    h += '<p style="font-size:.85rem;">NA angles: ' + result.n_angles + ' | NA depths: ' + result.n_c_values + ' | Surface points: ' + result.surface_points.length + ' | Method: Whitney fiber approach</p>';
    h += '</div>';
    if (combosCheck && combosCheck.length > 0) {
        h += '<div class="report-section"><h4>Demand / Capacity Check (Biaxial)</h4>';
        h += '<table class="report-table dc-table">';
        h += '<tr><th>Load Case</th><th>Pu (kN)</th><th>Mux (kN-m)</th><th>Muy (kN-m)</th><th>Mn,demand</th><th>Mn,capacity</th><th>D/C</th><th>Status</th></tr>';
        combosCheck.forEach(function(lc) {
            var cls = lc.status === 'OK' ? 'status-pass' : 'status-fail';
            h += '<tr><td style="text-align:left">' + lc.name + '</td><td>' + lc.pu + '</td><td>' + lc.mux + '</td><td>' + lc.muy + '</td>';
            h += '<td>' + lc.demand_mn + '</td><td>' + lc.capacity_mn + '</td>';
            h += '<td class="' + cls + '">' + lc.dc_ratio + '</td><td class="' + cls + '" style="font-weight:700">' + lc.status + '</td></tr>';
        });
        h += '</table></div>';
    }
    document.getElementById('results-report').style.display = '';
    document.getElementById('results-report').innerHTML = h;
    if (window.MathJax) MathJax.typeset();
}

// ── Submit ──
document.getElementById('calc-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var f = this, isManual = f.rebar_mode.value === 'manual';
    var payload = { fc: parseFloat(f.fc.value), fy: parseFloat(f.fy.value), b: parseFloat(f.b.value), h: parseFloat(f.h.value), cover: parseFloat(f.cover.value), confinement: f.confinement.value };

    if (isManual) { payload.manual_bars = getManualBars(); payload.d_bar = 25; payload.n_bars = payload.manual_bars.length; }
    else { payload.n_bars = parseInt(f.n_bars.value); payload.d_bar = parseFloat(f.d_bar.value); payload.n_bars_side = parseInt(f.n_bars_side.value)||0; payload.nx = parseInt(f.nx.value)||0; payload.ny = parseInt(f.ny.value)||0; }

    var combos = getLoadCombos();

    // ── Biaxial P-M-M mode ──
    if (analysisMode === 'biaxial') {
        payload.n_angles = parseInt(f.n_angles.value) || 24;
        payload.n_c_values = parseInt(f.n_c_values.value) || 32;
        payload.contour_pu = parseFloat(f.contour_pu.value) || 0;
        if (combos.length > 0) payload.load_combos = combos;

        submitCalc('/api/column/biaxial', payload, function(result) {
            var combosCheck = result.load_combo_checks || [];
            var contours = result.contours || [];

            // Summary
            var s = '<div style="background:#dcfce7;padding:.6rem 1rem;border-radius:4px;font-weight:700;margin-bottom:.5rem;">';
            s += 'P<sub>o</sub> = ' + result.pure_compression_kn + ' kN | ';
            s += '\u03c6P<sub>n,max</sub> = ' + result.phi_pn_max_kn + ' kN | ';
            s += 'P<sub>t</sub> = ' + result.pure_tension_kn + ' kN</div>';
            s += '<p style="font-size:.82rem;color:var(--gray-500);">' + result.surface_points.length + ' surface points (' + result.n_angles + ' angles \u00d7 ' + result.n_c_values + ' depths)</p>';
            document.getElementById('results-summary-biaxial').innerHTML = s;
            document.getElementById('results-summary-biaxial').style.display = '';

            // Show 3D, hide 2D
            document.getElementById('chart-pm').style.display = 'none';
            document.getElementById('chart-3d').style.display = '';
            document.getElementById('results-title').textContent = 'P-M-M Interaction Surface';
            render3DChart(result.surface_points, combosCheck);

            // Multi-contour chart
            if (contours.length > 0) {
                document.getElementById('charts-row-biaxial').style.display = '';
                renderContourChart(contours, combosCheck, payload.contour_pu);
            }

            // SVG rebar
            document.getElementById('svg-rebar').innerHTML = result.svg_rebar || '';
            document.getElementById('results').style.display = '';

            // Fiber plot
            if (result.fiber_plot) renderFiberPlotCol(result.fiber_plot);

            renderBiaxialReport(result, payload, combosCheck);
        });
        return;
    }

    // ── Uniaxial P-M mode ──
    document.getElementById('chart-pm').style.display = '';
    document.getElementById('chart-3d').style.display = 'none';
    document.getElementById('charts-row-biaxial').style.display = 'none';
    document.getElementById('results-summary-biaxial').style.display = 'none';
    document.getElementById('results-title').textContent = 'P-M Interaction Diagram';

    if (combos.length > 0) {
        payload.load_combos = combos;
        var crit = combos.reduce(function(p,c){ return Math.abs(c.mu)>Math.abs(p.mu)?c:p; });
        payload.pu_demand = crit.pu; payload.mu_demand = Math.abs(crit.mu);
    }

    submitCalc('/api/column/interaction', payload, function(result) {
        // ── Plotly.js Interaction Diagram ──
        renderPlotlyChart(result.points, result.load_combo_checks || [], payload);
        document.getElementById('svg-rebar').innerHTML = result.svg_rebar || '';

        var r = result;
        var h = '';

        // ── Materials & Design Code ──
        h += '<div class="report-section"><h4>Materials & Design Code</h4>';
        h += '<div class="report-2col"><div>';
        h += '<dl class="report-grid">';
        h += '<dt>Concrete f\'c</dt><dd>' + payload.fc + ' MPa</dd>';
        h += '<dt>Steel fy</dt><dd>' + payload.fy + ' MPa</dd>';
        h += '<dt>Es</dt><dd>200,000 MPa</dd>';
        h += '<dt>Ultimate strain &epsilon;cu</dt><dd>0.003</dd>';
        h += '</dl></div><div>';
        h += '<dl class="report-grid">';
        h += '<dt>Design Code</dt><dd>ACI 318-19</dd>';
        h += '<dt>Confinement</dt><dd>' + r.confinement + '</dd>';
        var phi_c = r.confinement === 'spiral' ? '0.75' : '0.65';
        h += '<dt>&phi;c</dt><dd>' + phi_c + '</dd>';
        h += '<dt>&phi;b</dt><dd>0.90</dd>';
        h += '<dt>&beta;1</dt><dd>' + r.beta1 + '</dd>';
        h += '</dl></div></div></div>';

        // ── Section Properties ──
        h += '<div class="report-section"><h4>Section Properties</h4>';
        h += '<div class="report-2col"><div>';
        h += '<dl class="report-grid">';
        h += '<dt>Shape</dt><dd>Rectangular</dd>';
        h += '<dt>Width, b</dt><dd>' + payload.b + ' mm</dd>';
        h += '<dt>Height, h</dt><dd>' + payload.h + ' mm</dd>';
        h += '<dt>Cover</dt><dd>' + payload.cover + ' mm</dd>';
        h += '</dl></div><div>';
        h += '<dl class="report-grid">';
        h += '<dt>Ag</dt><dd>' + Number(r.ag).toLocaleString() + ' mm&sup2;</dd>';
        h += '<dt>Ig</dt><dd>' + Number(r.ig).toLocaleString() + ' mm&sup4;</dd>';
        h += '<dt>d<sub>eff</sub></dt><dd>' + r.d_eff + ' mm</dd>';
        h += '<dt>d\'</dt><dd>' + r.d_prime + ' mm</dd>';
        h += '</dl></div></div></div>';

        // ── Reinforcing Layout ──
        h += '<div class="report-section"><h4>Reinforcing Layout</h4>';
        h += '<div class="report-2col"><div>';
        h += '<dl class="report-grid">';
        h += '<dt>Total Bars</dt><dd>' + r.n_bars_actual + '</dd>';
        h += '<dt>Ast</dt><dd>' + r.ast_total + ' mm&sup2;</dd>';
        h += '<dt>&rho;</dt><dd>' + r.rho + '</dd>';
        h += '</dl></div><div>';
        h += '<table class="report-table"><tr><th>#</th><th>As (mm&sup2;)</th><th>ds (mm)</th></tr>';
        for (var i = 0; i < r.bar_depths.length; i++) {
            h += '<tr><td>' + (i+1) + '</td><td>' + (r.bar_areas ? r.bar_areas[i] : '—') + '</td><td>' + r.bar_depths[i] + '</td></tr>';
        }
        h += '</table></div></div></div>';

        // ── Axial Capacity ──
        h += '<div class="report-section"><h4>Axial Capacity Calculations</h4>';
        h += '<div class="report-eq">\\[ P_o = 0.85\\,f\'_c\\,(A_g - A_{st}) + f_y\\,A_{st} = ' + r.pure_compression_kn + ' \\text{ kN} \\quad \\text{(Compression)} \\]</div>';
        h += '<div class="report-eq">\\[ \\phi P_{u,max} = k_1\\,\\phi\\,[0.85\\,f\'_c\\,(b\\,h - A_s) + f_y\\,A_s] = ' + r.phi_pn_max_kn + ' \\text{ kN} \\]</div>';
        h += '<div class="report-eq">\\[ \\phi P_{u,min} = \\phi\\,(f_y\\,\\Sigma A_s) = ' + r.pure_tension_kn + ' \\text{ kN} \\quad \\text{(Tension)} \\]</div>';
        h += '</div>';

        // ── Balanced Point & Steel Forces ──
        if (r.balanced_point) {
            h += '<div class="report-section"><h4>Balanced Condition</h4>';
            h += '<div class="report-2col"><div>';
            h += '<dl class="report-grid">';
            h += '<dt>c<sub>b</sub></dt><dd>' + r.balanced_point.c + ' mm</dd>';
            h += '<dt>a<sub>b</sub></dt><dd>' + r.balanced_point.a + ' mm</dd>';
            h += '<dt>&phi;</dt><dd>' + r.balanced_point.phi + '</dd>';
            h += '<dt>Classification</dt><dd>' + r.balanced_point.classification + '</dd>';
            h += '<dt>&epsilon;<sub>t</sub></dt><dd>' + r.balanced_point.es_tension + '</dd>';
            h += '</dl>';
            h += '<dl class="report-grid" style="margin-top:.5rem;border-top:1px solid var(--gray-200);padding-top:.5rem;">';
            h += '<dt>&phi;Pn</dt><dd><b>' + r.balanced_point.pu + ' kN</b></dd>';
            h += '<dt>&phi;Mn</dt><dd><b>' + r.balanced_point.mu + ' kN-m</b></dd>';
            if (r.balanced_point.cc_kn) {
                h += '<dt>Cc = 0.85f\'c&middot;a&middot;b</dt><dd>' + r.balanced_point.cc_kn + ' kN</dd>';
                h += '<dt>&Sigma;Fs</dt><dd>' + r.balanced_point.fs_total_kn + ' kN</dd>';
            }
            h += '</dl></div>';

            if (r.balanced_steel_detail) {
                h += '<div><p style="font-size:.8rem;font-weight:600;margin-bottom:.3rem;">Steel Forces at Balanced Point</p>';
                h += '<table class="report-table">';
                h += '<tr><th>#</th><th>As (mm&sup2;)</th><th>ds (mm)</th><th>&epsilon;s</th><th>fs (MPa)</th><th>Force (kN)</th></tr>';
                r.balanced_steel_detail.forEach(function(bar) {
                    var strainColor = bar.strain >= 0 ? '#1e40af' : '#dc2626';
                    h += '<tr><td>' + bar.bar + '</td><td>' + bar.as_mm2 + '</td><td>' + bar.ds_mm + '</td>';
                    h += '<td style="color:' + strainColor + '">' + bar.strain.toFixed(6) + '</td>';
                    h += '<td>' + bar.fs_mpa.toFixed(1) + '</td><td>' + bar.force_kn.toFixed(2) + '</td></tr>';
                });
                h += '</table></div>';
            }
            h += '</div></div>';
        }

        // ── Maximum Moment ──
        if (r.max_moment_point) {
            h += '<div class="report-section"><h4>Maximum Moment Point</h4>';
            h += '<dl class="report-grid" style="max-width:400px;">';
            h += '<dt>&phi;M<sub>n,max</sub></dt><dd><b>' + r.max_moment_point.mu + ' kN-m</b></dd>';
            h += '<dt>at &phi;Pn</dt><dd>' + r.max_moment_point.pu + ' kN</dd>';
            h += '<dt>c</dt><dd>' + r.max_moment_point.c + ' mm</dd>';
            h += '<dt>&phi;</dt><dd>' + r.max_moment_point.phi + '</dd>';
            h += '</dl></div>';
        }

        // ── Demand / Capacity ──
        if (r.load_combo_checks && r.load_combo_checks.length > 0) {
            h += '<div class="report-section"><h4>Demand / Capacity Check</h4>';
            h += '<table class="report-table dc-table">';
            h += '<tr><th>Load Combination</th><th>Pu (kN)</th><th>Mu (kN-m)</th><th>&phi;Mn (kN-m)</th><th>D/C Ratio</th><th>Status</th></tr>';
            r.load_combo_checks.forEach(function(lc) {
                var cls = lc.status === 'OK' ? 'status-pass' : 'status-fail';
                h += '<tr><td style="text-align:left">' + lc.name + '</td><td>' + lc.pu.toFixed(1) + '</td><td>' + lc.mu.toFixed(1) + '</td>';
                h += '<td>' + lc.phi_mn_capacity.toFixed(1) + '</td><td>' + lc.dc_ratio.toFixed(4) + '</td>';
                h += '<td class="' + cls + '" style="font-weight:700">' + lc.status + '</td></tr>';
            });
            h += '</table></div>';
        } else if (r.demand_check) {
            var dc = r.demand_check;
            h += '<div class="report-section"><h4>Demand / Capacity Check</h4>';
            h += '<dl class="report-grid" style="max-width:400px;">';
            h += '<dt>Pu</dt><dd>' + payload.pu_demand + ' kN</dd>';
            h += '<dt>Mu</dt><dd>' + payload.mu_demand + ' kN-m</dd>';
            h += '<dt>&phi;Mn capacity</dt><dd>' + dc.phi_mn_capacity + ' kN-m</dd>';
            h += '<dt>D/C Ratio</dt><dd>' + dc.dc_ratio + '</dd>';
            var cls = dc.status === 'OK' ? 'status-pass' : 'status-fail';
            h += '<dt>Status</dt><dd class="' + cls + '">' + dc.status + '</dd>';
            h += '</dl></div>';
        }

        var reportDiv = document.getElementById('results-report');
        reportDiv.style.display = '';
        reportDiv.innerHTML = h;
        if (window.MathJax) MathJax.typeset();
    });
});
</script>
{% endblock %}