@include('dashboards.header')

<style>
    body { background: #f5f7fb; }

    .graph-container {
        background: #fff;
        border-radius: 14px;
        padding: 25px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 30px;
        border: 1px solid #e8e8e8;
    }

    .graph-title {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        margin-bottom: 18px;
        padding-left: 8px;
        border-left: 4px solid #0d6efd;
    }

    .channel-heading {
        font-size: 22px;
        font-weight: 700;
        color: #444;
        margin: 25px 0 15px;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 8px;
    }

    canvas {
        width: 100% !important;
        height: 350px !important;
    }

    .filter-box {
        background: #fff;
        padding: 18px;
        border-radius: 12px;
        border: 1px solid #e5e5e5;
        box-shadow: 0 3px 10px rgba(0,0,0,0.06);
        margin-bottom: 25px;
    }

    .thd-box {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #333;
        background: #f8f9fa;
        padding: 8px 12px;
        border-radius: 8px;
        border-left: 4px solid #0d6efd;
    }

    .harmonic-card {
        border: 0;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 30px;
        overflow: hidden;
    }

    .harmonic-card .card-body {
        height: 390px;
    }
</style>

<div class="container mt-4">

    <h3 class="channel-heading">Date Filter</h3>

    <form method="GET" action="{{ url()->current() }}" class="filter-box">
        <div class="row align-items-end">
            <div class="col-md-4 mb-2">
                <label class="form-label fw-semibold">From Date</label>
                <input type="date" name="from_date" class="form-control"
                       value="{{ request('from_date', $fromDate->toDateString()) }}">
            </div>

            <div class="col-md-4 mb-2">
                <label class="form-label fw-semibold">To Date</label>
                <input type="date" name="to_date" class="form-control"
                       value="{{ request('to_date', $toDate->toDateString()) }}">
            </div>

            <div class="col-md-4 mb-2">
                <label class="form-label d-block fw-semibold text-transparent">Action</label>

                <div class="d-flex flex-wrap gap-2">
                    <button type="submit" class="btn btn-primary fw-semibold px-4">
                        <i class="fa fa-filter me-1"></i> Apply Filter
                    </button>

                    <a href="{{ url()->current() }}" class="btn btn-secondary fw-semibold px-4">
                        <i class="fa fa-refresh me-1"></i> Reset
                    </a>
                </div>
            </div>
                
        </div>
    </form>

    <h3 class="channel-heading">Latest Voltage & Current Graph</h3>

    <div class="row">
        <div class="col-md-6">
            <div class="graph-container">
                <div class="graph-title">Voltage Graph</div>
                <canvas id="voltageChart"></canvas>
            </div>
        </div>

        <div class="col-md-6">
            <div class="graph-container">
                <div class="graph-title">Current Graph</div>
                <canvas id="currentChart"></canvas>
            </div>
        </div>
    </div>

    <h3 class="channel-heading">Voltage THD Latest Graph</h3>

    <div class="graph-container">
        <div class="graph-title">
            Voltage THD Graph — {{ $fromDate->format('d M Y') }} to {{ $toDate->format('d M Y') }}
        </div>
        <canvas id="thdChart"></canvas>
    </div>

    <h3 class="channel-heading">Current THD Latest Graph</h3>

    <div class="graph-container">
        <div class="graph-title">
            Current THD Graph — {{ $fromDate->format('d M Y') }} to {{ $toDate->format('d M Y') }}
        </div>
        <canvas id="currentThdChart"></canvas>
    </div>

    @if($graph_data->isNotEmpty())
        @foreach($graph_data as $channelGroup => $groupSamples)

            <h3 class="channel-heading">Time Domain Graph — Group {{ $channelGroup }}</h3>

            <div class="graph-container">
                <div class="graph-title">Synthesized Voltage Cycle</div>
                <canvas id="vChart-{{ $channelGroup }}"></canvas>
            </div>

            <h3 class="channel-heading">Frequency Domain Graph — Group {{ $channelGroup }}</h3>

            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card harmonic-card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">Voltage Harmonic Spectrum</h5>
                            <small>V1, V2, V3 Harmonics</small>
                        </div>
                        <div class="card-body">
                            <div class="thd-box" id="vThdText-{{ $channelGroup }}">
                               Harmonic Ampiludes: loading...
                            </div>
                            <canvas id="vFreqChart-{{ $channelGroup }}"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card harmonic-card">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">Current Harmonic Spectrum</h5>
                            <small>I1, I2, I3 Harmonics</small>
                        </div>
                        <div class="card-body">
                            <div class="thd-box" id="iThdText-{{ $channelGroup }}">
                                Harmonic Ampiludes: loading...
                            </div>
                            <canvas id="iFreqChart-{{ $channelGroup }}"></canvas>
                        </div>
                    </div>
                </div>
            </div>

        @endforeach
    @else
        <div class="graph-container text-center">
            <h5>No Time Domain Record Found</h5>
        </div>
    @endif

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
const graphData = @json($graph_data1 ?? []);
const thdLabels = @json($thdLabels ?? []);

const thdA = @json($thdA ?? []);
const thdB = @json($thdB ?? []);
const thdC = @json($thdC ?? []);

const thdIA = @json($thdIA ?? []);
const thdIB = @json($thdIB ?? []);
const thdIC = @json($thdIC ?? []);

const allSamples = @json($graph_data ?? []);

const FUNDAMENTAL_FREQUENCY = 50;
const SAMPLE_RATE = 6400;
const MAX_HARMONIC_ORDER = 20;

const COLOR_MAP = {
    1: 'rgba(220, 53, 69, 1)',
    2: 'rgba(255, 193, 7, 1)',
    3: 'rgba(13, 110, 253, 1)'
};

const BG_MAP = {
     1: 'rgba(220, 53, 69, 1)',
    2: 'rgba(255, 193, 7, 1)',
    3: 'rgba(13, 110, 253, 1)'
};

const timestamps = graphData.map(item => item.stime);

const lineChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
        mode: 'index',
        intersect: false
    },
    plugins: {
        legend: {
            position: 'top'
        },
        tooltip: {
            mode: 'index',
            intersect: false,
            backgroundColor: '#ffffff',
            titleColor: '#000',
            bodyColor: '#000',
            borderColor: '#ddd',
            borderWidth: 1
        }
    },
    scales: {
        x: {
            ticks: {
                maxTicksLimit: 12,
                maxRotation: 45
            }
        },
        y: {
            beginAtZero: false
        }
    }
};

