@extends('layouts.app')

@section('title', __('Reports'))
@section('active', 'reports')
@section('page_eyebrow', 'Reports')
@section('page_heading', 'Inspection reports')

@section('content')
  @php
    $statusClasses = [
      'ready' => 'bg-emerald-50 text-emerald-600',
      'draft' => 'bg-amber-50 text-amber-600',
      'pending' => 'bg-gray-100 text-gray-600',
    ];
    $activeCollection = $collections->firstWhere('id', (int) $filters['collection_id']);
  @endphp

  <div class="rounded-2xl border border-[#c7d3fc] bg-[#eff3fe] p-6 lg:p-8">
    <div class="flex flex-col gap-5">
      <div>
        <p class="text-xs font-medium text-[#4f6ef7]">{{ __('Dynamic report queue') }} · {{ __('Workspace') }}: {{ $activeWorkspace->name }}</p>
        <h2 class="mt-2 text-2xl font-bold tracking-tight lg:text-3xl"><span data-live="readyReports">{{ $stats['ready'] }}</span> {{ __('reports ready to export.') }}</h2>
        <p class="mt-2 max-w-2xl text-sm leading-6 text-gray-500">
          {{ $activeCollection ? __('Filtered to collection: :name', ['name' => $activeCollection->displayName()]) : __('Track generated inspection reports, draft summaries, and pending documents from live report records.') }}
        </p>
      </div>

      <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
        @foreach ($workspaces as $workspace)
          <a href="{{ route('reports.index', ['workspace_id' => $workspace->id]) }}" data-spa-link class="rounded-xl border p-4 transition-colors {{ (int) $filters['workspace_id'] === $workspace->id ? 'border-[#4f6ef7] bg-white shadow-sm' : 'border-[#c7d3fc]/70 bg-white/60 hover:bg-white' }}">
            <div class="flex items-center justify-between gap-3">
              <p class="truncate text-sm font-semibold text-gray-900">{{ $workspace->name }}</p>
              <span class="rounded-full bg-[#eff3fe] px-2 py-0.5 text-[11px] font-medium text-[#4f6ef7]">{{ $workspace->collections_count }}</span>
            </div>
            <p class="mt-2 text-xs text-gray-500">{{ __('Ready reports') }}</p>
            <p class="mt-1 text-lg font-bold">{{ $workspace->ready_reports_count }} / {{ $workspace->reports_count }}</p>
          </a>
        @endforeach
      </div>

      <form id="reportFilterForm" method="GET" action="{{ route('reports.index') }}" class="grid w-full gap-3 md:grid-cols-2 xl:grid-cols-[1fr_220px_220px_160px_auto]">
        <input name="search" value="{{ $filters['search'] }}" type="search" placeholder="{{ __('Search report...') }}" class="h-11 rounded-xl border border-[#c7d3fc] bg-white px-4 text-sm outline-none focus:border-[#4f6ef7] focus:ring-2 focus:ring-[#4f6ef7]/20">
        <select id="reportWorkspaceSelect" name="workspace_id" class="h-11 rounded-xl border border-[#c7d3fc] bg-white px-4 text-sm outline-none focus:border-[#4f6ef7] focus:ring-2 focus:ring-[#4f6ef7]/20">
          @foreach ($workspaces as $workspace)
            <option value="{{ $workspace->id }}" @selected((int) $filters['workspace_id'] === $workspace->id)>{{ $workspace->name }}</option>
          @endforeach
        </select>
        <select id="reportCollectionSelect" name="collection_id" class="h-11 rounded-xl border border-[#c7d3fc] bg-white px-4 text-sm outline-none focus:border-[#4f6ef7] focus:ring-2 focus:ring-[#4f6ef7]/20">
          <option value="">{{ __('All collections') }}</option>
          @foreach ($collections as $collection)
            <option value="{{ $collection->id }}" @selected((int) $filters['collection_id'] === $collection->id)>{{ $collection->displayName() }}</option>
          @endforeach
        </select>
        <select name="status" class="h-11 rounded-xl border border-[#c7d3fc] bg-white px-4 text-sm outline-none focus:border-[#4f6ef7] focus:ring-2 focus:ring-[#4f6ef7]/20">
          <option value="">{{ __('All status') }}</option>
          @foreach (['ready', 'draft', 'pending'] as $status)
            <option value="{{ $status }}" @selected($filters['status'] === $status)>{{ Str::headline($status) }}</option>
          @endforeach
        </select>
        <button type="submit" class="h-11 rounded-xl bg-[#4f6ef7] px-4 text-sm font-medium text-white shadow-sm hover:bg-[#3d5ce0]">{{ __('Filter') }}</button>
      </form>
    </div>
  </div>

  <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="panel rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
      <p class="text-sm font-medium text-gray-500">{{ __('Total Reports') }}</p>
      <p class="mt-2 text-2xl font-bold tracking-tight">{{ $stats['total'] }}</p>
      <p class="mt-2 text-xs font-medium text-[#4f6ef7]">{{ __('From inspection reports') }}</p>
    </div>
    <div class="panel rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
      <p class="text-sm font-medium text-gray-500">{{ __('Ready') }}</p>
      <p class="mt-2 text-2xl font-bold tracking-tight" data-live="readyReports">{{ $stats['ready'] }}</p>
      <p class="mt-2 text-xs font-medium text-emerald-500">{{ __('Available now') }}</p>
    </div>
    <div class="panel rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
      <p class="text-sm font-medium text-gray-500">{{ __('Draft') }}</p>
      <p class="mt-2 text-2xl font-bold tracking-tight" data-live="draftReports">{{ $stats['draft'] }}</p>
      <p class="mt-2 text-xs font-medium text-amber-500">{{ __('Needs review') }}</p>
    </div>
    <div class="panel rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
      <p class="text-sm font-medium text-gray-500">{{ __('Pending') }}</p>
      <p class="mt-2 text-2xl font-bold tracking-tight" data-live="pendingReports">{{ $stats['pending'] }}</p>
      <p class="mt-2 text-xs font-medium text-gray-400">{{ __('Waiting on scan') }}</p>
    </div>
  </div>

  <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
    <div class="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
      <h3 class="text-base font-semibold tracking-tight">{{ __('Report list') }}</h3>
      <p class="text-sm text-gray-400">{{ __(':count matched', ['count' => $reports->total()]) }}</p>
    </div>

    <div class="overflow-x-auto">
      <table class="w-full text-left text-sm">
        <thead class="text-xs uppercase text-gray-400">
          <tr>
            <th class="px-3 py-3">{{ __('Report') }}</th>
            <th class="px-3 py-3">{{ __('Collection') }}</th>
            <th class="px-3 py-3">{{ __('Property') }}</th>
            <th class="px-3 py-3">{{ __('Status') }}</th>
            <th class="px-3 py-3">{{ __('Findings') }}</th>
            <th class="px-3 py-3">{{ __('Published') }}</th>
            <th class="px-3 py-3">{{ __('Summary') }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          @forelse ($reports as $report)
            <tr>
              <td class="px-3 py-3">
                <a href="{{ route('reports.show', $report) }}" data-spa-link class="font-medium text-[#4f6ef7] hover:text-[#3d5ce0]">{{ $report->report_number }}</a>
              </td>
              <td class="px-3 py-3">
                <p class="font-medium">{{ $report->inspection->collection?->displayName() ?? __('Unbatched') }}</p>
                <p class="mt-0.5 text-xs text-gray-400">{{ $report->inspection->collection?->workspace?->name ?? $activeWorkspace->name }}</p>
              </td>
              <td class="px-3 py-3">
                <p class="font-medium">{{ $report->inspection->property_name }}</p>
                <p class="mt-0.5 text-xs text-gray-400">{{ $report->inspection->property_address }}</p>
              </td>
              <td class="px-3 py-3">
                <span class="rounded-lg px-2 py-1 text-xs font-medium {{ $statusClasses[$report->status] ?? 'bg-gray-100 text-gray-600' }}">
                  {{ Str::headline($report->status) }}
                </span>
              </td>
              <td class="px-3 py-3">{{ $report->inspection->damageFindings->count() }}</td>
              <td class="px-3 py-3">{{ $report->published_at?->format('M d, Y') ?? '-' }}</td>
              <td class="max-w-xs px-3 py-3 text-gray-500">{{ Str::limit($report->summary ?? 'No summary yet.', 72) }}</td>
            </tr>
          @empty
            <tr>
              <td colspan="7" class="px-3 py-10 text-center text-sm text-gray-400">{{ __('No reports match the current filters.') }}</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div class="mt-5">
      {{ $reports->links() }}
    </div>
  </div>

  <div class="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h3 class="text-base font-semibold">{{ __('Report Actions') }}</h3>
        <p class="text-sm text-gray-400">{{ __('Live synced at') }} <span data-live-updated-at>--:--:--</span></p>
      </div>
      <button type="button" onclick="showPageToast('Report queue refreshed.')" class="rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">{{ __('Refresh Queue') }}</button>
    </div>
  </div>
@endsection

@push('scripts')
<script data-page-script>
  function showPageToast(message) {
    const toast = document.createElement('div');
    toast.className = 'fixed bottom-6 right-6 z-[60] rounded-xl bg-gray-900 px-4 py-3 text-sm text-white shadow-xl';
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 2500);
  }

  document.getElementById('reportWorkspaceSelect')?.addEventListener('change', () => {
    const collection = document.getElementById('reportCollectionSelect');
    if (collection) collection.value = '';
    document.getElementById('reportFilterForm')?.submit();
  });
</script>
@endpush
