@extends('layouts.app')

@section('mobile-title', 'Dashboard')
@section('mobile-subtitle', 'Command Centre')

@section('content')
    <div class="md:hidden">
        <div class="mb-6">
            <h1 class="text-3xl font-bold">Command Centre</h1>
            <p class="mt-1 text-sm text-zinc-700">Live operational overview for site managers.</p>
        </div>

        <section class="grid grid-cols-2 gap-3">
            <div class="rounded border border-zinc-200 bg-white p-4 shadow-sm">
                <div class="flex items-center justify-between"><span class="material-symbols-outlined text-emerald-800">assignment</span><span class="rounded-full bg-zinc-100 px-2 py-1 text-xs">Active</span></div>
                <div class="mt-4 text-3xl font-bold">{{ $projectCount }}</div>
                <div class="mt-1 text-sm text-zinc-700">Total Projects</div>
            </div>
            <div class="rounded border border-zinc-200 bg-white p-4 shadow-sm">
                <div class="flex items-center justify-between"><span class="material-symbols-outlined text-emerald-800">verified_user</span><span class="rounded-full bg-emerald-100 px-2 py-1 text-xs text-emerald-900">High</span></div>
                <div class="mt-4 text-3xl font-bold">{{ $qualityCheckRate }}%</div>
                <div class="mt-1 text-sm text-zinc-700">Compliance Rate</div>
            </div>
            <div class="rounded border border-zinc-200 bg-white p-4 shadow-sm">
                <div class="flex items-center justify-between"><span class="material-symbols-outlined text-emerald-800">health_and_safety</span><span class="rounded-full bg-emerald-100 px-2 py-1 text-xs text-emerald-900">Optimal</span></div>
                <div class="mt-4 text-3xl font-bold">{{ $safetyBriefingRate }}%</div>
                <div class="mt-1 text-sm text-zinc-700">Safety Score</div>
            </div>
            <div class="rounded border border-zinc-200 bg-white p-4 shadow-sm">
                <div class="flex items-center justify-between"><span class="material-symbols-outlined text-blue-700">pending_actions</span><span class="rounded-full bg-blue-100 px-2 py-1 text-xs text-blue-900">Queue</span></div>
                <div class="mt-4 text-3xl font-bold">{{ $submittedCount }}</div>
                <div class="mt-1 text-sm text-zinc-700">Pending Approvals</div>
            </div>
        </section>

        <section class="mt-8">
            <h2 class="text-xl font-bold">Active Progress</h2>
            <div class="mt-4 space-y-4">
                @forelse ($projectAnalytics->take(2) as $project)
                    @php($completion = $project->total_reports_count > 0 ? round(($project->approved_reports_count / $project->total_reports_count) * 100) : 0)
                    <a href="{{ route('projects.show', $project) }}" class="block rounded border border-zinc-200 bg-white p-4 shadow-sm">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="font-bold">{{ $project->name }}</div>
                                <div class="mt-1 text-sm text-zinc-600">{{ $project->code }}</div>
                            </div>
                            <span class="rounded-full bg-emerald-100 px-2 py-1 text-sm text-emerald-900">Active</span>
                        </div>
                        <div class="mt-4 flex items-center justify-between text-sm"><span>Progress</span><span class="font-bold">{{ $completion }}%</span></div>
                        <div class="mt-2 h-2 overflow-hidden rounded bg-zinc-200"><div class="h-full rounded bg-emerald-800" style="width: {{ $completion }}%"></div></div>
                    </a>
                @empty
                    <div class="rounded border border-zinc-200 bg-white p-4 text-sm text-zinc-600">No active progress yet.</div>
                @endforelse
            </div>
        </section>

        <section class="mt-8">
            <h2 class="flex items-center gap-2 text-xl font-bold"><span class="material-symbols-outlined text-red-700">warning</span>Action Items</h2>
            <div class="mt-4 space-y-4">
                @forelse ($pendingApprovals->take(2) as $report)
                    <a href="{{ route('reports.show', $report) }}" class="flex gap-4 rounded border border-zinc-200 bg-white p-4 shadow-sm">
                        <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded bg-red-50 text-sm font-bold text-red-700">{{ substr($report->reference_number, 0, 2) }}</span>
                        <span class="min-w-0 flex-1">
                            <span class="flex items-start justify-between gap-2">
                                <span class="font-bold">{{ $report->reference_number }}</span>
                                <span class="rounded-full bg-red-50 px-2 py-1 text-xs font-bold text-red-700">High Priority</span>
                            </span>
                            <span class="mt-1 block text-sm font-semibold">{{ $report->project->name }}</span>
                            <span class="mt-1 block text-sm text-zinc-600">{{ $report->title }}</span>
                        </span>
                    </a>
                @empty
                    <div class="rounded border border-zinc-200 bg-white p-4 text-sm text-zinc-600">No urgent action items.</div>
                @endforelse
            </div>
        </section>

        <section class="mt-8">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold">Recent Activity</h2>
                <a href="{{ route('reports.index') }}" class="text-sm font-bold text-emerald-800">View all</a>
            </div>
            <div class="mt-4 space-y-3">
                @forelse ($latestReports->take(4) as $report)
                    <a href="{{ route('reports.show', $report) }}" class="block rounded border border-zinc-200 bg-white p-4 shadow-sm">
                        <div class="flex items-start justify-between gap-3">
                            <div class="font-bold">{{ $report->title }}</div>
                            @include('partials.status-badge', ['status' => $report->status])
                        </div>
                        <div class="mt-2 text-sm text-zinc-600">{{ $report->project->name }} · {{ $report->work_date->format('M j, Y') }}</div>
                    </a>
                @empty
                    <div class="rounded border border-zinc-200 bg-white p-4 text-sm text-zinc-600">No recent reports.</div>
                @endforelse
            </div>
        </section>
    </div>

    <div class="hidden md:block">
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-emerald-800">{{ now()->format('l, F j, Y') }}</p>
            <h1 class="mt-1 text-3xl font-bold">Dashboard Home</h1>
            <p class="mt-1 text-sm text-zinc-600">Overview of construction operations and critical metrics.</p>
        </div>
        <a href="{{ route('reports.create') }}" class="inline-flex rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-800">New report</a>
    </div>

    <form method="GET" action="{{ route('dashboard') }}" class="mb-6 grid gap-3 rounded border border-zinc-200 bg-white p-4 shadow-sm lg:grid-cols-[1fr_1fr_1fr_1fr_auto_auto_auto]">
        <input name="analytics_date_from" type="date" value="{{ request('analytics_date_from') }}" class="rounded border border-zinc-300 px-3 py-2 text-sm">
        <input name="analytics_date_to" type="date" value="{{ request('analytics_date_to') }}" class="rounded border border-zinc-300 px-3 py-2 text-sm">
        <select name="analytics_project_id" class="rounded border border-zinc-300 px-3 py-2 text-sm">
            <option value="">All projects</option>
            @foreach ($analyticsProjects as $project)
                <option value="{{ $project->id }}" @selected((string) request('analytics_project_id') === (string) $project->id)>{{ $project->name }}</option>
            @endforeach
        </select>
        <select name="analytics_technician_id" class="rounded border border-zinc-300 px-3 py-2 text-sm">
            <option value="">All technicians</option>
            @foreach ($analyticsTechnicians as $technician)
                <option value="{{ $technician->id }}" @selected((string) request('analytics_technician_id') === (string) $technician->id)>{{ $technician->name }}</option>
            @endforeach
        </select>
        <button class="rounded bg-zinc-900 px-4 py-2 text-sm font-bold text-white">Filter</button>
        @if ($user->isAdmin())
            <a href="{{ route('exports.analytics', request()->query()) }}" class="rounded border border-zinc-300 px-4 py-2 text-center text-sm font-bold text-zinc-700">Export</a>
        @endif
        <a href="{{ route('dashboard') }}" class="rounded border border-zinc-300 px-4 py-2 text-center text-sm font-bold text-zinc-700">Reset</a>
    </form>

    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Total active projects</div>
                <span class="material-symbols-outlined text-emerald-800">domain</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $projectCount }}</div>
            <div class="mt-1 text-sm text-emerald-800">Operational portfolio</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Overall safety score</div>
                <span class="material-symbols-outlined text-emerald-800">verified</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $safetyBriefingRate }}%</div>
            <div class="mt-1 text-sm text-zinc-600">Target 95%+</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Pending approvals</div>
                <span class="material-symbols-outlined text-red-700">pending_actions</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $submittedCount }}</div>
            <div class="mt-1 text-sm text-red-700">Action Required</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Approved reports</div>
                <span class="material-symbols-outlined text-emerald-800">task_alt</span>
            </div>
            <div class="mt-3 text-3xl font-bold">{{ $approvedCount }}</div>
            <div class="mt-1 text-sm text-zinc-600">{{ $draftCount }} drafts in progress</div>
        </div>
    </section>

    <section class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="text-sm font-semibold text-zinc-600">Reports in view</div>
            <div class="mt-3 text-3xl font-bold">{{ $reportsInViewCount }}</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="text-sm font-semibold text-zinc-600">Safety briefing rate</div>
            <div class="mt-3 text-3xl font-bold">{{ $safetyBriefingRate }}%</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="text-sm font-semibold text-zinc-600">Quality check rate</div>
            <div class="mt-3 text-3xl font-bold">{{ $qualityCheckRate }}%</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="text-sm font-semibold text-zinc-600">Avg approval time</div>
            <div class="mt-3 text-3xl font-bold">{{ $averageApprovalHours === null ? 'N/A' : $averageApprovalHours.'h' }}</div>
        </div>
    </section>

    <section class="mt-6 grid gap-4 sm:grid-cols-3">
        <a href="{{ route('reports.index') }}" class="rounded border border-zinc-200 bg-white p-5 shadow-sm hover:bg-zinc-50">
            <div class="text-sm font-semibold text-zinc-600">Incidents reported</div>
            <div class="mt-3 text-3xl font-bold text-red-700">{{ $incidentCount }}</div>
        </a>
        <a href="{{ route('reports.index') }}" class="rounded border border-zinc-200 bg-white p-5 shadow-sm hover:bg-zinc-50">
            <div class="text-sm font-semibold text-zinc-600">Delays reported</div>
            <div class="mt-3 text-3xl font-bold text-amber-700">{{ $delayCount }}</div>
        </a>
        <a href="{{ route('reports.index') }}" class="rounded border border-zinc-200 bg-white p-5 shadow-sm hover:bg-zinc-50">
            <div class="text-sm font-semibold text-zinc-600">Snag items reported</div>
            <div class="mt-3 text-3xl font-bold text-zinc-800">{{ $snagCount }}</div>
        </a>
    </section>

    @if ($user->isSupervisor() || $user->isAdmin())
        <section class="mt-8">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-lg font-bold">Awaiting review</h2>
                <a href="{{ route('reports.index', ['status' => 'submitted']) }}" class="text-sm font-semibold text-emerald-800">View submitted</a>
            </div>
            <div class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="divide-y divide-zinc-100">
                    @forelse ($pendingApprovals as $report)
                        <a href="{{ route('reports.show', $report) }}" class="grid gap-2 px-4 py-4 hover:bg-zinc-50 sm:grid-cols-[1fr_auto] sm:items-center">
                            <div>
                                <div class="font-semibold">{{ $report->title }}</div>
                                <div class="mt-1 text-sm text-zinc-600">{{ $report->reference_number }} · {{ $report->project->name }} · {{ $report->technician->name }}</div>
                            </div>
                            @include('partials.status-badge', ['status' => $report->status])
                        </a>
                    @empty
                        <div class="px-4 py-8 text-sm text-zinc-600">No reports are waiting for review.</div>
                    @endforelse
                </div>
            </div>
        </section>
    @endif

    @if ($user->isTechnician())
        <section class="mt-8">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-lg font-bold">Rejected reports</h2>
                <a href="{{ route('reports.index', ['status' => 'rejected']) }}" class="text-sm font-semibold text-emerald-800">View rejected</a>
            </div>
            <div class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="divide-y divide-zinc-100">
                    @forelse ($rejectedReports as $report)
                        <a href="{{ route('reports.show', $report) }}" class="grid gap-2 px-4 py-4 hover:bg-zinc-50 sm:grid-cols-[1fr_auto] sm:items-center">
                            <div>
                                <div class="font-semibold">{{ $report->title }}</div>
                                <div class="mt-1 text-sm text-zinc-600">{{ $report->reference_number }} · {{ $report->project->name }}</div>
                            </div>
                            @include('partials.status-badge', ['status' => $report->status])
                        </a>
                    @empty
                        <div class="px-4 py-8 text-sm text-zinc-600">No rejected reports need changes.</div>
                    @endforelse
                </div>
            </div>
        </section>
    @endif

    <div class="mt-8 grid gap-6 lg:grid-cols-[1fr_360px]">
        <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-lg font-bold">Active Project Highlights</h2>
                <a href="{{ route('projects.index') }}" class="text-sm font-semibold text-emerald-800">View All Projects</a>
            </div>
            <div class="grid gap-4 md:grid-cols-3">
                @forelse ($projectAnalytics->take(3) as $project)
                    @php($completion = $project->total_reports_count > 0 ? round(($project->approved_reports_count / $project->total_reports_count) * 100) : 0)
                    <a href="{{ route('projects.show', $project) }}" class="rounded border border-zinc-200 bg-zinc-50 p-4 hover:bg-zinc-100">
                        <div class="text-lg font-bold">{{ $project->name }}</div>
                        <div class="mt-1 text-sm text-zinc-600">{{ $project->code }}</div>
                        <div class="mt-5 flex items-center justify-between text-sm"><span>Progress</span><span>{{ $completion }}%</span></div>
                        <div class="mt-2 h-2 overflow-hidden rounded bg-zinc-200"><div class="h-full rounded bg-emerald-800" style="width: {{ $completion }}%"></div></div>
                        <div class="mt-3 text-sm font-bold text-zinc-700">{{ $completion }}% approved</div>
                    </a>
                @empty
                    <div class="rounded border border-zinc-200 bg-zinc-50 p-4 text-sm text-zinc-600 md:col-span-3">No project activity yet.</div>
                @endforelse
            </div>
        </section>

        <section class="rounded border border-red-200 bg-white p-5 shadow-sm">
            <h2 class="flex items-center gap-2 text-lg font-bold"><span class="material-symbols-outlined text-red-700">warning</span>Compliance & Safety Alerts</h2>
            <div class="mt-4 space-y-3">
                <a href="{{ route('reports.index', ['status' => 'submitted']) }}" class="block rounded border border-red-100 bg-red-50 p-4">
                    <div class="font-bold text-red-700">Pending review queue</div>
                    <p class="mt-1 text-sm text-zinc-700">{{ $submittedCount }} report{{ $submittedCount === 1 ? '' : 's' }} waiting for approval.</p>
                </a>
                <a href="{{ route('reports.index') }}" class="block rounded border border-amber-100 bg-amber-50 p-4">
                    <div class="font-bold text-amber-800">Site exceptions</div>
                    <p class="mt-1 text-sm text-zinc-700">{{ $incidentCount + $delayCount + $snagCount }} incident, delay, or snag flags in view.</p>
                </a>
            </div>
        </section>
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-[1fr_0.8fr]">
        <section>
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-lg font-bold">Latest reports</h2>
                <a href="{{ route('reports.index') }}" class="text-sm font-semibold text-emerald-800">View all</a>
            </div>
            <div class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="divide-y divide-zinc-100">
                    @forelse ($latestReports as $report)
                        <a href="{{ route('reports.show', $report) }}" class="grid gap-2 px-4 py-4 hover:bg-zinc-50 sm:grid-cols-[1fr_auto] sm:items-center">
                            <div>
                                <div class="font-semibold">{{ $report->title }}</div>
                                <div class="mt-1 text-sm text-zinc-600">{{ $report->reference_number }} · {{ $report->project->name }} · {{ $report->technician->name }} · {{ $report->work_date->format('M j, Y') }}</div>
                            </div>
                            @include('partials.status-badge', ['status' => $report->status])
                        </a>
                    @empty
                        <div class="px-4 py-8 text-sm text-zinc-600">No reports yet.</div>
                    @endforelse
                </div>
            </div>
        </section>

        <section>
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-lg font-bold">Active projects</h2>
                @if (auth()->user()->isAdmin())
                    <a href="{{ route('projects.create') }}" class="text-sm font-semibold text-emerald-800">Add project</a>
                @endif
            </div>
            <div class="grid gap-3">
                @forelse ($activeProjects as $project)
                    <a href="{{ route('projects.show', $project) }}" class="rounded border border-zinc-200 bg-white p-4 shadow-sm hover:bg-zinc-50">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <div class="font-semibold">{{ $project->name }}</div>
                                <div class="mt-1 text-sm text-zinc-600">{{ $project->code }} · {{ $project->location }}</div>
                            </div>
                            <div class="text-sm font-bold text-zinc-700">{{ $project->reports_count }}</div>
                        </div>
                    </a>
                @empty
                    <div class="rounded border border-zinc-200 bg-white p-4 text-sm text-zinc-600 shadow-sm">No active projects.</div>
                @endforelse
            </div>
        </section>
    </div>

    @if ($user->isAdmin())
        <section class="mt-8">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-lg font-bold">Recent audit activity</h2>
                <a href="{{ route('audit-logs.index') }}" class="text-sm font-semibold text-emerald-800">View audit</a>
            </div>
            <div class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="divide-y divide-zinc-100">
                    @forelse ($recentAuditLogs as $auditLog)
                        <div class="px-4 py-4">
                            <div class="font-semibold">{{ $auditLog->description }}</div>
                            <div class="mt-1 text-sm text-zinc-600">{{ $auditLog->action }} · {{ $auditLog->user?->name ?: 'System' }} · {{ $auditLog->created_at->diffForHumans() }}</div>
                        </div>
                    @empty
                        <div class="px-4 py-8 text-sm text-zinc-600">No audit activity yet.</div>
                    @endforelse
                </div>
            </div>
        </section>
    @endif
    </div>
@endsection