{% extends "base.html" %}

{% block title %}Combined Report Preview - {{ project.name }}{% endblock %}

{% block content %}
<!-- jspreadsheet CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce@4/dist/jspreadsheet.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites@5/dist/jsuites.min.css" />

<div class="min-h-screen bg-gray-100 dark:bg-slate-900">
    <!-- Header -->
    <div class="bg-white dark:bg-slate-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Combined Report Preview & Editor</h1>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        {{ location_data|length }} location{{ 's' if location_data|length != 1 else '' }}
                        {% if time_filter_desc %} | {{ time_filter_desc }}{% endif %}
                        | {{ total_rows }} total row{{ 's' if total_rows != 1 else '' }}
                    </p>
                </div>
                <div class="flex items-center gap-3">
                    <button onclick="downloadCombinedReport()" id="download-btn"
                            class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors flex items-center gap-2 text-sm font-medium">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                        Generate Reports (ZIP)
                    </button>
                    <a href="/api/projects/{{ project_id }}/combined-report-wizard"
                       class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
                        ← Back to Config
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">

        <!-- Report Metadata -->
        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Report Title</label>
                    <input type="text" id="edit-report-title" value="{{ report_title }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Project Name</label>
                    <input type="text" id="edit-project-name" value="{{ project_name }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Client Name</label>
                    <input type="text" id="edit-client-name" value="{{ client_name }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm">
                </div>
            </div>
        </div>

        <!-- Location Tabs + Spreadsheet -->
        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">

            <!-- Tab Bar -->
            <div class="border-b border-gray-200 dark:border-gray-700 overflow-x-auto">
                <div class="flex min-w-max" id="tab-bar">
                    {% for loc in location_data %}
                    <button onclick="switchTab({{ loop.index0 }})"
                            id="tab-btn-{{ loop.index0 }}"
                            class="tab-btn px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
                                   {% if loop.first %}border-emerald-500 text-emerald-600 dark:text-emerald-400
                                   {% else %}border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300{% endif %}">
                        {{ loc.location_name }}
                        <span class="ml-1.5 text-xs px-1.5 py-0.5 rounded-full
                                     {% if loop.first %}bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400
                                     {% else %}bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400{% endif %}"
                              id="tab-count-{{ loop.index0 }}">
                            {{ loc.filtered_count }}
                        </span>
                    </button>
                    {% endfor %}
                </div>
            </div>

            <!-- Spreadsheet Panels -->
            <div class="p-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white" id="active-tab-title">
                        {{ location_data[0].location_name if location_data else '' }}
                    </h3>
                    <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                        <span>Right-click for options</span>
                        <span class="text-gray-300 dark:text-gray-600">|</span>
                        <span>Double-click to edit</span>
                    </div>
                </div>

                {% for loc in location_data %}
                <div id="panel-{{ loop.index0 }}" class="tab-panel {% if not loop.first %}hidden{% endif %} overflow-x-auto">
                    <div id="spreadsheet-{{ loop.index0 }}"></div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Help -->
        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">Editing Tips</h3>
            <ul class="text-sm text-blue-700 dark:text-blue-400 list-disc list-inside space-y-1">
                <li>Double-click any cell to edit its value</li>
                <li>Use the Comments column to add notes about specific measurements</li>
                <li>Right-click a row to insert or delete rows</li>
                <li>Press Enter to confirm edits, Escape to cancel</li>
                <li>Switch between location tabs to edit each location's data independently</li>
            </ul>
        </div>

    </div>
</div>

<!-- jspreadsheet JS -->
<script src="https://cdn.jsdelivr.net/npm/jsuites@5/dist/jsuites.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce@4/dist/index.min.js"></script>

<script>
const allLocationData = {{ locations_json | safe }};
const spreadsheets = {};
let activeTabIdx = 0;

const columnDef = [
    { title: 'Test #', width: 80, type: 'numeric' },
    { title: 'Date', width: 110, type: 'text' },
    { title: 'Time', width: 90, type: 'text' },
    { title: 'LAmax (dBA)', width: 110, type: 'numeric' },
    { title: 'LA01 (dBA)', width: 110, type: 'numeric' },
    { title: 'LA10 (dBA)', width: 110, type: 'numeric' },
    { title: 'Comments', width: 250, type: 'text' },
];

const jssOptions = {
    columns: columnDef,
    allowInsertRow: true,
    allowDeleteRow: true,
    allowInsertColumn: false,
    allowDeleteColumn: false,
    rowDrag: true,
    columnSorting: true,
    search: true,
    pagination: 50,
    paginationOptions: [25, 50, 100, 200],
    defaultColWidth: 100,
    minDimensions: [7, 1],
    tableOverflow: true,
    tableWidth: '100%',
    contextMenu: function(instance, col, row, e) {
        const items = [];
        if (row !== null) {
            items.push({
                title: 'Insert row above',
                onclick: function() { instance.insertRow(1, row, true); }
            });
            items.push({
                title: 'Insert row below',
                onclick: function() { instance.insertRow(1, row + 1, false); }
            });
            items.push({
                title: 'Delete this row',
                onclick: function() { instance.deleteRow(row); }
            });
        }
        return items;
    },
    style: {
        A: 'text-align: center;',
        B: 'text-align: center;',
        C: 'text-align: center;',
        D: 'text-align: right;',
        E: 'text-align: right;',
        F: 'text-align: right;',
    }
};

