@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Command Dashboard')
@section('page-subtitle', 'Fleet-wide operational overview')

@section('content')
<div class="row g-3 mb-3">
    @php
        $cards = [
            ['label' => 'Total Fleets', 'value' => $stats['total_fleets'], 'icon' => 'bi-water', 'bg' => 'primary'],
            ['label' => 'Fleets At Sea', 'value' => $stats['fleets_at_sea'], 'icon' => 'bi-compass', 'bg' => 'info'],
            ['label' => 'Fleets Returned', 'value' => $stats['fleets_returned'], 'icon' => 'bi-anchor', 'bg' => 'success'],
            ['label' => 'Live Fleet Count', 'value' => $stats['live_fleet_count'], 'icon' => 'bi-broadcast', 'bg' => 'success'],
            ['label' => 'Active Missions', 'value' => $stats['active_missions'], 'icon' => 'bi-flag', 'bg' => 'info'],
            ['label' => 'Completed Missions', 'value' => $stats['completed_missions'], 'icon' => 'bi-check2-circle', 'bg' => 'success'],
            ['label' => 'Pending Missions', 'value' => $stats['pending_missions'], 'icon' => 'bi-hourglass-split', 'bg' => 'warning'],
            ['label' => 'Total Users', 'value' => $stats['total_users'], 'icon' => 'bi-people', 'bg' => 'primary'],
            ['label' => 'Active Users', 'value' => $stats['active_users'], 'icon' => 'bi-person-check', 'bg' => 'success'],
            ['label' => 'Zone Completion %', 'value' => $stats['zone_completion_percent'].'%', 'icon' => 'bi-pentagon', 'bg' => 'info'],
            ['label' => 'Sea Trial Reports', 'value' => $stats['sea_trial_reports'], 'icon' => 'bi-file-earmark-spreadsheet', 'bg' => 'warning'],
            ['label' => 'Mission Documents', 'value' => $stats['generated_documents'], 'icon' => 'bi-file-earmark-pdf', 'bg' => 'primary'],
            ['label' => 'Notifications', 'value' => $stats['notifications'], 'icon' => 'bi-bell', 'bg' => 'danger'],
            ['label' => 'Questionnaire Templates', 'value' => $stats['questionnaire_templates'], 'icon' => 'bi-ui-checks', 'bg' => 'info'],
        ];
    @endphp
    @foreach ($cards as $card)
        <div class="col-6 col-md-4 col-xl-3">
            <div class="stat-card">
                <div class="stat-icon bg-{{ $card['bg'] }} bg-opacity-25 text-{{ $card['bg'] }}"><i class="bi {{ $card['icon'] }}"></i></div>
                <div class="stat-value">{{ $card['value'] }}</div>
                <div class="stat-label">{{ $card['label'] }}</div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-3 mb-3">
    <div class="col-lg-6">
        <div class="panel h-100">
            <div class="panel-header"><span class="fw-semibold">Mission Status</span></div>
            <div class="p-3"><canvas id="missionStatusChart" height="220"></canvas></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="panel h-100">
            <div class="panel-header"><span class="fw-semibold">Fleet Status</span></div>
            <div class="p-3"><canvas id="fleetStatusChart" height="220"></canvas></div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-lg-6">
        <div class="panel h-100">
            <div class="panel-header"><span class="fw-semibold">Zone Completion</span></div>
            <div class="p-3"><canvas id="zoneCompletionChart" height="240"></canvas></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="panel h-100">
            <div class="panel-header"><span class="fw-semibold">Monthly Mission Analytics</span></div>
            <div class="p-3"><canvas id="monthlyAnalyticsChart" height="240"></canvas></div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="panel h-100">
            <div class="panel-header"><span class="fw-semibold">Recent Missions</span>
                @can('missions.view')<a href="{{ route('admin.missions.index') }}" class="small text-decoration-none">View all</a>@endcan
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead><tr><th>Mission</th><th>Fleet</th><th>Commander</th><th>Status</th><th>Progress</th></tr></thead>
                    <tbody>
                    @forelse ($recentMissions as $mission)
                        <tr>
                            <td>{{ $mission->name }}</td>
                            <td>{{ $mission->fleet->name ?? '—' }}</td>
                            <td>{{ $mission->commander->name ?? '—' }}</td>
                            <td><span class="status-pill status-{{ $mission->status === 'active' ? 'progress' : ($mission->status === 'completed' ? 'completed' : 'pending') }}">{{ str_replace('_',' ',$mission->status) }}</span></td>
                            <td style="min-width:120px;">
                                <div class="progress" style="height:6px;"><div class="progress-bar" style="width:{{ $mission->progress_percent }}%"></div></div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="text-center text-navy-300 py-4">No missions yet.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="panel h-100">
            <div class="panel-header"><span class="fw-semibold">Audit Activity</span></div>
            <ul class="list-group list-group-flush">
                @forelse ($recentActivity as $activity)
                    <li class="list-group-item bg-transparent border-navy small">
                        <div class="text-heading">{{ $activity->description }}</div>
                        <div class="text-navy-300">{{ optional($activity->causer)->name ?? 'System' }} · {{ $activity->created_at->diffForHumans() }}</div>
                    </li>
                @empty
                    <li class="list-group-item bg-transparent border-navy small text-navy-300">No audit activity recorded yet.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const gridColor = 'rgba(10,34,64,.08)';
    const textColor = '#4a6180';
    Chart.defaults.color = textColor;
    Chart.defaults.borderColor = gridColor;

    new Chart(document.getElementById('missionStatusChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode(array_map(fn($k) => ucfirst(str_replace('_',' ',$k)), array_keys($missionStatusChart->toArray()))) !!},
            datasets: [{
                label: 'Missions',
                data: {!! json_encode(array_values($missionStatusChart->toArray())) !!},
                backgroundColor: '#1d5fa8',
                borderRadius: 6,
            }]
        },
        options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
    });

    new Chart(document.getElementById('fleetStatusChart'), {
        type: 'doughnut',
        data: {
            labels: {!! json_encode(array_map(fn($k) => ucfirst(str_replace('_',' ',$k)), array_keys($fleetStatusChart->toArray()))) !!},
            datasets: [{
                data: {!! json_encode(array_values($fleetStatusChart->toArray())) !!},
                backgroundColor: ['#1d5fa8', '#2ec4ec', '#2fbf71', '#f4a300', '#e63946'],
                borderColor: '#0d1c33',
            }]
        },
        options: { plugins: { legend: { position: 'bottom' } } }
    });

    new Chart(document.getElementById('zoneCompletionChart'), {
        type: 'bar',
        data: {
            labels: {!! json_encode($zoneCompletionChart->pluck('name')) !!},
            datasets: [{
                label: 'Completion %',
                data: {!! json_encode($zoneCompletionChart->pluck('percent')) !!},
                backgroundColor: '#2fbf71',
                borderRadius: 6,
            }]
        },
        options: { indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { max: 100 } } }
    });

    new Chart(document.getElementById('monthlyAnalyticsChart'), {
        type: 'line',
        data: {
            labels: {!! json_encode(array_keys($monthlyAnalytics->toArray())) !!},
            datasets: [{
                label: 'Missions Started',
                data: {!! json_encode(array_values($monthlyAnalytics->toArray())) !!},
                borderColor: '#2ec4ec',
                backgroundColor: 'rgba(46,196,236,.15)',
                fill: true,
                tension: 0.35,
            }]
        },
        options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
    });
});
</script>
@endpush