const fetchInterval = 500;

// Configuration constants
const MEAN = 0;
const WARNING_LIMIT = 2000;
const ERROR_LIMIT = 3000;
const TARGET_VALUE = 0;

// State
let chart;
let isAcquiring = false;
let currentMode = 'live';
let activeSessionData = [];
let history = [];
let currentPage = 1;
let fullDataPage = 1;

// DOM Elements
const startBtn = document.getElementById('startBtn');
const progressBar = document.getElementById('progressBar');
const progressContainer = document.getElementById('progressContainer');
const timerDisplay = document.getElementById('timerDisplay');
const tableBody = document.getElementById('measurementsTable');
const detailPlaceholder = document.getElementById('detailPlaceholder');
const detailContent = document.getElementById('detailContent');
const fullDataTableBody = document.getElementById('fullDataTableBody');
const historyTableBody = document.getElementById('historyTableBody');
const pageInfo = document.getElementById('pageInfo');
const prevBtn = document.getElementById('prevPage');
const nextBtn = document.getElementById('nextPage');
const fullPrevBtn = document.getElementById('fullPrevPage');
const fullNextBtn = document.getElementById('fullNextPage');
const liveDataContainer = document.getElementById('liveDataContainer');
const historyDetailContainer = document.getElementById('historyDetailContainer');
const selectedData = document.getElementById('selectedData');
const plcIpDisplay = document.getElementById('plcIpDisplay');
const connStatusDot = document.getElementById('connStatusDot');
const latencyList = document.getElementById('latencyList');
const acquisitionStatusList = document.getElementById('acquisitionStatusList');

// Initialize Chart.js
function initChart() {
    const ctx = document.getElementById('liveChart').getContext('2d');
    chart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [
                { label: 'Value (mm)', data: [], borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true, pointRadius: 0, borderWidth: 2, tension: 0 },
                { label: 'Warning UCL', data: [], borderColor: '#facc15', borderWidth: 1, pointRadius: 0, fill: false, borderDash: [5, 5] },
                { label: 'Warning LCL', data: [], borderColor: '#facc15', borderWidth: 1, pointRadius: 0, fill: false, borderDash: [5, 5] },
                { label: 'Error UCL', data: [], borderColor: '#f87171', borderWidth: 1, pointRadius: 0, fill: false, borderDash: [5, 5] },
                { label: 'Error LCL', data: [], borderColor: '#f87171', borderWidth: 1, pointRadius: 0, fill: false, borderDash: [5, 5] },
                { label: 'Target Value', data: [], borderColor: '#22c55e', borderWidth: 1.5, pointRadius: 0, fill: false, tension: 0 }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { 
                x: { type: 'linear', min: 0, max: 10000, title: { display: true, text: 'Position (mm)' } },
                y: { min: -3000, max: 3000 }
            },
            animation: false
        }
    });
}