const waveformOptions = {
    responsive: true,
    maintainAspectRatio: false,
    interaction: {
        mode: 'index',
        intersect: false
    },
    plugins: {
        legend: {
            position: 'top'
        },
        tooltip: {
            mode: 'index',
            intersect: false,
            backgroundColor: '#ffffff',
            titleColor: '#000',
            bodyColor: '#000',
            borderColor: '#ddd',
            borderWidth: 1
        }
    },
    scales: {
        x: {
            ticks: {
                maxTicksLimit: 14,
                maxRotation: 0
            }
        },
        y: {
            beginAtZero: false
        }
    }
};

const barChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: true,
            position: 'top',
            labels: {
                usePointStyle: true,
                boxWidth: 10,
                font: {
                    size: 12,
                    weight: 'bold'
                }
            }
        },
        tooltip: {
            backgroundColor: '#ffffff',
            titleColor: '#000',
            bodyColor: '#000',
            borderColor: '#ddd',
            borderWidth: 1,
            padding: 10,
            callbacks: {
                label: function(context) {
                    const value = Number(context.raw || 0).toFixed(2);
                    return `${context.dataset.label}: ${value}`;
                }
            }
        }
    },
    scales: {
        x: {
            title: {
                display: true,
                text: 'Harmonic Order',
                font: {
                    weight: 'bold'
                }
            },
            grid: {
                display: false
            },
            ticks: {
                maxRotation: 45,
                minRotation: 0
            }
        },
        y: {
            beginAtZero: true,
            title: {
                display: true,
                text: 'Magnitude',
                font: {
                    weight: 'bold'
                }
            },
            grid: {
                color: 'rgba(0,0,0,0.08)'
            }
        }
    }
};

