@extends('layouts.app')
@section('title', 'Portfolio Risk Intelligence Report')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/dynamic-dashboard.css') }}?v={{ filemtime(public_path('css/dynamic-dashboard.css')) }}">
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css">
@endpush

@section('contents')
<section class="content dd-dashboard dd-portfolio-report">
    <div class="container-fluid">
        <div class="dd-portfolio-report__hero">
            <div>
                <a href="{{ route('dashboard') }}" class="dd-priority-page__back"><i class="fas fa-arrow-left"></i> Back to dashboard</a>
                <h1 class="dd-portfolio-report__title">Portfolio Risk Intelligence Report</h1>
                <p class="dd-portfolio-report__lead">A clear picture of ADP scheme performance — where expenditure is ahead of physical progress, which districts are under pressure, and which schemes need your attention first.</p>
            </div>
            <div class="dd-portfolio-report__year-wrap">
                <label for="dd-attention-year">Budget year</label>
                <select id="dd-attention-year" class="form-control dd-attention-year-select">
                    @foreach ($budgetYears as $yearOption)
                        <option value="{{ $yearOption['id'] }}" @selected($yearOption['id'] === $selectedYear)>
                            {{ $yearOption['label'] }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <nav class="dd-portfolio-report__nav" id="dd-portfolio-report-nav">
            <a href="#overview" class="dd-portfolio-report__nav-link @if($selectedSection === 'overview') is-active @endif" data-section="overview">Overview</a>
            <a href="#severity" class="dd-portfolio-report__nav-link @if($selectedSection === 'severity') is-active @endif" data-section="severity">Risk severity</a>
            <a href="#indicators" class="dd-portfolio-report__nav-link @if($selectedSection === 'indicators') is-active @endif" data-section="indicators">Indicators</a>
            <a href="#map" class="dd-portfolio-report__nav-link @if($selectedSection === 'map') is-active @endif" data-section="map">Sindh map</a>
            <a href="#districts" class="dd-portfolio-report__nav-link @if($selectedSection === 'districts') is-active @endif" data-section="districts">Districts</a>
            <a href="#schemes" class="dd-portfolio-report__nav-link @if($selectedSection === 'schemes') is-active @endif" data-section="schemes">Priority schemes</a>
        </nav>

        <div class="dd-attention-panel dd-attention-panel--report" id="dd-attention-panel" data-report-mode="full">
            <div class="dd-attention-body" id="dd-attention-body">
                <div class="dd-attention-loading" id="dd-attention-loading">
                    <div class="dd-attention-spinner"></div>
                    <span>Preparing your portfolio report…</span>
                </div>
                <div class="dd-attention-error" id="dd-attention-error" hidden>
                    <i class="fas fa-exclamation-circle"></i>
                    <span id="dd-attention-error-text">Could not load report.</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="dd-attention-retry">Retry</button>
                </div>

                <div class="dd-attention-content" id="dd-attention-content" hidden>
                    <section class="dd-portfolio-section" id="overview">
                        <h2 class="dd-portfolio-section__title"><i class="fas fa-tachometer-alt"></i> Portfolio overview</h2>
                        <p class="dd-portfolio-section__explain">Summary counts for the selected budget year. <strong>Critical</strong> means a large gap between financial and physical progress, or an impossible deadline.</p>
                        <div class="dd-attention-kpi-strip" id="dd-attention-kpi-strip"></div>
                    </section>

                    <section class="dd-portfolio-section" id="severity">
                        <h2 class="dd-portfolio-section__title"><i class="fas fa-shield-alt"></i> Risk severity mix</h2>
                        <p class="dd-portfolio-section__explain">Share of schemes that are critical (urgent), warning (needs review), or on track.</p>
                        <div class="dd-attention-card"><div class="dd-attention-chart-wrap"><canvas id="dd-attention-chart-severity" height="220"></canvas></div></div>
                    </section>

                    <section class="dd-portfolio-section" id="indicators">
                        <h2 class="dd-portfolio-section__title"><i class="fas fa-tags"></i> Risk indicators</h2>
                        <p class="dd-portfolio-section__explain">Each flag explains <em>why</em> a scheme was marked for attention — for example, money spent faster than work completed.</p>
                        <div class="dd-attention-indicators" id="dd-attention-indicators"></div>
                        <div class="dd-attention-card mt-3"><div class="dd-attention-chart-wrap"><canvas id="dd-attention-chart-indicators" height="260"></canvas></div></div>
                        <div class="dd-attention-trend-chips mt-3" id="dd-attention-trend-chips"></div>
                    </section>

                    <section class="dd-portfolio-section" id="map">
                        <h2 class="dd-portfolio-section__title"><i class="fas fa-map-marked-alt"></i> Sindh — district hotspots</h2>
                        <p class="dd-portfolio-section__explain">Darker red areas have more critical schemes. Click markers for scheme details.</p>
                        <div class="dd-attention-card dd-attention-card--map">
                            <div id="dd-attention-sindh-map" class="dd-attention-sindh-map"></div>
                            <div class="dd-attention-map-fallback" id="dd-attention-map-fallback" hidden>
                                <i class="fas fa-map"></i><span>Map could not be loaded. See district table below.</span>
                            </div>
                            <div class="dd-map-scheme-detail" id="dd-map-scheme-detail" hidden aria-live="polite">
                                <div class="dd-map-scheme-detail__toolbar">
                                    <span class="dd-map-scheme-detail__hint" id="dd-map-scheme-detail-hint">Scheme details</span>
                                    <button type="button" class="dd-map-scheme-detail__close" id="dd-map-scheme-detail-close" aria-label="Close scheme details">
                                        <i class="fas fa-times" aria-hidden="true"></i>
                                    </button>
                                </div>
                                <div class="dd-map-scheme-detail__body" id="dd-map-scheme-detail-body"></div>
                            </div>
                            <p class="dd-map-scheme-detail__placeholder" id="dd-map-scheme-detail-placeholder">
                                <i class="fas fa-hand-pointer" aria-hidden="true"></i> Click a hotspot on the map to view full scheme risk details.
                            </p>
                        </div>
                    </section>

                    <section class="dd-portfolio-section" id="districts">
                        <h2 class="dd-portfolio-section__title"><i class="fas fa-map-pin"></i> District ranking</h2>
                        <p class="dd-portfolio-section__explain">Districts sorted by the number of schemes needing attention.</p>
                        <div class="dd-attention-chart-wrap dd-attention-chart-wrap--bars"><canvas id="dd-attention-chart-districts" height="280"></canvas></div>
                        <div class="dd-attention-table-wrap mt-3">
                            <table class="dd-attention-table dd-attention-table--compact">
                                <thead><tr><th>District</th><th>Critical</th><th>Warning</th><th>Total</th></tr></thead>
                                <tbody id="dd-attention-location-body"></tbody>
                            </table>
                        </div>
                    </section>

                    <section class="dd-portfolio-section" id="schemes">
                        <h2 class="dd-portfolio-section__title"><i class="fas fa-list-ul"></i> Priority schemes</h2>
                        <p class="dd-portfolio-section__explain">Schemes ranked by attention score — open the full list to review and take action.</p>
                        <a class="dd-attention-priority-card" id="dd-attention-open-schemes" href="{{ route('dashboard.priority-schemes') }}">
                            <span class="dd-attention-priority-card__icon"><i class="fas fa-list-ul"></i></span>
                            <span class="dd-attention-priority-card__body">
                                <span class="dd-attention-priority-card__label">View all priority schemes</span>
                                <span class="dd-attention-priority-card__count" id="dd-attention-schemes-count">—</span>
                            </span>
                            <span class="dd-attention-priority-card__chevron"><i class="fas fa-external-link-alt"></i></span>
                        </a>
                    </section>

                    <p class="dd-attention-footnote" id="dd-attention-footnote"></p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@turf/turf@6.5.0/dist/turf.min.js"></script>
<script>
window.ddDashboardConfig = {
    csrfToken: @json(csrf_token()),
    routes: {
        schemeAttentionUrl: @json(route('dashboard.scheme-attention')),
        prioritySchemesUrl: @json(route('dashboard.priority-schemes')),
        portfolioIntelligenceUrl: @json(route('dashboard.portfolio-intelligence')),
        sindhGeoJsonUrl: @json(route('dashboard.sindh-geojson')),
    },
    defaultBudgetYear: @json($selectedYear),
    reportMode: 'full',
    initialSection: @json($selectedSection),
};
</script>
<script src="{{ asset('js/dynamic-dashboard.js') }}?v={{ filemtime(public_path('js/dynamic-dashboard.js')) }}"></script>
@endpush