// Fetch data from Flask and update UI
async function updateData() {
    try {
        const response = await fetch('/data');
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const data = await response.json();

        if (data) {
            // Update Connectivity Status
            if (data.connected !== undefined) {
                connStatusDot.className = data.connected 
                    ? 'w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse' 
                    : 'w-2 h-2 bg-red-600 rounded-full mr-2';
                plcIpDisplay.textContent = data.plc_ip || "Disconnected";
            }

            if (data.db100 && data.db100.duration !== undefined) {
                latencyList.textContent = `Latency: ${data.db100.duration.toFixed(2)}ms`;
            }

            // Update acquisition status text
            if (data.acq_status !== undefined) {
                acquisitionStatusList.textContent = `• Mode: ${data.acq_status}`;
                if (data.acq_status === "Acquisition") {
                    acquisitionStatusList.parentElement.classList.replace('text-gray-600', 'text-blue-400');
                } else {
                    acquisitionStatusList.parentElement.classList.replace('text-blue-400', 'text-gray-600');
                }
            }

            // Handle Live Chart Update
            if (data.db901 && data.db901.params) {
                const acq = data.db901.params.acquisizione;
                const fine = data.db901.params.fine_acq;
                const pronti = data.db901.params.pronti;

                // Prendi i limiti dinamici (ucl, lcl, target) dal JSON della risposta API
                const limits = data.limits || { ucl: 212, lcl: 208, target: 0 };

                if (acq && !fine) {
                    acquisitionStatusList.textContent = `• Mode: Acquisition`;
                    acquisitionStatusList.parentElement.classList.replace('text-gray-600', 'text-blue-400');

                    if (data.db901.params.x_val !== undefined && data.db901.params.y_val !== undefined) {
                        const x = data.db901.params.x_val;
                        const y = data.db901.params.y_val;

                        chart.data.datasets[0].data.push({ x, y });
                        chart.data.datasets[1].data.push({ x, y: limits.ucl });
                        chart.data.datasets[2].data.push({ x, y: limits.lcl });
                        chart.data.datasets[3].data.push({ x, y: limits.ucl });
                        chart.data.datasets[4].data.push({ x, y: limits.lcl });
                        chart.data.datasets[5].data.push({ x, y: limits.target });

                        if (chart.data.datasets[0].data.length > 100) {
                            chart.data.datasets.forEach(ds => ds.data.shift());
                        }
                        chart.update('none');
                    }
                } else if (fine && pronti) {
                    acquisitionStatusList.textContent = `• Mode: Finished`;
                    acquisitionStatusList.parentElement.classList.replace('text-blue-400', 'text-green-600');

                    if (data.db900 && data.db900.misure && data.db900.misure.length > 0) {
                        activeSessionData = data.db900.misure.map(m => ({
                            x: m.x,
                            y: m.y,
                            ts: m.ts || new Date()
                        }));

                        chart.data.datasets.forEach(ds => ds.data = []);
                        activeSessionData.forEach(p => {
                            chart.data.datasets[0].data.push({ x: p.x, y: p.y });
                            chart.data.datasets[1].data.push({ x: p.x, y: limits.ucl });
                            chart.data.datasets[2].data.push({ x: p.x, y: limits.lcl });
                            chart.data.datasets[3].data.push({ x: p.x, y: limits.ucl });
                            chart.data.datasets[4].data.push({ x: p.x, y: limits.lcl });
                            chart.data.datasets[5].data.push({ x: p.x, y: limits.target });
                        });

                        chart.update();
                        // Mostra dashboard dettagli...
                    }
                } else {
                    acquisitionStatusList.textContent = `• Mode: Polling (5Hz)`;
                    acquisitionStatusList.parentElement.classList.replace('text-blue-400', 'text-gray-600');
                }
            }
            // if (data.db901 && data.db901.params) {
            //     const x = data.db901.params.x;
            //     const y = data.db901.params.y;

            //     if (data.acq_status === "Acquisition") {
            //         if (x !== undefined && y !== undefined) {
            //             activeSessionData.push({x, y, ts: new Date()});
                        
            //             chart.data.datasets[0].data.push({x, y});
            //             chart.data.datasets[1].data.push({x, y: MEAN + WARNING_LIMIT});
            //             chart.data.datasets[2].data.push({x, y: MEAN - WARNING_LIMIT});
            //             chart.data.datasets[3].data.push({x, y: MEAN + ERROR_LIMIT});
            //             chart.data.datasets[4].data.push({x, y: MEAN - ERROR_LIMIT});
            //             chart.data.datasets[5].data.push({x, y: TARGET_VALUE});

            //             if (chart.data.datasets[0].data.length > 100) {
            //                 chart.data.datasets.forEach(ds => ds.data.shift());
            //             }
            //             chart.update();
            //         }
            //     } else if (data.acq_status === "Finished") {
            //         if (data.measurements && data.measurements.length > 0) {
            //             activeSessionData = data.measurements.map(m => ({
            //                 x: m.x,
            //                 y: m.y,
            //                 ts: m.ts || new Date()
            //             }));
                        
            //             // Clear chart and load all measurements
            //             chart.data.datasets.forEach(ds => ds.data = []);
            //             activeSessionData.forEach(p => {
            //                 chart.data.datasets[0].data.push({x: p.x, y: p.y});
            //                 chart.data.datasets[1].data.push({x: p.x, y: MEAN + WARNING_LIMIT});
            //                 chart.data.datasets[2].data.push({x: p.x, y: MEAN - WARNING_LIMIT});
            //                 chart.data.datasets[3].data.push({x: p.x, y: MEAN + ERROR_LIMIT});
            //                 chart.data.datasets[4].data.push({x: p.x, y: MEAN - ERROR_LIMIT});
            //                 chart.data.datasets[5].data.push({x: p.x, y: TARGET_VALUE});
            //             });
            //             chart.update();

            //             liveDataContainer.classList.remove('hidden');
            //             historyDetailContainer.classList.add('hidden');
            //             detailPlaceholder.classList.add('hidden');
            //             detailContent.classList.remove('hidden');
            //             renderFullSessionTable();
            //         }
            //     }
            // }
        }
    } catch (err) {
        console.error("Error updating data:", err);
    }
}