function toNumberArray(arr) {
    if (!Array.isArray(arr)) return [];
    return arr.map(v => Number(v)).filter(v => Number.isFinite(v));
}

function removeDcOffset(samples) {
    if (!samples.length) return [];
    const avg = samples.reduce((a, b) => a + b, 0) / samples.length;
    return samples.map(v => v - avg);
}

function extractFullCycle(inputData) {
    const ZERO_THRESHOLD = 20;
    let startIndex = -1;
    let endIndex = -1;
    let state = 'SEARCHING_FOR_START';

    const data = toNumberArray(inputData);

    for (let i = 1; i < data.length; i++) {
        const prev = data[i - 1];
        const curr = data[i];

        if (state === 'SEARCHING_FOR_START' && prev < ZERO_THRESHOLD && curr >= ZERO_THRESHOLD) {
            startIndex = i;
            state = 'SEARCHING_FOR_END';
        } else if (state === 'SEARCHING_FOR_END' && prev >= ZERO_THRESHOLD && curr < ZERO_THRESHOLD) {
            endIndex = i;
            break;
        }
    }

    if (startIndex === -1 || endIndex === -1 || startIndex >= endIndex) {
        return null;
    }

    const positiveLobe = data.slice(startIndex, endIndex);
    const negativeLobe = positiveLobe.map(v => -v);
    const fullCycleData = positiveLobe.concat(negativeLobe);

    const fullCycleLabels = Array.from({ length: fullCycleData.length }, (_, i) => i + 1);

    return {
        cycleData: fullCycleData,
        labels: fullCycleLabels
    };
}
// function extractFullCycle(inputData) {
//     const ZERO_THRESHOLD = 20;
//     let startIndex = -1;
//     let midIndex = -1;
//     let endIndex = -1;
//     let state = 'SEARCHING_FOR_START';

//     const data = toNumberArray(inputData);

//     for (let i = 1; i < data.length; i++) {
//         const prev = data[i - 1];
//         const curr = data[i];

//         if (state === 'SEARCHING_FOR_START' && prev < ZERO_THRESHOLD && curr >= ZERO_THRESHOLD) {
//             startIndex = i;
//             state = 'SEARCHING_FOR_MID';
//         } else if (state === 'SEARCHING_FOR_MID' && prev >= ZERO_THRESHOLD && curr < ZERO_THRESHOLD) {
//             midIndex = i;
//             state = 'SEARCHING_FOR_END';
//         } else if (state === 'SEARCHING_FOR_END' && prev < ZERO_THRESHOLD && curr >= ZERO_THRESHOLD) {
//             endIndex = i;
//             break;
//         }
//     }

//     if (startIndex === -1 || midIndex === -1 || endIndex === -1) {
//         return null;
//     }

//     // Use the REAL full cycle (positive lobe + real negative lobe), not a mirrored fake
//     const fullCycleData = data.slice(startIndex, endIndex);
//     const fullCycleLabels = Array.from({ length: fullCycleData.length }, (_, i) => i + 1);

//     return {
//         cycleData: fullCycleData,
//         labels: fullCycleLabels
//     };
// }


function getFixedWindow(samples) {
    const clean = toNumberArray(samples);

    if (clean.length < 32) return clean;

    const preferredSizes = [1024, 512, 256, 128, 64];

    for (let size of preferredSizes) {
        if (clean.length >= size) {
            return clean.slice(clean.length - size);
        }
    }

    return clean;
}

