@extends('layouts.app')

@php
    $fmtDt = fn($v) => $v ? \Illuminate\Support\Carbon::parse($v)->format('M j, Y H:i') : '—';

    // Build a keyed map so we don't rely on variable variables.
    $snapshots = [
        'deviations'     => $deviations     ?? [],
        'capa'           => $capa           ?? [],
        'change_control' => $change_control ?? [],
        'complaints'     => $complaints     ?? [],
        'audits'         => $audits         ?? [],
    ];

    $cross = $cross ?? ['aging_buckets' => ['0_7' => 0, '8_30' => 0, '31_90' => 0, '90_plus' => 0]];

    // Never print arrays — coerce to int for safe interpolation.
    $num = function ($value): int {
        if (is_array($value)) return 0;
        if (is_bool($value)) return (int) $value;
        if (is_numeric($value)) return (int) $value;
        return 0;
    };
@endphp

@section('title', 'KPI Dashboard')

@section('content')
<div class="container-fluid">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h3 class="mb-0"><i class="fas fa-chart-line mr-2"></i> KPI Dashboard</h3>
            <small class="text-muted">
                Snapshot generated {{ $fmtDt($generated_at ?? now()) }}
                · cached {{ \App\Services\KpiService::CACHE_TTL }}s
            </small>
        </div>
        <div>
            <form method="POST" action="{{ route('kpi.flush') }}" class="d-inline">
                @csrf
                <button class="btn btn-sm btn-outline-secondary" title="Refresh cache">
                    <i class="fas fa-sync-alt"></i> Refresh Now
                </button>
            </form>
        </div>
    </div>

    {{-- Cross-module summary --}}
    <div class="row">
        <div class="col-md-3">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                        Total Open Across QMS
                    </div>
                    <div class="h3 mb-0 font-weight-bold text-gray-800">
                        {{ $num($cross['total_open'] ?? 0) }}
                    </div>
                    <small class="text-muted">Deviations + CAPA + Changes + Complaints + Audits</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                        Overdue Across QMS
                    </div>
                    <div class="h3 mb-0 font-weight-bold text-gray-800">
                        {{ $num($cross['total_overdue'] ?? 0) }}
                    </div>
                    <small class="text-muted">Past due date and still open</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                        Supplier Requal. Due
                    </div>
                    <div class="h3 mb-0 font-weight-bold text-gray-800">
                        {{ $num($cross['supplier_requal_due'] ?? 0) }}
                    </div>
                    <small class="text-muted">Next 60 days</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                        Aging (30+ Days)
                    </div>
                    <div class="h3 mb-0 font-weight-bold text-gray-800">
                        {{ $num(($cross['aging_buckets']['31_90'] ?? 0) + ($cross['aging_buckets']['90_plus'] ?? 0)) }}
                    </div>
                    <small class="text-muted">
                        {{ $num($cross['aging_buckets']['90_plus'] ?? 0) }} older than 90 days
                    </small>
                </div>
            </div>
        </div>
    </div>

    {{-- Aging buckets --}}
    <div class="card shadow mt-3 mb-3">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-history mr-1"></i> Open Item Age Distribution
            </h6>
        </div>
        <div class="card-body">
            @php
                $buckets = [
                    '0–7 days'    => $num($cross['aging_buckets']['0_7']     ?? 0),
                    '8–30 days'   => $num($cross['aging_buckets']['8_30']    ?? 0),
                    '31–90 days'  => $num($cross['aging_buckets']['31_90']   ?? 0),
                    '90+ days'    => $num($cross['aging_buckets']['90_plus'] ?? 0),
                ];
                $max = max($buckets) ?: 1;
            @endphp

            @foreach($buckets as $label => $count)
                <div class="d-flex align-items-center mb-2">
                    <div style="width: 110px;" class="small text-muted">{{ $label }}</div>
                    <div class="progress flex-grow-1 mr-2" style="height: 18px;">
                        <div class="progress-bar bg-{{
                            str_contains($label, '90+') ? 'danger' :
                            (str_contains($label, '31') ? 'warning' :
                            (str_contains($label, '8') ? 'info' : 'primary'))
                        }}"
                             role="progressbar"
                             style="width: {{ round(($count / $max) * 100) }}%">
                        </div>
                    </div>
                    <div style="width: 50px;" class="text-right font-weight-bold">{{ $count }}</div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Per-module cards --}}
    @php
        $modules = [
            [
                'key' => 'deviations', 'label' => 'Deviations & NC',
                'icon' => 'exclamation-triangle', 'color' => 'warning',
                'route' => 'kpi.deviations',
                'open_key' => 'open', 'overdue_key' => 'overdue',
                'additional_key' => 'critical', 'additional_label' => 'Critical',
            ],
            [
                'key' => 'capa', 'label' => 'CAPA',
                'icon' => 'tasks', 'color' => 'success',
                'route' => 'kpi.capa',
                'open_key' => 'open', 'overdue_key' => 'overdue',
                'additional_key' => 'awaiting_effectiveness', 'additional_label' => 'Awaiting Eff.',
            ],
            [
                'key' => 'change_control', 'label' => 'Change Control',
                'icon' => 'exchange-alt', 'color' => 'primary',
                'route' => 'kpi.change-control',
                'open_key' => 'open', 'overdue_key' => 'overdue',
                'additional_key' => 'pending_approval', 'additional_label' => 'Pending Appr.',
            ],
            [
                'key' => 'complaints', 'label' => 'Complaints',
                'icon' => 'comment-dots', 'color' => 'info',
                'route' => 'kpi.complaints',
                'open_key' => 'open', 'overdue_key' => 'reportable_overdue',
                'additional_key' => 'critical', 'additional_label' => 'Critical',
            ],
            [
                'key' => 'audits', 'label' => 'Audits',
                'icon' => 'clipboard-list', 'color' => 'secondary',
                'route' => 'kpi.audits',
                'open_key' => 'open', 'overdue_key' => 'overdue',
                'additional_key' => 'open_findings', 'additional_label' => 'Open Findings',
            ],
        ];
    @endphp

    <div class="row">
        @foreach($modules as $m)
            @php $snap = $snapshots[$m['key']] ?? []; @endphp
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="card border-left-{{ $m['color'] }} shadow h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h6 class="font-weight-bold text-{{ $m['color'] }} mb-0">
                                    <i class="fas fa-{{ $m['icon'] }} mr-1"></i> {{ $m['label'] }}
                                </h6>
                                <small class="text-muted">Total: {{ $num($snap['total'] ?? 0) }}</small>
                            </div>
                            <a href="{{ route($m['route']) }}" class="btn btn-sm btn-outline-{{ $m['color'] }}">
                                Details <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>

                        <div class="row text-center">
                            <div class="col-4">
                                <div class="h3 mb-0 font-weight-bold">
                                    {{ $num($snap[$m['open_key']] ?? 0) }}
                                </div>
                                <div class="small text-muted">Open</div>
                            </div>
                            <div class="col-4">
                                <div class="h3 mb-0 font-weight-bold text-danger">
                                    {{ $num($snap[$m['overdue_key']] ?? 0) }}
                                </div>
                                <div class="small text-muted">Overdue</div>
                            </div>
                            <div class="col-4">
                                <div class="h3 mb-0 font-weight-bold">
                                    {{ $num($snap[$m['additional_key']] ?? 0) }}
                                </div>
                                <div class="small text-muted">{{ $m['additional_label'] }}</div>
                            </div>
                        </div>

                        @php $closed = $num($snap['closed_this_month'] ?? 0); @endphp
                        @if($closed > 0)
                            <div class="mt-3 small text-muted text-center">
                                <i class="fas fa-check-circle text-success mr-1"></i>
                                {{ $closed }} closed this month
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- 30-day trend mini-charts --}}
    <div class="card shadow mb-3">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-chart-area mr-1"></i> 30-Day Intake Trend
            </h6>
        </div>
        <div class="card-body">
            <canvas id="trendChart" style="height: 100px;"></canvas>
        </div>
    </div>

    <script>
        window.__kpiTrend = {
            deviations:     @json($snapshots['deviations']['trend_30d']     ?? []),
            capa:           @json($snapshots['capa']['trend_30d']           ?? []),
            change_control: @json($snapshots['change_control']['trend_30d'] ?? []),
            complaints:     @json($snapshots['complaints']['trend_30d']     ?? []),
            audits:         @json($snapshots['audits']['trend_30d']         ?? []),
        };
    </script>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const trend = window.__kpiTrend || {};
        const firstKey = Object.keys(trend).find(k => Array.isArray(trend[k]) && trend[k].length);
        if (!firstKey) return;

        const labels = trend[firstKey].map(d => d.label);

        const colors = {
            deviations:     'rgba(255, 193, 7, 0.85)',
            capa:           'rgba(28, 200, 138, 0.85)',
            change_control: 'rgba(78, 115, 223, 0.85)',
            complaints:     'rgba(54, 185, 204, 0.85)',
            audits:         'rgba(133, 135, 150, 0.85)',
        };

        const datasets = Object.keys(trend)
            .filter(key => Array.isArray(trend[key]) && trend[key].length)
            .map(key => ({
                label: key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()),
                data: trend[key].map(d => d.count),
                borderColor: colors[key] || '#888',
                backgroundColor: (colors[key] || '#888').replace('0.85', '0.15'),
                tension: 0.3,
                fill: true,
                pointRadius: 2,
            }));

        new Chart(document.getElementById('trendChart'), {
            type: 'line',
            data: { labels, datasets },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'bottom' } },
                scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
            }
        });
    });
</script>
@endpush