// Fetch history
async function fetchHistory() {
    try {
        const response = await fetch('/history');
        if (response.ok) {
            history = await response.json();
            renderHistoryTable();
        }
    } catch (err) {
        console.error("Error fetching history:", err);
    }
}

function renderHistoryTable() {
    historyTableBody.innerHTML = '';
    if (history.length === 0) {
        historyTableBody.innerHTML = '<tr><td colspan="4" class="p-2 text-center text-gray-400">No sessions recorded</td></tr>';
        return;
    }

    const start = (currentPage - 1) * 10;
    const end = start + 10;
    const pageData = history.slice(start, end);

    pageData.forEach((item, i) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="p-2 border-b">${item.filename}</td>
            <td class="p-2 border-b">${item.articolo} / ${item.cod_produzione}</td>
            <td class="p-2 border-b">${new Date().toLocaleDateString()}</td>
            <td class="p-2 border-b">
                <button class="bg-blue-600 text-white px-2 py-1 rounded text-[10px] hover:bg-blue-700">View</button>
            </td>
        `;
        row.onclick = () => loadHistoryFile(item.file_path);
        historyTableBody.appendChild(row);
    });

    pageInfo.innerText = `Page ${currentPage} of ${Math.ceil(history.length / 10)}`;
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = currentPage * 10 >= history.length;
}

async function loadHistoryFile(filePath) {
    try {
        const response = await fetch(`/history/${filePath}`);
        if (response.ok) {
            const data = await response.json();
            activeSessionData = data.misure.map(m => ({
                x: m.x,
                y: m.y,
                ts: m.ts || new Date()
            }));

            // Update chart
            chart.data.datasets.forEach(ds => ds.data = []);
            activeSessionData.forEach(p => {
                chart.data.datasets[0].data.push({x: p.x, y: p.y});
                chart.data.datasets[1].data.push({x: p.x, y: MEAN + WARNING_LIMIT});
                chart.data.datasets[2].data.push({x: p.x, y: MEAN - WARNING_LIMIT});
                chart.data.datasets[3].data.push({x: p.x, y: MEAN + ERROR_LIMIT});
                chart.data.datasets[4].data.push({x: p.x, y: MEAN - ERROR_LIMIT});
                chart.data.datasets[5].data.push({x: p.x, y: TARGET_VALUE});
            });
            chart.update();

            liveDataContainer.classList.remove('hidden');
            historyDetailContainer.classList.remove('hidden');
            detailPlaceholder.classList.add('hidden');
            detailContent.classList.remove('hidden');

            renderFullSessionTable();
            
            selectedData.innerText = `Session Loaded: ${data.articolo} | ${data.cod_produzione} | ${data.num_certificato}`;
        }
    } catch (err) {
        console.error("Error loading history file:", err);
    }
}

function renderFullSessionTable() {
    fullDataTableBody.innerHTML = '';
    if (activeSessionData.length === 0) return;

    const start = (fullDataPage - 1) * 50;
    const end = start + 50;
    const pageData = activeSessionData.slice(start, end);

    pageData.forEach((p, i) => {
        const row = document.createElement('tr');
        const diff = Math.abs(p.y - MEAN);
        let status = 'OK';
        let colorClass = 'text-green-600 border-green-600';

        if (diff > ERROR_LIMIT) {
            status = 'ERROR';
            colorClass = 'text-red-600 border-red-600';
        } else if (diff > WARNING_LIMIT) {
            status = 'WARNING';
            colorClass = 'text-yellow-600 border-yellow-600';
        }

        row.innerHTML = `
            <td class="p-2 border-b">${start + i + 1}</td>
            <td class="p-2 border-b">${p.ts.toLocaleTimeString()}</td>
            <td class="p-2 border-b font-mono">${p.y.toFixed(2)}</td>
            <td class="p-2 border-b">
                <span class="px-1 py-0.5 bg-white rounded-full text-[9px] font-bold border ${colorClass}">${status}</span>
            </td>
        `;
        fullDataTableBody.appendChild(row);
    });

    fullPageInfo.innerText = `Page ${fullDataPage} of ${Math.ceil(activeSessionData.length / 50)}`;
    fullPrevBtn.disabled = fullDataPage === 1;
    fullNextBtn.disabled = fullDataPage * 50 >= activeSessionData.length;
}

// Event Listeners
startBtn.onclick = () => {
    if (isAcquiring) return;
    isAcquiring = true;
    startBtn.disabled = true;
    startBtn.classList.replace('bg-green-600', 'bg-gray-400');
    progressContainer.classList.remove('hidden');
    
    activeSessionData = [];
    currentMode = 'live';
    toggleDetailVisibility();
    
    let currentStep = 0;
    let timerInterval = setInterval(() => {
        const point = {
            ts: new Date(),
            val: generateNormal(MEAN, 1),
            x: (currentStep / 500) * 500
        };
        activeSessionData.push(point);
        
        // Update Chart data
        chart.data.datasets[0].data.push({x: point.x, y: point.val});
        chart.data.datasets[1].data.push({x: point.x, y: MEAN + WARNING_LIMIT});
        chart.data.datasets[2].data.push({x: point.x, y: MEAN - WARNING_LIMIT});
        chart.data.datasets[3].data.push({x: point.x, y: MEAN + ERROR_LIMIT});
        chart.data.datasets[4].data.push({x: point.x, y: MEAN - ERROR_LIMIT});
        chart.data.datasets[5].data.push({x: point.x, y: TARGET_VALUE});

        if (chart.data.datasets[0].data.length > 100) {
            chart.data.datasets.forEach(ds => ds.data.shift());
        }
        chart.update();

        if (currentStep % 3 === 0) {
            updateTable();
        }

        currentStep++;
        const progress = (currentStep / 500) * 100;
        progressBar.style.width = `${progress}%`;
        timerDisplay.innerText = `Time Remaining: ${Math.max(0, Math.ceil((500 - currentStep) / 5))}s`;

        if (currentStep >= 500) {
            clearInterval(timerInterval);
            completeAcquisition();
        }
    }, 1000 / 5);
};

function completeAcquisition() {
    isAcquiring = false;
    startBtn.disabled = false;
    startBtn.classList.replace('bg-gray-400', 'bg-green-600');
    timerDisplay.innerText = "Acquisition Complete";
    timerDisplay.classList.replace('text-blue-600', 'text-green-600');

    activeSessionData = [...dataPoints].sort((a, b) => b.ts - a.ts);
    
    liveDataContainer.classList.remove('hidden');
    historyDetailContainer.classList.add('hidden');
    detailPlaceholder.classList.add('hidden');
    detailContent.classList.remove('hidden');
    renderFullSessionTable();
}

function updateTable() {
    if (tableBody.innerHTML === '') {
        tableBody.innerHTML = '<tr><td colspan="4" class="p-2 text-center text-gray-400">Initializing...</td></tr>';
    }
    // This is a simplified update for the simulation mode
}

function toggleDetailVisibility() {
    if (isAcquiring || currentMode === 'history') {
        liveDataContainer.classList.remove('hidden');
        historyDetailContainer.classList.add('hidden');
        if (isAcquiring) {
            activeSessionData = [...dataPoints];
            renderFullSessionTable();
        }
    } else {
        liveDataContainer.classList.add('hidden');
        historyDetailContainer.classList.add('hidden');
        detailPlaceholder.classList.remove('hidden');
    }
}

// Helper functions
function generateNormal(mean, stdDev) {
    let u = 0, v = 0;
    while (u === 0) u = Math.random();
    while (v === 0) v = Math.random();
    return mean + stdDev * (Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v));
}

const TOTAL_SAMPLES = 500;
const SAMPLE_RATE = 5;
const itemsPerPage = 50;

// Initialization
initChart();
fetchHistory();
setInterval(updateData, fetchInterval);
updateData();

// Pagination Listeners
prevBtn.onclick = () => { if (currentPage > 1) { currentPage--; renderHistoryTable(); } };
nextBtn.onclick = () => { if (currentPage * 10 < history.length) { currentPage++; renderHistoryTable(); } };
fullPrevBtn.onclick = () => { if (fullDataPage > 1) { fullDataPage--; renderFullSessionTable(); } };
fullNextBtn.onclick = () => { if (fullDataPage * itemsPerPage < activeSessionData.length) { fullDataPage++; renderFullSessionTable(); } };