function dft(samples, sampleRate) {
    const x = removeDcOffset(samples);
    const N = x.length;

    let frequencies = [];
    let amplitudes = [];

    if (N === 0) {
        return { frequencies, amplitudes };
    }

    const halfN = Math.floor(N / 2);

    for (let k = 0; k <= halfN; k++) {
        let re = 0;
        let im = 0;

        for (let n = 0; n < N; n++) {
            const angle = (2 * Math.PI * k * n) / N;
            re += x[n] * Math.cos(angle);
            im -= x[n] * Math.sin(angle);
        }

        let magnitude = Math.sqrt(re * re + im * im);
        let amplitude = (2 * magnitude) / N;

        if (k === 0) {
            amplitude = magnitude / N;
        }

        frequencies.push((k * sampleRate) / N);
        amplitudes.push(amplitude);
    }

    return { frequencies, amplitudes };
}

function getNearestBinAmplitude(fftResult, targetFrequency) {
    if (!fftResult.frequencies.length) return 0;

    let nearestIndex = 0;
    let smallestDiff = Math.abs(fftResult.frequencies[0] - targetFrequency);

    for (let i = 1; i < fftResult.frequencies.length; i++) {
        const diff = Math.abs(fftResult.frequencies[i] - targetFrequency);

        if (diff < smallestDiff) {
            smallestDiff = diff;
            nearestIndex = i;
        }
    }

    return fftResult.amplitudes[nearestIndex] || 0;
}

function getHarmonicSpectrum(samples) {
    const windowSamples = getFixedWindow(samples);
    const fftResult = dft(windowSamples, SAMPLE_RATE);

    let labels = [];
    let values = [];

    for (let h = 1; h <= MAX_HARMONIC_ORDER; h++) {
        const targetFrequency = h * FUNDAMENTAL_FREQUENCY;
        labels.push(h + 'H (' + targetFrequency + 'Hz)');
        values.push(getNearestBinAmplitude(fftResult, targetFrequency));
    }

    return { labels, values };
}

function calculateTHDFromSpectrum(spectrum) {
    if (!spectrum.values.length) return 0;

    const fundamental = spectrum.values[0];

    if (!fundamental || fundamental === 0) return 0;

    let harmonicSquareSum = 0;

    for (let i = 1; i < spectrum.values.length; i++) {
        harmonicSquareSum += spectrum.values[i] * spectrum.values[i];
    }

    return (Math.sqrt(harmonicSquareSum) / fundamental) * 100;
}

function formatTHD(value) {
    if (!Number.isFinite(value)) return '0.00%';
    return value.toFixed(2) + '%';
}

function createLineChart(canvasId, labels, datasets) {
    const ctx = document.getElementById(canvasId);

    if (!ctx) return;

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: datasets
        },
        options: lineChartOptions
    });
}

createLineChart('voltageChart', timestamps, [
    {
        label: 'Voltage L1/R',
        data: graphData.map(item => Number(item.v1 || 0)),
        borderColor: COLOR_MAP[1],
        backgroundColor: BG_MAP[1],
        borderWidth: 2,
        fill: false,
        tension: 0.15
    },
    {
        label: 'Voltage L2/Y',
        data: graphData.map(item => Number(item.v2 || 0)),
        borderColor: COLOR_MAP[2],
        backgroundColor: BG_MAP[2],
        borderWidth: 2,
        fill: false,
        tension: 0
    },
    {
        label: 'Voltage L3/B',
        data: graphData.map(item => Number(item.v3 || 0)),
        borderColor: COLOR_MAP[3],
        backgroundColor: BG_MAP[3],
        borderWidth: 2,
        fill: false,
        tension: 0
    }
]);

