@extends('admin.admin_dashboard')
@section('admin')

@php
    $selectedBranch = $branchId;
    $branchName = $branches->firstWhere('id', $selectedBranch)?->name ?? 'All branches';
@endphp

<div class="page-content msc-dashboard-page">
    {{-- Hero --}}
    <div class="msc-dash-hero mb-4">
        <div class="row align-items-center g-3">
            <div class="col-lg-7">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span class="msc-dash-pill"><i class="bx bx-pulse me-1"></i> CH-SACCO Live</span>
                    @if($highlights['pending_drafts'] ?? 0)
                        <span class="msc-dash-pill msc-dash-pill--warn">{{ $highlights['pending_drafts'] }} draft{{ $highlights['pending_drafts'] > 1 ? 's' : '' }} pending</span>
                    @endif
                </div>
                <h2 class="msc-dash-hero__title mb-1">MSC Performance Dashboard</h2>
                <p class="msc-dash-hero__sub mb-0">
                    {{ $canViewAll ? ($selectedBranch ? $branchName : 'All branches — combined totals') : $branchName }}
                    · {{ $year }}
                    @if($highlights['latest_report_date'] ?? null)
                        · Latest report {{ $highlights['latest_report_date'] }}
                    @endif
                </p>
            </div>
            <div class="col-lg-5">
                <div class="d-flex flex-wrap gap-2 justify-content-lg-end">
                    @if($canCreate)
                        <a href="{{ route('msc.create', $selectedBranch ? ['branch_id' => $selectedBranch] : []) }}" class="btn btn-primary btn-sm">
                            <i class="bx bx-plus me-1"></i> New report
                        </a>
                    @endif
                    @if($canViewReports)
                        <a href="#msc-downloads" class="btn btn-outline-secondary btn-sm">
                            <i class="bx bx-download me-1"></i> Downloads
                        </a>
                        <a href="{{ route('msc.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="bx bx-list-ul me-1"></i> All reports
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <x-chm.card class="mb-4 msc-dash-filters">
        <form method="get" id="msc-dash-filter" class="row g-3 align-items-end">
            @if($canViewAll)
                <div class="col-md-4">
                    <label class="form-label">Branch</label>
                    <select name="branch_id" id="dash_branch_id" class="form-select chm-select" data-placeholder="All branches" data-allow-clear="true">
                        <option value="">All branches</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" @selected($selectedBranch == $branch->id)>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div class="col-md-3">
                <label class="form-label">Year</label>
                <select name="year" id="dash_year" class="form-select chm-select" data-placeholder="Select year">
                    @for($y = now()->year; $y >= now()->year - 5; $y--)
                        <option value="{{ $y }}" @selected($year == $y)>{{ $y }}</option>
                    @endfor
                </select>
            </div>
            <div class="col-auto d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="bx bx-refresh me-1"></i> Refresh</button>
                <button type="button" class="btn btn-outline-secondary" id="msc-live-toggle" title="Auto-refresh charts">
                    <i class="bx bx-broadcast"></i> Live
                </button>
            </div>
        </form>
    </x-chm.card>

    @if($canViewReports)
        <div id="msc-downloads">
            @include('admin.chs.msc.partials.download-section', [
                'branches' => $branches,
                'canViewAll' => $canViewAll,
                'canViewSummary' => $canViewSummary,
                'selectedBranch' => $selectedBranch,
                'selectedYear' => $year,
            ])
        </div>
    @endif

    {{-- KPI row --}}
    <div class="row g-3 mb-4">
        @foreach($kpis as $kpi)
            <div class="col-sm-6 col-xl-3">
                <div class="msc-kpi-card msc-kpi-card--{{ $kpi['color'] }}">
                    <div class="msc-kpi-card__icon"><i class="{{ $kpi['icon'] }}"></i></div>
                    <div class="msc-kpi-card__body">
                        <div class="msc-kpi-card__label">{{ $kpi['label'] }}</div>
                        <div class="msc-kpi-card__value msc-counter" data-target="{{ (int) $kpi['value'] }}">0</div>
                        <div class="msc-kpi-card__delta {{ ($kpi['delta'] ?? 0) >= 0 ? 'is-up' : 'is-down' }}">
                            <i class="bx {{ ($kpi['delta'] ?? 0) >= 0 ? 'bx-trending-up' : 'bx-trending-down' }}"></i>
                            {{ $kpi['delta_label'] ?? '' }}
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @php
        $isOrgScope = empty($selectedBranch);
        $membershipChartHint = $isOrgScope
            ? 'Line = combined total across all branches at each month-end. Bars = new members reported that month.'
            : 'Line = total members at month-end for this branch. Bars = new members in that month\'s report.';
    @endphp

    {{-- Stats strip --}}
    <div class="row row-cols-2 row-cols-md-4 g-3 mb-4">
        <x-chm.stat-card label="Reports ({{ $year }})" :value="number_format($stats['total_reports'] ?? 0)" icon="bx bx-file" color="primary" />
        <x-chm.stat-card label="Submitted" :value="number_format($stats['submitted'] ?? 0)" icon="bx bx-check-circle" color="success" />
        <x-chm.stat-card label="Drafts" :value="number_format($stats['drafts'] ?? 0)" icon="bx bx-edit" color="warning" />
        <x-chm.stat-card label="Branches reporting" :value="number_format($stats['branches_reporting'] ?? 0)" icon="bx bx-buildings" color="info" />
    </div>

    <div class="row g-4 mb-4">
        <div class="col-xl-8">
            <x-chm.card title="Membership growth" class="msc-chart-card h-100">
                <p class="text-muted small mb-2 msc-chart-hint" id="mscMembershipChartHint">{{ $membershipChartHint }}</p>
                <div class="msc-chart-wrap">
                    <canvas id="mscMembershipChart"></canvas>
                </div>
            </x-chm.card>
        </div>
        <div class="col-xl-4">
            <x-chm.card title="Submissions by month" class="msc-chart-card h-100">
                <div class="msc-chart-wrap msc-chart-wrap--sm">
                    <canvas id="mscSubmissionChart"></canvas>
                </div>
            </x-chm.card>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-lg-6">
            <x-chm.card title="Savings cumulative" class="msc-chart-card">
                <p class="text-muted small mb-2">Month-end cumulative total{{ $isOrgScope ? ' (all branches)' : '' }}.</p>
                <div class="msc-chart-wrap msc-chart-wrap--sm">
                    <canvas id="mscSavingsChart"></canvas>
                </div>
            </x-chm.card>
        </div>
        <div class="col-lg-6">
            <x-chm.card title="Share capital trend" class="msc-chart-card">
                <p class="text-muted small mb-2">Month-end cumulative total{{ $isOrgScope ? ' (all branches)' : '' }}.</p>
                <div class="msc-chart-wrap msc-chart-wrap--sm">
                    <canvas id="mscShareChart"></canvas>
                </div>
            </x-chm.card>
        </div>
    </div>

    @if($canViewSummary && count($branchComparison))
        <x-chm.card title="Membership by branch" class="mb-4 msc-chart-card">
            <div class="msc-chart-wrap">
                <canvas id="mscBranchChart"></canvas>
            </div>
        </x-chm.card>
    @endif

    <div class="row g-4 mb-4">
        <div class="col-lg-5">
            <x-chm.card title="Branch compliance" class="h-100">
                <div class="msc-compliance-list">
                    @forelse($compliance as $row)
                        <div class="msc-compliance-item">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="fw-semibold">{{ $row['branch'] }}</span>
                                <span class="badge {{ $row['submitted_this_month'] ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning' }}">
                                    {{ $row['submitted_this_month'] ? 'This month ✓' : 'Pending' }}
                                </span>
                            </div>
                            <x-chm.progress :value="$row['compliance_pct']" class="mb-1" />
                            <div class="small text-muted">{{ $row['year_submissions'] }} submissions · {{ $row['compliance_pct'] }}% YTD pace</div>
                        </div>
                    @empty
                        <p class="text-muted mb-0">No compliance data for this scope.</p>
                    @endforelse
                </div>
            </x-chm.card>
        </div>
        <div class="col-lg-7">
            <x-chm.card title="Recent reports" class="h-100">
                <div class="table-responsive">
                    <table class="table table-sm align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Branch</th>
                                <th>Status</th>
                                <th>By</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentReports as $report)
                                <tr class="msc-recent-row">
                                    <td>{{ $report->report_date?->format('d M Y') }}</td>
                                    <td>{{ $report->branch->name ?? '—' }}</td>
                                    <td>
                                        <x-chm.status-badge
                                            :status="$report->status === 'submitted' ? 'success' : 'warning'"
                                            :label="ucfirst($report->status)"
                                        />
                                    </td>
                                    <td class="text-muted small">{{ $report->creator->name ?? '—' }}</td>
                                    <td class="text-end">
                                        @if($canViewReports)
                                            <a href="{{ route('msc.show', $report) }}" class="btn btn-sm btn-outline-primary">Open</a>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-muted">No reports yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-chm.card>
        </div>
    </div>
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('backend/assets/css/msc-dashboard.css') }}?v={{ @filemtime(public_path('backend/assets/css/msc-dashboard.css')) ?: time() }}">
@endpush

@push('vendor-scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@endpush

@push('scripts')
@include('admin.chs.msc.partials.dashboard-scripts', [
    'membershipTrend' => $membershipTrend,
    'savingsTrend' => $savingsTrend,
    'shareCapitalTrend' => $shareCapitalTrend,
    'reportsByMonth' => $reportsByMonth,
    'branchComparison' => $branchComparison,
    'canViewSummary' => $canViewSummary,
    'chartContext' => $chartContext ?? ['scope' => 'org', 'branch_name' => 'All branches'],
    'dataUrl' => route('msc.dashboard.data'),
])
@endpush