@extends(request()->has('_sphf_partial') ? 'theme.sphf.layouts.partial' : 'theme.sphf.layouts.app')

@section('content')
@php
    $kpi = $kpi ?? [
        'under_progress' => 434245,
        'red_alerts' => 18420,
        'amber_alerts' => 32810,
        'yellow_alerts' => 61250,
        'avg_stage_days' => 58,
        'email_queue' => 12,
    ];

    $health = $health ?? [
        'green' => 321765,
        'yellow' => 61250,
        'amber' => 32810,
        'red' => 18420,
    ];

    $bottlenecks = $bottlenecks ?? [
        ['label' => 'Overall', 'val' => 26900],
        ['label' => '3rd to Roof', 'val' => 9200],
        ['label' => '1st to Plinth', 'val' => 8100],
        ['label' => '2nd to Lintel', 'val' => 7500],
        ['label' => 'Plinth to 2nd', 'val' => 5800],
    ];

    $alerts = $alerts ?? [
        ['color' => 'red', 'title' => '26,900 overall cases crossed Red threshold', 'desc' => 'Overall 1st installment to Roof/4th stage has exceeded 450 days. SPHF HQ review required', 'level' => 'Red'],
        ['color' => 'orange', 'title' => '32,810 cases are Amber across active stages', 'desc' => 'These cases are approaching critical delay and should move to district action plans.', 'level' => 'Amber'],
        ['color' => 'yellow', 'title' => '61,250 cases have crossed Yellow thresholds', 'desc' => 'Early warning generated. IP and district teams should resolve before escalation.', 'level' => 'Yellow'],
        ['color' => 'green', 'title' => 'Email notification module planned', 'desc' => 'Current prototype prepares counts and owners. Email digest can be added in next phase.', 'level' => 'Later'],
    ];

    $maxBottleneck = max(1, max(array_map(fn ($item) => (int) ($item['val'] ?? 0), $bottlenecks)));
@endphp

