@extends('layouts.app')

@section('mobile-title', $project->name)
@section('mobile-subtitle', $project->code.' · '.$project->location)
@section('mobile-back', route('projects.index'))
@if ($project->status === 'active')
    @section('mobile-action-url', route('reports.create', ['project_id' => $project->id]))
    @section('mobile-action-icon', 'add')
    @section('mobile-action-label', 'New report')
@endif

@section('content')
    @php
        $reports = $project->reports->sortByDesc('work_date');
        $totalReports = $project->reports->count();
        $approvedReports = $project->reports->where('status', \App\Models\Report::STATUS_APPROVED)->count();
        $submittedReports = $project->reports->where('status', \App\Models\Report::STATUS_SUBMITTED)->count();
        $completion = $totalReports > 0 ? round(($approvedReports / $totalReports) * 100) : 0;
        $lead = $project->supervisors->first() ?: $project->technicians->first();
        $galleryPhotos = $reports
            ->flatMap(fn ($report) => $report->photos->map(fn ($photo) => ['photo' => $photo, 'report' => $report]))
            ->take(8);
        $featuredPhoto = $galleryPhotos->first();
    @endphp

    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <div class="mb-2 flex flex-wrap items-center gap-2">
                <span class="text-sm text-zinc-600">{{ $project->client_name }}</span>
                @include('partials.status-badge', ['status' => $project->status])
            </div>
            <h1 class="text-3xl font-bold">{{ $project->name }}</h1>
            <p class="mt-1 text-sm text-zinc-600">ID: {{ $project->code }} · {{ $project->location }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @if (auth()->user()->isAdmin())
                <a href="{{ route('exports.projects', ['q' => $project->code]) }}" class="inline-flex rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Export Data</a>
                <a href="{{ route('projects.edit', $project) }}" class="inline-flex rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Edit Project</a>
                @if ($project->status !== 'archived')
                    <form method="POST" action="{{ route('projects.archive', $project) }}">
                        @csrf
                        <button class="rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Archive</button>
                    </form>
                @endif
                @can('delete', $project)
                    <form method="POST" action="{{ route('projects.destroy', $project) }}" onsubmit="return confirm('Delete this project permanently? Projects with reports cannot be deleted.')">
                        @csrf
                        @method('DELETE')
                        <button class="rounded border border-red-200 px-4 py-2.5 text-sm font-bold text-red-700">Delete</button>
                    </form>
                @endcan
            @endif
            @if ($project->status === 'active')
                <a href="{{ route('reports.create', ['project_id' => $project->id]) }}" 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>
            @endif
        </div>
    </div>

    <section class="mb-6 overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
        <div class="grid gap-0 lg:grid-cols-[1.25fr_1fr]">
            @if ($featuredPhoto)
                <a href="{{ route('reports.photos.show', [$featuredPhoto['report'], $featuredPhoto['photo']]) }}" target="_blank" class="group relative block min-h-[260px] bg-zinc-900">
                    <img src="{{ route('reports.photos.thumbnail', [$featuredPhoto['report'], $featuredPhoto['photo']]) }}" alt="{{ $featuredPhoto['photo']->original_name }}" class="h-full min-h-[260px] w-full object-cover transition duration-300 group-hover:scale-[1.02]">
                    <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 to-transparent p-5 text-white">
                        <div class="text-xs font-bold uppercase">Latest site photo</div>
                        <div class="mt-1 text-xl font-bold">{{ $featuredPhoto['report']->title }}</div>
                        <div class="mt-1 text-sm text-white/80">{{ $featuredPhoto['report']->work_date->format('M j, Y') }} · {{ $featuredPhoto['photo']->caption ?: $featuredPhoto['photo']->original_name }}</div>
                    </div>
                </a>
            @else
                <div class="flex min-h-[260px] items-center justify-center bg-zinc-100 p-6">
                    <div class="max-w-sm text-center">
                        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded bg-emerald-100 text-emerald-900">
                            <span class="material-symbols-outlined">photo_camera</span>
                        </div>
                        <h2 class="mt-4 text-xl font-bold">No project photos yet</h2>
                        <p class="mt-2 text-sm text-zinc-600">Photos uploaded through field reports will appear here automatically.</p>
                    </div>
                </div>
            @endif

            <div class="p-5">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-bold">Project Gallery</h2>
                        <p class="mt-1 text-sm text-zinc-600">{{ $galleryPhotos->count() }} recent photo{{ $galleryPhotos->count() === 1 ? '' : 's' }} from field reports</p>
                    </div>
                    @if ($project->status === 'active')
                        <a href="{{ route('reports.create', ['project_id' => $project->id]) }}" class="hidden rounded border border-zinc-300 px-3 py-2 text-sm font-bold text-zinc-700 sm:inline-flex">Add report</a>
                    @endif
                </div>

                <div class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-2">
                    @forelse ($galleryPhotos->skip($featuredPhoto ? 1 : 0)->take(6) as $item)
                        <a href="{{ route('reports.photos.show', [$item['report'], $item['photo']]) }}" target="_blank" class="group overflow-hidden rounded border border-zinc-200 bg-zinc-100">
                            <img src="{{ route('reports.photos.thumbnail', [$item['report'], $item['photo']]) }}" alt="{{ $item['photo']->original_name }}" class="aspect-[4/3] w-full object-cover transition duration-300 group-hover:scale-105">
                            <div class="border-t border-zinc-200 bg-white px-3 py-2">
                                <div class="truncate text-xs font-bold text-zinc-900">{{ $item['report']->reference_number }}</div>
                                <div class="truncate text-xs text-zinc-600">{{ $item['photo']->caption ?: $item['report']->work_date->format('M j') }}</div>
                            </div>
                        </a>
                    @empty
                        <div class="col-span-full rounded border border-dashed border-zinc-300 bg-zinc-50 p-4 text-sm text-zinc-600">Upload photos on a site report to build this gallery.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <section class="mb-6 grid gap-4 md:grid-cols-4">
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Timeline</div>
                <span class="material-symbols-outlined text-emerald-800">calendar_month</span>
            </div>
            <div class="mt-4 text-2xl font-bold">{{ $completion }}% <span class="text-base font-medium">complete</span></div>
            <div class="mt-3 h-2 overflow-hidden rounded bg-zinc-100">
                <div class="h-full rounded bg-emerald-800" style="width: {{ $completion }}%"></div>
            </div>
            <div class="mt-3 text-sm text-zinc-600">{{ optional($project->ends_on)->format('M j') ?: 'No handover date' }} handover</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Compliance</div>
                <span class="material-symbols-outlined text-emerald-800">verified</span>
            </div>
            <div class="mt-4 text-2xl font-bold">{{ $approvedReports }}/{{ max($totalReports, 1) }} <span class="rounded bg-emerald-50 px-2 py-1 text-sm text-emerald-900">{{ $completion }}%</span></div>
            <div class="mt-3 text-sm text-zinc-600">Reports approved</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Safety</div>
                <span class="material-symbols-outlined text-emerald-800">health_and_safety</span>
            </div>
            <div class="mt-4 text-2xl font-bold">{{ max(1, 14 - $submittedReports) }} Days</div>
            <div class="mt-3 text-sm text-emerald-800">Incident free estimate</div>
        </div>
        <div class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
            <div class="flex justify-between gap-3">
                <div class="text-xs font-bold uppercase text-zinc-600">Activity</div>
                <span class="material-symbols-outlined text-emerald-800">analytics</span>
            </div>
            <div class="mt-4 text-2xl font-bold">{{ $totalReports }}</div>
            <div class="mt-3 text-sm text-zinc-600">Site reports logged</div>
        </div>
    </section>

    <div class="grid gap-6 lg:grid-cols-[1fr_360px]">
        <section class="space-y-6">
            <div class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                <div class="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-5 py-3">
                    <h2 class="text-lg font-bold">Recent Field Reports</h2>
                    <a href="{{ route('reports.index', ['project_id' => $project->id]) }}" class="text-sm font-semibold text-emerald-800">View All</a>
                </div>
                <div class="divide-y divide-zinc-100 md:hidden">
                    @forelse ($reports->take(5) as $report)
                        <a href="{{ route('reports.show', $report) }}" class="block p-4">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <div class="font-bold text-zinc-950">{{ $report->reference_number }}</div>
                                    <div class="mt-1 text-sm text-zinc-600">{{ $report->work_date->format('M j, Y') }} · {{ $report->technician->name }}</div>
                                </div>
                                @include('partials.status-badge', ['status' => $report->status])
                            </div>
                            <div class="mt-3 text-sm text-zinc-700">{{ $report->title }}</div>
                        </a>
                    @empty
                        <div class="p-4 text-sm text-zinc-600">No reports for this project yet.</div>
                    @endforelse
                </div>

                <div class="hidden overflow-x-auto md:block">
                    <table class="min-w-full divide-y divide-zinc-200 text-sm">
                        <thead class="bg-zinc-50 text-left text-xs font-bold uppercase text-zinc-600">
                            <tr>
                                <th class="px-5 py-3">Report ID</th>
                                <th class="px-5 py-3">Date</th>
                                <th class="px-5 py-3">Inspector</th>
                                <th class="px-5 py-3">Status</th>
                                <th class="px-5 py-3 text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-zinc-100 bg-white">
                            @forelse ($reports->take(5) as $report)
                                <tr>
                                    <td class="px-5 py-4 font-semibold text-zinc-900">{{ $report->reference_number }}</td>
                                    <td class="px-5 py-4">{{ $report->work_date->format('M j, Y') }}</td>
                                    <td class="px-5 py-4">{{ $report->technician->name }}</td>
                                    <td class="px-5 py-4">@include('partials.status-badge', ['status' => $report->status])</td>
                                    <td class="px-5 py-4 text-right"><a href="{{ route('reports.show', $report) }}" class="font-semibold text-emerald-800">View</a></td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="px-5 py-8 text-sm text-zinc-600">No reports for this project yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Resource Allocation</h2>
                <div class="mt-4 space-y-4">
                    @foreach ([['Structural Team', 24, 25, 'bg-emerald-800'], ['Electrical Team', 12, 15, 'bg-blue-700'], ['Plumbing Team', 8, 8, 'bg-emerald-800']] as [$label, $present, $total, $color])
                        <div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="font-semibold">{{ $label }}</span>
                                <span>{{ $present }} / {{ $total }} Present</span>
                            </div>
                            <div class="mt-2 h-2 overflow-hidden rounded bg-zinc-100">
                                <div class="h-full rounded {{ $color }}" style="width: {{ round(($present / $total) * 100) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        </section>

        <aside class="space-y-6">
            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Lead Contact</h2>
                <div class="mt-4 flex items-center gap-3">
                    <div class="flex h-12 w-12 items-center justify-center rounded bg-emerald-100 text-sm font-bold text-emerald-900">{{ $lead ? collect(explode(' ', $lead->name))->map(fn ($part) => substr($part, 0, 1))->take(2)->join('') : 'NA' }}</div>
                    <div>
                        <div class="font-semibold">{{ $lead?->name ?: 'No lead assigned' }}</div>
                        <div class="text-sm text-zinc-600">{{ $lead?->email ?: 'Assign a supervisor or technician' }}</div>
                    </div>
                </div>
            </section>

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Key Stakeholders</h2>
                <div class="mt-4 space-y-3">
                    @forelse ($project->supervisors->merge($project->technicians)->take(6) as $member)
                        <div class="flex items-center gap-3">
                            <div class="flex h-9 w-9 items-center justify-center rounded bg-zinc-100 text-xs font-bold text-zinc-700">{{ collect(explode(' ', $member->name))->map(fn ($part) => substr($part, 0, 1))->take(2)->join('') }}</div>
                            <div>
                                <div class="text-sm font-semibold">{{ $member->name }}</div>
                                <div class="text-xs text-zinc-600">{{ ucfirst($member->role) }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="text-sm text-zinc-600">No stakeholders assigned.</div>
                    @endforelse
                </div>
            </section>

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Project Metadata</h2>
                <dl class="mt-4 space-y-3 text-sm">
                    <div class="flex justify-between gap-3 border-b border-zinc-100 pb-3"><dt class="text-zinc-600">Started</dt><dd class="font-semibold">{{ optional($project->starts_on)->format('M j, Y') ?: 'Not set' }}</dd></div>
                    <div class="flex justify-between gap-3 border-b border-zinc-100 pb-3"><dt class="text-zinc-600">Handover</dt><dd class="font-semibold">{{ optional($project->ends_on)->format('M j, Y') ?: 'Not set' }}</dd></div>
                    <div class="flex justify-between gap-3"><dt class="text-zinc-600">Health Status</dt><dd class="rounded bg-emerald-50 px-2 py-1 font-semibold text-emerald-900">On Track</dd></div>
                </dl>
            </section>
        </aside>
    </div>
@endsection