createLineChart('currentChart', timestamps, [
    {
        label: 'Current L1/R',
        data: graphData.map(item => Number(item.i1 || 0)),
        borderColor: COLOR_MAP[1],
        backgroundColor: BG_MAP[1],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    },
    {
        label: 'Current L2/Y',
        data: graphData.map(item => Number(item.i2 || 0)),
        borderColor: COLOR_MAP[2],
        backgroundColor: BG_MAP[2],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    },
    {
        label: 'Current L3/B',
        data: graphData.map(item => Number(item.i3 || 0)),
        borderColor: COLOR_MAP[3],
        backgroundColor: BG_MAP[3],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    }
]);

createLineChart('thdChart', thdLabels, [
    {
        label: 'THD Va',
        data: thdA,
        borderColor: COLOR_MAP[1],
        backgroundColor: BG_MAP[1],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    },
    {
        label: 'THD Vb',
        data: thdB,
        borderColor: COLOR_MAP[2],
        backgroundColor: BG_MAP[2],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    },
    {
        label: 'THD Vc',
        data: thdC,
        borderColor: COLOR_MAP[3],
        backgroundColor: BG_MAP[3],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    }
]);

createLineChart('currentThdChart', thdLabels, [
    {
        label: 'THD Ia',
        data: thdIA,
        borderColor: COLOR_MAP[1],
        backgroundColor: BG_MAP[1],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    },
    {
        label: 'THD Ib',
        data: thdIB,
        borderColor: COLOR_MAP[2],
        backgroundColor: BG_MAP[2],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    },
    {
        label: 'THD Ic',
        data: thdIC,
        borderColor: COLOR_MAP[3],
        backgroundColor: BG_MAP[3],
        borderWidth: 2,
        fill: false,
        tension: 0.35
    }
]);