document.addEventListener('DOMContentLoaded', function() {
    allLocationData.forEach(function(loc, idx) {
        const el = document.getElementById('spreadsheet-' + idx);
        if (!el) return;
        const opts = Object.assign({}, jssOptions, { data: loc.spreadsheet_data });
        spreadsheets[idx] = jspreadsheet(el, opts);
    });
    if (allLocationData.length > 0) {
        switchTab(0);
    }
});

function switchTab(idx) {
    activeTabIdx = idx;

    // Update panels
    document.querySelectorAll('.tab-panel').forEach(function(panel, i) {
        panel.classList.toggle('hidden', i !== idx);
    });

    // Update tab button styles
    document.querySelectorAll('.tab-btn').forEach(function(btn, i) {
        const countBadge = document.getElementById('tab-count-' + i);
        if (i === idx) {
            btn.classList.add('border-emerald-500', 'text-emerald-600', 'dark:text-emerald-400');
            btn.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
            if (countBadge) {
                countBadge.classList.add('bg-emerald-100', 'text-emerald-700', 'dark:bg-emerald-900/40', 'dark:text-emerald-400');
                countBadge.classList.remove('bg-gray-100', 'text-gray-500', 'dark:bg-gray-700', 'dark:text-gray-400');
            }
        } else {
            btn.classList.remove('border-emerald-500', 'text-emerald-600', 'dark:text-emerald-400');
            btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
            if (countBadge) {
                countBadge.classList.remove('bg-emerald-100', 'text-emerald-700', 'dark:bg-emerald-900/40', 'dark:text-emerald-400');
                countBadge.classList.add('bg-gray-100', 'text-gray-500', 'dark:bg-gray-700', 'dark:text-gray-400');
            }
        }
    });

    // Update title
    if (allLocationData[idx]) {
        document.getElementById('active-tab-title').textContent = allLocationData[idx].location_name;
    }

    // Refresh jspreadsheet rendering after showing panel
    if (spreadsheets[idx]) {
        try { spreadsheets[idx].updateTable(); } catch(e) {}
    }
}

async function downloadCombinedReport() {
    const btn = document.getElementById('download-btn');
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg> Generating ZIP...';

    try {
        const locations = allLocationData.map(function(loc, idx) {
            return {
                session_id:       loc.session_id       || '',
                session_label:    loc.session_label    || '',
                period_type:      loc.period_type      || '',
                started_at:       loc.started_at       || '',
                location_name:    loc.location_name,
                spreadsheet_data: spreadsheets[idx] ? spreadsheets[idx].getData() : loc.spreadsheet_data,
            };
        });

        const payload = {
            report_title: document.getElementById('edit-report-title').value || 'Background Noise Study',
            project_name: document.getElementById('edit-project-name').value || '',
            client_name: document.getElementById('edit-client-name').value || '',
            locations: locations,
        };

        const response = await fetch('/api/projects/{{ project_id }}/generate-combined-from-preview', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });

        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;

            const contentDisposition = response.headers.get('Content-Disposition');
            let filename = 'combined_reports.zip';
            if (contentDisposition) {
                const match = contentDisposition.match(/filename="(.+)"/);
                if (match) filename = match[1];
            }

            a.download = filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove();
        } else {
            const error = await response.json();
            alert('Error generating report: ' + (error.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('Error generating report: ' + error.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = originalText;
    }
}
</script>

<style>
/* Dark mode jspreadsheet styles */
.dark .jexcel { background-color: #1e293b; color: #e2e8f0; }
.dark .jexcel thead td { background-color: #334155 !important; color: #e2e8f0 !important; border-color: #475569 !important; }
.dark .jexcel tbody td { background-color: #1e293b; color: #e2e8f0; border-color: #475569; }
.dark .jexcel tbody td:hover { background-color: #334155; }
.dark .jexcel tbody tr:nth-child(even) td { background-color: #0f172a; }
.dark .jexcel_pagination { background-color: #1e293b; color: #e2e8f0; border-color: #475569; }
.dark .jexcel_pagination a { color: #e2e8f0; }
.dark .jexcel_search { background-color: #1e293b; color: #e2e8f0; border-color: #475569; }
.dark .jexcel_search input { background-color: #334155; color: #e2e8f0; border-color: #475569; }
.dark .jexcel_content { background-color: #1e293b; }
.dark .jexcel_contextmenu { background-color: #1e293b; border-color: #475569; }
.dark .jexcel_contextmenu a { color: #e2e8f0; }
.dark .jexcel_contextmenu a:hover { background-color: #334155; }
.jexcel_content { max-height: 600px; overflow: auto; }
</style>
{% endblock %}