<section class="sphf-page sphf-under-progress">
    <div class="sphf-page-tabs mt-2">
        <a href="{{ route('theme.sphf.live-dss') }}"
           class="sphf-page-tab {{ request()->routeIs('theme.sphf.live-dss') ? 'is-active' : '' }}">
            Live DSS
        </a>
        <a href="{{ route('theme.sphf.stage-bottlenecks') }}"
           class="sphf-page-tab {{ request()->routeIs('theme.sphf.stage-bottlenecks') ? 'is-active' : '' }}">
            Stage Bottlenecks
        </a>
        <a href="{{ route('theme.sphf.financial-delays') }}"
           class="sphf-page-tab {{ request()->routeIs('theme.sphf.financial-delays') ? 'is-active' : '' }}">
            Financial Delays
        </a>
        <div style="margin-left:auto;">
            <button type="button" class="sphf-export-btn" data-sphf-export-btn="true" data-export-target="#sphfDashboardExportArea" data-export-file="SPHF_Live_DSS_Report" data-export-bg="#f3f5f6">
                <i class="ki-filled ki-exit-down"></i>
                <span>Export</span>
            </button>
        </div>
    </div>

    <div class="sphf-export-area" id="sphfDashboardExportArea">
        @include('theme.sphf.partials.filter-bar', [
            'options' => $filterOptions ?? [],
            'selected' => $selectedFilters ?? [],
        ])

        <div class="sphf-up-kpi-grid">
            <article class="sphf-up-kpi-card">
                <p class="sphf-up-kpi-card__label">Under-progress Cases</p>
                <p class="sphf-up-kpi-card__value is-blue">{{ number_format((int) ($kpi['under_progress'] ?? 0)) }}</p>
                <p class="sphf-up-kpi-card__meta">Started but not fully completed</p>
            </article>
            <article class="sphf-up-kpi-card">
                <p class="sphf-up-kpi-card__label">Red Alerts</p>
                <p class="sphf-up-kpi-card__value is-red">{{ number_format((int) ($kpi['red_alerts'] ?? 0)) }}</p>
                <p class="sphf-up-kpi-card__meta">Stage threshold crossed</p>
            </article>
            <article class="sphf-up-kpi-card">
                <p class="sphf-up-kpi-card__label">Amber Alerts</p>
                <p class="sphf-up-kpi-card__value is-orange">{{ number_format((int) ($kpi['amber_alerts'] ?? 0)) }}</p>
                <p class="sphf-up-kpi-card__meta">Approaching critical delay</p>
            </article>
            <article class="sphf-up-kpi-card">
                <p class="sphf-up-kpi-card__label">Yellow Alerts</p>
                <p class="sphf-up-kpi-card__value is-yellow">{{ number_format((int) ($kpi['yellow_alerts'] ?? 0)) }}</p>
                <p class="sphf-up-kpi-card__meta">Beyond expected time span</p>
            </article>
            <article class="sphf-up-kpi-card">
                <p class="sphf-up-kpi-card__label">Avg Active Stage Days</p>
                <p class="sphf-up-kpi-card__value is-purple">{{ $kpi['avg_stage_days'] ?? 0 }}</p>
                <p class="sphf-up-kpi-card__meta">Live pipeline average</p>
            </article>
            <article class="sphf-up-kpi-card">
                <p class="sphf-up-kpi-card__label">Email Queue Later</p>
                <p class="sphf-up-kpi-card__value is-green">{{ $kpi['email_queue'] ?? 0 }}</p>
                <p class="sphf-up-kpi-card__meta">Management digest groups</p>
            </article>
        </div>

        <div class="sphf-up-grid sphf-up-grid--three">
            <article class="sphf-up-card">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">System Health</h3>
                    <span class="sphf-up-badge is-blue">Count Based</span>
                </div>
                <div class="sphf-up-card__body">
                    <div class="sphf-up-health-grid">
                        <div class="sphf-up-health-tile is-green"><p>Green</p><strong>{{ number_format((int) ($health['green'] ?? 0)) }}</strong></div>
                        <div class="sphf-up-health-tile is-yellow"><p>Yellow</p><strong>{{ number_format((int) ($health['yellow'] ?? 0)) }}</strong></div>
                        <div class="sphf-up-health-tile is-orange"><p>Amber</p><strong>{{ number_format((int) ($health['amber'] ?? 0)) }}</strong></div>
                        <div class="sphf-up-health-tile is-red"><p>Red</p><strong>{{ number_format((int) ($health['red'] ?? 0)) }}</strong></div>
                    </div>
                </div>
            </article>

            <article class="sphf-up-card sphf-up-card--chart" id="sphfLiveStageAlertMixCard">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">Stage-wise Alert Mix</h3>
                    <span class="sphf-up-badge is-red" style="margin-right: 30px">Live</span>
                </div>
                <div class="sphf-up-card__body sphf-up-card__body--chart">
                    <canvas id="stageChart" class="sphf-up-chart"></canvas>
                </div>
            </article>

            <article class="sphf-up-card">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">Critical Bottleneck Ranking</h3>
                    <span class="sphf-up-badge is-red">Top Stages</span>
                </div>
                <div class="sphf-up-card__body">
                    <div class="sphf-up-ranking">
                        @foreach($bottlenecks as $bn)
                            @php
                                $value = (int) ($bn['val'] ?? 0);
                                $pct = min(100, round(($value / $maxBottleneck) * 100, 1));
                            @endphp
                            <div>
                                <div class="sphf-up-ranking__head">
                                    <span class="sphf-up-ranking__label">{{ $bn['label'] }}</span>
                                    <span class="sphf-up-ranking__value">{{ number_format($value) }}</span>
                                </div>
                                <div class="sphf-up-ranking__bar"><span style="width: {{ $pct }}%;"></span></div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </article>
        </div>

        <div class="sphf-up-grid sphf-up-grid--split">
            <article class="sphf-up-card">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">Live Management Alerts</h3>
                </div>
                <div class="sphf-up-card__body">
                    <div class="sphf-up-alert-list">
                        @foreach($alerts as $alert)
                            @php $color = $alert['color'] === 'amber' ? 'orange' : $alert['color']; @endphp
                            <div class="sphf-up-alert is-{{ $color }}">
                                <div>
                                    <strong>{{ $alert['title'] }}</strong>
                                    <p>{{ $alert['desc'] }}</p>
                                </div>
                                <span class="sphf-up-badge is-{{ $color === 'yellow' ? 'orange' : $color }}">{{ $alert['level'] }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </article>

            <article class="sphf-up-card">
                <div class="sphf-up-card__header">
                    <h3 class="sphf-up-card__title">SPHF Management Escalation</h3>
                    <span class="sphf-up-badge is-blue">Levels</span>
                </div>
                <div class="sphf-up-card__body">
                    <div class="sphf-up-escalation-list">
                        <div class="sphf-up-escalation is-yellow">
                            <div><strong>Yellow</strong><p>District/IP operational follow-up</p></div>
                            <span class="sphf-up-badge is-orange">Level 1</span>
                        </div>
                        <div class="sphf-up-escalation is-orange">
                            <div><strong>Amber</strong><p>SPHF regional / operations review</p></div>
                            <span class="sphf-up-badge is-orange">Level 2</span>
                        </div>
                        <div class="sphf-up-escalation is-red">
                            <div><strong>Red</strong><p>SPHF HQ management intervention</p></div>
                            <span class="sphf-up-badge is-red">Level 3</span>
                        </div>
                    </div>
                </div>
            </article>
        </div>

        <p class="sphf-under-progress__note">
            This prototype treats completed units as trend reporting only. DSS logic is driven by under-progress cases,
            current stage elapsed days, stage-specific thresholds, alert counts, and SPHF management escalation.
        </p>
    </div>
</section>
@endsection

@section('scripts')
<script src="{{ asset('theme/default/assets/js/chart-toolbar.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
(function () {
    @php
        $stageChartData = $stageChartData ?? [
            'labels' => ['1st to Plinth','Plinth to 2nd','2nd to Lintel','Lintel to 3rd','3rd to Roof','Roof to 4th','Overall'],
            'green' => [48000,42000,38000,36000,55000,18000,90000],
            'yellow' => [8000,10000,9000,12000,14000,3000,61250],
            'amber' => [5000,7000,6500,8000,9000,2000,32810],
            'red' => [2000,3000,2800,3500,4200,900,18420],
        ];
    @endphp

    const stageData = @json($stageChartData);

    window.sphfInitLiveDssPage = function (retries = 8) {
        const stageChartEl = document.getElementById('stageChart');
        const stageChartCard = document.getElementById('sphfLiveStageAlertMixCard');

        if (!stageChartEl) {
            return;
        }

        if (typeof Chart === 'undefined') {
            if (retries > 0) {
                window.setTimeout(function () {
                    window.sphfInitLiveDssPage(retries - 1);
                }, 150);
            }
            return;
        }

        const existingStageChart = Chart.getChart(stageChartEl);
        if (existingStageChart) {
            existingStageChart.destroy();
        }

        const stageChart = new Chart(stageChartEl.getContext('2d'), {
            type: 'bar',
            data: {
                labels: stageData.labels,
                datasets: [
                    { label: 'Green', data: stageData.green, backgroundColor: '#16a34a', stack: 'a' },
                    { label: 'Yellow', data: stageData.yellow, backgroundColor: '#ca8a04', stack: 'a' },
                    { label: 'Amber', data: stageData.amber, backgroundColor: '#d97706', stack: 'a' },
                    { label: 'Red', data: stageData.red, backgroundColor: '#dc2626', stack: 'a' },
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: { boxWidth: 10, font: { size: 10 }, padding: 8 }
                    }
                },
                scales: {
                    x: { stacked: true, ticks: { font: { size: 10 } }, grid: { display: false } },
                    y: { stacked: true, ticks: { font: { size: 10 } }, grid: { color: '#f1f5f9' } }
                }
            }
        });

        const attachStageToolbar = function (toolbarRetries = 8) {
            if (!stageChartCard || typeof window.ChartToolbar === 'undefined') {
                if (toolbarRetries > 0) {
                    window.setTimeout(function () {
                        attachStageToolbar(toolbarRetries - 1);
                    }, 150);
                }
                return;
            }

            if (window.sphfLiveStageAlertMixToolbar && typeof window.sphfLiveStageAlertMixToolbar.destroy === 'function') {
                window.sphfLiveStageAlertMixToolbar.destroy();
            }

            stageChartCard.querySelectorAll('.ct-toolbar, .ct-table-wrapper, .ct-back-btn').forEach(function (el) {
                el.remove();
            });

            window.sphfLiveStageAlertMixToolbar = new window.ChartToolbar({
                chartInstance: stageChart,
                container: stageChartCard,
                chartTitle: 'Stage-wise Alert Mix',
            });
        };

        attachStageToolbar();
    };

    if (!window.__sphfLiveDssInitEventsBound) {
        window.__sphfLiveDssInitEventsBound = true;
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof window.sphfInitLiveDssPage === 'function') {
                window.sphfInitLiveDssPage();
            }
        });
        document.addEventListener('sphf:content-loaded', function () {
            if (typeof window.sphfInitLiveDssPage === 'function') {
                window.sphfInitLiveDssPage();
            }
        });
    }

    if (document.readyState !== 'loading') {
        const runLiveDssInit = function () {
            window.sphfInitLiveDssPage();
        };

        if (typeof window.requestAnimationFrame === 'function') {
            window.requestAnimationFrame(runLiveDssInit);
        } else {
            window.setTimeout(runLiveDssInit, 0);
        }
    }
})();
</script>
@endsection