Object.entries(allSamples).forEach(([channelGroup, groupSamples]) => {
    if (!Array.isArray(groupSamples)) return;

    const v1Raw = toNumberArray(groupSamples.map(s => s.v1));
    const v2Raw = toNumberArray(groupSamples.map(s => s.v2));
    const v3Raw = toNumberArray(groupSamples.map(s => s.v3));

    const i1Raw = toNumberArray(groupSamples.map(s => s.i1));
    const i2Raw = toNumberArray(groupSamples.map(s => s.i2));
    const i3Raw = toNumberArray(groupSamples.map(s => s.i3));

    const v1Cycle = extractFullCycle(v1Raw);
    const v2Cycle = extractFullCycle(v2Raw);
    const v3Cycle = extractFullCycle(v3Raw);

    const maxCycleLength = Math.max(
        v1Cycle ? v1Cycle.cycleData.length : 0,
        v2Cycle ? v2Cycle.cycleData.length : 0,
        v3Cycle ? v3Cycle.cycleData.length : 0
    );

    const cycleLabels = Array.from({ length: maxCycleLength }, (_, i) => i + 1);

    const vCtx = document.getElementById(`vChart-${channelGroup}`);

    if (vCtx) {
        new Chart(vCtx, {
            type: 'line',
            data: {
                labels: cycleLabels,
                datasets: [
                    {
                        label: 'V1',
                        data: v1Cycle ? v1Cycle.cycleData : [],
                        borderColor: COLOR_MAP[1],
                        borderWidth: 2,
                        pointRadius: 0,
                        fill: false,
                        tension: 0.35
                    },
                    {
                        label: 'V2',
                        data: v2Cycle ? v2Cycle.cycleData : [],
                        borderColor: COLOR_MAP[2],
                        borderWidth: 2,
                        pointRadius: 0,
                        fill: false,
                        tension: 0.35
                    },
                    {
                        label: 'V3',
                        data: v3Cycle ? v3Cycle.cycleData : [],
                        borderColor: COLOR_MAP[3],
                        borderWidth: 2,
                        pointRadius: 0,
                        fill: false,
                        tension: 0.35
                    }
                ]
            },
            options: waveformOptions
        });
    }

    const v1Spectrum = getHarmonicSpectrum(v1Raw);
    const v2Spectrum = getHarmonicSpectrum(v2Raw);
    const v3Spectrum = getHarmonicSpectrum(v3Raw);

    const i1Spectrum = getHarmonicSpectrum(i1Raw);
    const i2Spectrum = getHarmonicSpectrum(i2Raw);
    const i3Spectrum = getHarmonicSpectrum(i3Raw);

    const vThdText = document.getElementById(`vThdText-${channelGroup}`);

    if (vThdText) {
        vThdText.innerHTML =
            `Harmonic Amplitude: V1 = ${formatTHD(calculateTHDFromSpectrum(v1Spectrum))} | ` +
            `V2 = ${formatTHD(calculateTHDFromSpectrum(v2Spectrum))} | ` +
            `V3 = ${formatTHD(calculateTHDFromSpectrum(v3Spectrum))}`;
    }

    const iThdText = document.getElementById(`iThdText-${channelGroup}`);

    if (iThdText) {
        iThdText.innerHTML =
            `Harmonic Amplitude: I1 = ${formatTHD(calculateTHDFromSpectrum(i1Spectrum))} | ` +
            `I2 = ${formatTHD(calculateTHDFromSpectrum(i2Spectrum))} | ` +
            `I3 = ${formatTHD(calculateTHDFromSpectrum(i3Spectrum))}`;
    }

    const vFreqCtx = document.getElementById(`vFreqChart-${channelGroup}`);

    if (vFreqCtx) {
        new Chart(vFreqCtx, {
            type: 'bar',
            data: {
                labels: v1Spectrum.labels,
                datasets: [
                    {
                        label: 'V1 Harmonic',
                        data: v1Spectrum.values,
                        backgroundColor: BG_MAP[1],
                        borderColor: COLOR_MAP[1],
                        borderWidth: 1,
                        borderRadius: 6,
                        barPercentage: 0.8,
                        categoryPercentage: 0.7
                    },
                    {
                        label: 'V2 Harmonic',
                        data: v2Spectrum.values,
                        backgroundColor: BG_MAP[2],
                        borderColor: COLOR_MAP[2],
                        borderWidth: 1,
                        borderRadius: 6,
                        barPercentage: 0.8,
                        categoryPercentage: 0.7
                    },
                    {
                        label: 'V3 Harmonic',
                        data: v3Spectrum.values,
                        backgroundColor: BG_MAP[3],
                        borderColor: COLOR_MAP[3],
                        borderWidth: 1,
                        borderRadius: 6,
                        barPercentage: 0.8,
                        categoryPercentage: 0.7
                    }
                ]
            },
            options: barChartOptions
        });
    }

    const iFreqCtx = document.getElementById(`iFreqChart-${channelGroup}`);

    if (iFreqCtx) {
        new Chart(iFreqCtx, {
            type: 'bar',
            data: {
                labels: i1Spectrum.labels,
                datasets: [
                    {
                        label: 'I1 Harmonic',
                        data: i1Spectrum.values,
                        backgroundColor: BG_MAP[1],
                        borderColor: COLOR_MAP[1],
                        borderWidth: 1,
                        borderRadius: 6,
                        barPercentage: 0.8,
                        categoryPercentage: 0.7
                    },
                    {
                        label: 'I2 Harmonic',
                        data: i2Spectrum.values,
                        backgroundColor: BG_MAP[2],
                        borderColor: COLOR_MAP[2],
                        borderWidth: 1,
                        borderRadius: 6,
                        barPercentage: 0.8,
                        categoryPercentage: 0.7
                    },
                    {
                        label: 'I3 Harmonic',
                        data: i3Spectrum.values,
                        backgroundColor: BG_MAP[3],
                        borderColor: COLOR_MAP[3],
                        borderWidth: 1,
                        borderRadius: 6,
                        barPercentage: 0.8,
                        categoryPercentage: 0.7
                    }
                ]
            },
            options: barChartOptions
        });
    }
});
</script>