{{-- resources/views/pages/dashboard/detail.blade.php --}}
@extends('layouts.app', ['class' => $class ?? 'bg-gray-100'])

@section('content')
    {{-- Optional: topnav bisa dimunculkan jika TIDAK di-hide --}}
    @empty($hide_topnav)
        @include('layouts.navbars.auth.topnav', [
            'title' => $title ?? '',
            'title_menu' => $title_menu ?? ($chart['title'] ?? 'Detail Chart'),
            'title_group' => $title_group ?? '-',
        ])
    @endempty

    {{-- ====== Fullscreen Wrapper ====== --}}
    <div class="container-fluid py-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-3 p-md-4">
                {{-- Header: tombol kiri/kanan, judul center --}}
                <div class="position-relative mb-2 mb-md-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="flex-shrink-0">
                            {{-- Tombol kembali yang robust: back → close tab → fallback href --}}
                            <a id="btnBack" href="{{ url($url_menu ?? ($url ?? '/dashboard')) }}"
                                class="btn btn-outline-secondary" title="Kembali">
                                <i class="fas fa-circle-left me-1"></i> Kembali
                            </a>
                        </div>

                        <h5 class="mb-0 text-center flex-grow-1" style="position:absolute; left:0; right:0;">
                            {{ $chart['title'] ?? 'Detail Chart' }}
                        </h5>

                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show ms-auto" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show ms-auto" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="flex-shrink-0 d-flex gap-2">
                            <button id="btnSavePng" class="btn btn-outline-primary" title="Unduh PNG">
                                <i class="fas fa-file-image me-1"></i> PNG
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Kanvas chart, dibuat tinggi layar --}}
                <div id="chartHost" style="position:relative; height: calc(100vh - 220px);">
                    <canvas id="detailChart"></canvas>
                </div>

                {{-- Keterangan kecil --}}
                <div class="text-xs text-muted mt-2">
                    ▲ = batch di-highlight. &nbsp; Warna garis mengikuti kode mesin.
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    {{-- sembunyikan bagian layout bila diminta controller --}}
    <style>
        @if (!empty($hide_sidenav))
            #sidenav-main {
                display: none !important
            }

            .g-sidenav-show .main-content {
                margin-left: 0 !important
            }
        @endif
        @if (!empty($hide_topnav))
            #navbarBlur {
                display: none !important
            }
        @endif
        @if (!empty($hide_header_bg))
            .min-height-300 {
                display: none !important
            }

            .main-content {
                margin-top: 0 !important
            }
        @endif

        #chartHost canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
        }
    </style>

    {{-- Chart.js --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

    <script>
        (function() {
            const CHART = @json($chart ?? []);

            /* ===== tombol kembali yang robust ===== */
            const btnBack = document.getElementById('btnBack');
            if (btnBack) {
                btnBack.addEventListener('click', function(e) {
                    e.preventDefault();
                    const hasHistory = (window.history && history.length > 1 && document.referrer && document
                        .referrer !== location.href);
                    if (hasHistory) return history.back();
                    window.close();
                    window.location.href = this.getAttribute('href') || '/';
                });
            }

            /* ================== UTIL CHART ================== */

            const IS_SPECIAL_SPEC = '{{ request('spec_source') }}' === 'special';

            function chartPixelRatio() {
                return Math.min(Math.max(window.devicePixelRatio || 1, 2), 3);
            }

            /* =========================================================
             * HITUNG SCALE Y (MIN & MAX KE TENGAH)
             * ========================================================= */
            function computeYScale(values, boundary) {
                const nums = [];
                const push = arr => {
                    if (!Array.isArray(arr)) return;
                    arr.forEach(v => {
                        const n = Number(v);
                        if (v != null && !isNaN(n)) nums.push(n);
                    });
                };

                push(values);
                if (boundary) {
                    push(boundary.min);
                    push(boundary.max);
                    push(boundary.target);
                    if (IS_SPECIAL_SPEC) push(boundary.allowance);
                }

                if (!nums.length) return null;

                const min = Math.min(...nums);
                const max = Math.max(...nums);
                const SCALE_MODE = '{{ request('y_scale_mode', 'normal') }}';

                const PAD_MAP = {
                    tight: 0.15,
                    normal: 0.35,
                    loose: 0.60
                };

                const padFactor = PAD_MAP[SCALE_MODE] ?? 0.35;
                const pad = (max - min || 1) * padFactor;

                return {
                    min: min - pad,
                    max: max + pad
                };
            }

            // Titik terlihat lebih besar bila di-highlight
            function makePointStyles(isHL, baseColor) {
                return {
                    pointBackgroundColor: baseColor,
                    pointBorderColor: (ctx) => {
                        const i = ctx.dataIndex,
                            shown = ctx.raw != null;
                        return !shown ? baseColor : (isHL(i) ? '#000' : baseColor);
                    },
                    pointRadius: (ctx) => {
                        const i = ctx.dataIndex,
                            shown = ctx.raw != null;
                        if (!shown) return 0;
                        return isHL(i) ? 7 : 3;
                    },
                    pointHoverRadius: (ctx) => {
                        const i = ctx.dataIndex,
                            shown = ctx.raw != null;
                        return !shown ? 0 : (isHL(i) ? 9 : 6);
                    },
                    pointStyle: (ctx) => {
                        const i = ctx.dataIndex,
                            shown = ctx.raw != null;
                        return !shown ? 'circle' : (isHL(i) ? 'triangle' : 'circle');
                    },
                };
            }

            /* ===== plugin: garis batas & label segmen (bulan / range / tahun) ===== */
            const MonthGuide = {
                id: 'monthGuide',
                afterDatasetsDraw(chart) {
                    const cfg = chart.config._config.userCfg || {};
                    const monthLabels = cfg.monthLabels || null;
                    const monthStartsIdx = cfg.monthStartsIdx || null;
                    const yearLabels = cfg.yearLabels || null;
                    const yearStartsIdx = cfg.yearStartsIdx || null;
                    const hasMultiYear = yearStartsIdx && yearStartsIdx.length > 1;

                    const {
                        ctx,
                        chartArea,
                        scales: {
                            x
                        }
                    } = chart;
                    if (!chartArea) return;

                    // --- Year separator (solid red line) ---
                    if (hasMultiYear) {
                        yearStartsIdx.forEach((s, i) => {
                            if (i === 0) return;
                            const xp = x.getPixelForValue(s - 0.5);

                            ctx.save();
                            ctx.setLineDash([]);
                            ctx.lineWidth = 2.5;
                            ctx.strokeStyle = 'rgba(180,40,40,0.7)';
                            ctx.beginPath();
                            ctx.moveTo(xp, chartArea.top);
                            ctx.lineTo(xp, chartArea.bottom);
                            ctx.stroke();
                            ctx.restore();
                        });

                        // Year labels di atas (baris pertama)
                        ctx.save();
                        ctx.font = '700 12px system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial';
                        ctx.fillStyle = 'rgba(180,40,40,0.9)';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'top';
                        yearStartsIdx.forEach((s, i) => {
                            const e = (i + 1 < yearStartsIdx.length)
                                ? yearStartsIdx[i + 1] - 1
                                : chart.data.labels.length - 1;
                            const mid = (s + e) / 2;
                            ctx.fillText(yearLabels[i], x.getPixelForValue(mid), chartArea.top + 2);
                        });
                        ctx.restore();
                    }

                    // --- Month separator lines (dashed) ---
                    if (!monthLabels || !monthStartsIdx) return;

                    ctx.save();
                    ctx.setLineDash([5, 4]);
                    ctx.strokeStyle = 'rgba(0,0,0,0.35)';
                    monthStartsIdx.forEach((s, i) => {
                        if (i === 0) return;
                        const xp = x.getPixelForValue(s - 0.5);
                        ctx.beginPath();
                        ctx.moveTo(xp, chartArea.top);
                        ctx.lineTo(xp, chartArea.bottom);
                        ctx.stroke();
                    });
                    ctx.restore();

                    // Month labels (baris kedua jika multi-year, baris pertama jika single-year)
                    const monthLabelY = hasMultiYear ? chartArea.top + 16 : chartArea.top + 2;
                    ctx.save();
                    ctx.font = '600 12px system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial';
                    ctx.fillStyle = '#334';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'top';
                    for (let i = 0; i < monthStartsIdx.length; i++) {
                        const start = monthStartsIdx[i];
                        const end = (i + 1 < monthStartsIdx.length) ? (monthStartsIdx[i + 1] - 1) : (chart.data
                            .labels.length - 1);
                        const mid = (start + end) / 2;
                        ctx.fillText(monthLabels[i], x.getPixelForValue(mid), monthLabelY);
                    }
                    ctx.restore();
                }
            };

            // Palet mesin
            const COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f',
                '#bcbd22', '#17becf'
            ];

            /* ================= render detail (per-mesin × per-SEGMENT) ================= */
            function renderDetailChart(canvasId, cfg) {
                if (!cfg || !cfg.values) return null;

                const values = cfg.values || [];
                const batchCodes = (cfg.labels || []).map(String);
                const batchIds = (cfg.batchIds || []).map(String);
                const machineNames = cfg.machineNames || [];
                const yTitle = cfg.yTitle || '';
                const indexLabels = values.map((_, i) => i + 1);

                // hitung scale Y
                const yScale = computeYScale(values, cfg.boundary);

                // segmen (bulan / range) dari server
                const monthStartsIdx = Array.isArray(cfg.monthStartsIdx) ? cfg.monthStartsIdx.slice() : [0];
                const monthLabels = cfg.monthLabels || [];
                if (monthStartsIdx.length === 0 || monthStartsIdx[0] !== 0) monthStartsIdx.unshift(0);
                const ranges = monthStartsIdx.map((s, i) => [s, (i + 1 < monthStartsIdx.length ? monthStartsIdx[i + 1] -
                    1 : values.length - 1)]);

                // mesin unik
                const uniqMachines = [];
                machineNames.forEach(n => {
                    const nm = n || 'Tanpa Nama';
                    if (!uniqMachines.includes(nm)) uniqMachines.push(nm);
                });

                // highlight set (id/kode)
                const H = new Set((cfg.highlight || []).map(s => String(s).toUpperCase()));
                const isHL = (i) => {
                    const code = (batchCodes[i] ?? '').toUpperCase();
                    const id = (batchIds[i] ?? '').toUpperCase();
                    return H.has(code) || H.has(id);
                };

                const datasets = [];

                // === dataset per MESIN × per-SEGMENT (titik pertama segmen tetap terlihat) ===
                uniqMachines.forEach((nm, uidx) => {
                    const baseColor = COLORS[uidx % COLORS.length];
                    ranges.forEach((rg, ridx) => {
                        const [a, b] = rg;
                        const data = values.map((v, i) => (i >= a && i <= b && machineNames[i] === nm) ?
                            v : null);
                        datasets.push({
                            label: nm,
                            _hideLegend: ridx !== 0, // hanya 1 entri legend per mesin
                            data,
                            borderColor: baseColor,
                            backgroundColor: 'transparent',
                            borderWidth: 3,
                            tension: 0,
                            spanGaps: true,
                            order: 10,
                            ...makePointStyles(isHL, baseColor),
                        });
                    });
                });

                // === boundary per-SEGMENT (min/target/max/allowance) ===
                (function addBoundary() {
                    const bound = cfg.boundary;
                    if (!bound) return;
                    const defs = [{
                            key: 'min',
                            color: '#000000',
                            width: 3,
                            dash: []
                        },
                        {
                            key: 'target',
                            color: '#000000',
                            width: 2,
                            dash: [8, 6]
                        },
                        {
                            key: 'max',
                            color: '#000000',
                            width: 2,
                            dash: [2, 5]
                        },
                        {
                            key: 'allowance',
                            color: '#000000',
                            width: 2,
                            dash: [10, 4, 2, 4]
                        },
                    ];

                    // callback dot untuk titik yang isolated dalam dataset
                    const isolatedDot = (ctx) => {
                        const val = ctx.raw;
                        if (val == null) return 0;
                        const data = ctx.dataset.data || [];
                        const i = ctx.dataIndex;
                        const left = i > 0 ? data[i - 1] : null;
                        const right = i < data.length - 1 ? data[i + 1] : null;
                        return (left == null && right == null) ? 4 : 0;
                    };

                    defs.forEach(d => {
                        const raw = Array.isArray(bound[d.key]) ? bound[d.key] : [];
                        ranges.forEach((rg, ridx) => {
                            const [a, b] = rg;
                            const data = raw.map((v, i) => (i >= a && i <= b) ? v : null);
                            datasets.push({
                                label: d.key,
                                _hideLegend: ridx !== 0,
                                data,
                                borderColor: d.color,
                                backgroundColor: 'transparent',
                                borderWidth: d.width,
                                borderDash: d.dash,
                                tension: 0,
                                spanGaps: true,
                                order: 1,
                                pointRadius: isolatedDot,
                                pointHoverRadius: (ctx) => isolatedDot(ctx) ? 6 : 0,
                            });
                        });
                    });
                })();


                // tooltip
                const tooltipTitle = (items) => items?.length ? `No: ${indexLabels[items[0].dataIndex]}` : '';
                const tooltipLabel = (it) => {
                    const i = it.dataIndex,
                        nm = it.dataset?.label ?? 'Mesin';
                    return [
                        `Mesin : ${nm}`,
                        `No    : ${indexLabels[i]}`,
                        `Batch : ${batchCodes[i] ?? '-'}`,
                        `Nilai : ${it.formattedValue}`
                    ];
                };

                const chart = new Chart(document.getElementById(canvasId), {
                    type: 'line',
                    data: {
                        labels: indexLabels,
                        datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        devicePixelRatio: chartPixelRatio(),
                        layout: {
                            padding: {
                                top: 28,
                                right: 12,
                                bottom: 8,
                                left: 8
                            }
                        },
                        plugins: {
                            legend: {
                                position: 'right',
                                labels: {
                                    // sembunyikan legend untuk segmen selain pertama (duplikat)
                                    filter: (item, data) => !data.datasets[item.datasetIndex]._hideLegend
                                },
                                onClick(e, legendItem, legend) {
                                    const chart = legend.chart;
                                    const dsIndex = legendItem.datasetIndex;
                                    const clickedLabel = chart.data.datasets[dsIndex]?.label;
                                    if (!clickedLabel) return;

                                    // toggle SEMUA dataset dg label sama (lintas segmen)
                                    const idxs = [];
                                    chart.data.datasets.forEach((ds, idx) => {
                                        if (ds.label === clickedLabel) idxs.push(idx);
                                    });
                                    const anyVisible = idxs.some(idx => !chart.getDatasetMeta(idx).hidden);
                                    idxs.forEach(idx => {
                                        chart.getDatasetMeta(idx).hidden = anyVisible ? true : null;
                                    });
                                    chart.update();
                                }
                            },
                            title: {
                                display: false
                            },
                            tooltip: {
                                mode: 'nearest',
                                intersect: false,
                                callbacks: {
                                    title: tooltipTitle,
                                    label: tooltipLabel
                                }
                            }
                        },
                        interaction: {
                            mode: 'nearest',
                            intersect: false
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: 'Nomor Urut'
                                },
                                ticks: {
                                    autoSkip: false,
                                    maxRotation: 0,
                                    minRotation: 0
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: yTitle
                                },
                                ...(yScale ? {
                                    min: yScale.min,
                                    max: yScale.max
                                } : {})
                            }
                        },
                        elements: {
                            line: {
                                capStyle: 'round',
                                joinStyle: 'round'
                            }
                        }
                    },
                    plugins: [MonthGuide]
                });

                chart.config._config.userCfg = {
                    monthLabels,
                    monthStartsIdx,
                    yearLabels: cfg.yearLabels || null,
                    yearStartsIdx: cfg.yearStartsIdx || null
                };

                // Resize tinggi kanvas & tombol PNG
                const host = document.getElementById('chartHost');
                const resize = () => {
                    const headerBgHidden = document.querySelector('.min-height-300') === null;
                    host.style.height = `calc(100vh - ${headerBgHidden ? 140 : 220}px)`;
                    chart.resize();
                    chart.update('none');
                };
                window.addEventListener('resize', resize);
                resize();

                if (window.ResizeObserver) {
                    const observer = new ResizeObserver(resize);
                    observer.observe(host);
                }

                document.getElementById('btnSavePng')?.addEventListener('click', () => {
                    // Buat canvas baru dengan background putih agar PNG tidak hitam
                    const srcCanvas = chart.canvas;
                    const tmpCanvas = document.createElement('canvas');
                    tmpCanvas.width = srcCanvas.width;
                    tmpCanvas.height = srcCanvas.height;
                    const tmpCtx = tmpCanvas.getContext('2d');
                    // gambar background putih
                    tmpCtx.fillStyle = '#ffffff';
                    tmpCtx.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
                    // gambar chart di atasnya
                    tmpCtx.drawImage(srcCanvas, 0, 0);

                    const a = document.createElement('a');
                    a.download = (cfg.title || 'chart') + '.png';
                    a.href = tmpCanvas.toDataURL('image/png');
                    a.click();
                });

                return chart;
            }

            /* ============== entry point ============== */
            renderDetailChart('detailChart', CHART);
        })();
    </script>
@endpush