@extends('layouts.app')

@section('title', 'Maintenance Backlog & MTTR')
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Maintenance Backlog & MTTR')

@section('content')
@php
    $prioBadge = [
        'urgent' => 'bg-red-50 text-red-600 border-red-200', 'high' => 'bg-orange-50 text-orange-600 border-orange-200',
        'normal' => 'bg-teal-50 text-teal-700 border-teal-200', 'low' => 'bg-gray-50 text-gray-500 border-gray-200',
    ];
    $statusBadge = [
        'open' => 'bg-red-50 text-red-600 border-red-200', 'in_progress' => 'bg-amber-50 text-amber-700 border-amber-200',
    ];
    $fmtHours = fn($h) => $h === null ? '—' : ($h >= 48 ? round($h / 24, 1) . 'd' : $h . 'h');
@endphp

@include('reports._filter', [
    'active' => 'reports.maintenance-backlog', 'mode' => 'range', 'from' => $from, 'to' => $to,
    'title' => 'Maintenance Backlog & MTTR',
    'subtitle' => 'Live backlog · resolve times for ' . \Carbon\Carbon::parse($from)->format('M j') . ' – ' . \Carbon\Carbon::parse($to)->format('M j, Y'),
])

{{-- Summary tiles --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Open Backlog</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ $openCount + $inProgressCount }}</p>
        <p class="text-gray-400 text-xs mt-1">{{ $openCount }} open · {{ $inProgressCount }} in progress</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Overdue</p>
        <p class="font-bold text-2xl mt-1 {{ $overdueCount > 0 ? 'text-red-600' : 'text-gray-800' }}">{{ $overdueCount }}</p>
        <p class="text-gray-400 text-xs mt-1">past target by priority</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Oldest Open</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ $oldestAge }}<span class="text-base font-semibold text-gray-400">d</span></p>
        <p class="text-gray-400 text-xs mt-1">days since reported</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Avg Resolve (MTTR)</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">{{ $fmtHours($mttrHours) }}</p>
        <p class="text-gray-400 text-xs mt-1">{{ $resolvedCount }} resolved in range</p>
    </div>
</div>

{{-- Backlog --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden mb-5">
    <div class="px-5 py-4 border-b border-gray-100">
        <h2 class="text-sm font-semibold text-gray-700">Open Backlog</h2>
        <p class="text-xs text-gray-400 mt-0.5">Urgent first, then oldest · overdue rows highlighted</p>
    </div>
    @if($backlogRows->isEmpty())
    <p class="px-5 py-10 text-center text-gray-300 text-sm">No open work orders — backlog is clear. 🔧</p>
    @else
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[760px]">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Location</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Category</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Priority</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                    <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Issue</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Age</th>
                </tr>
            </thead>
            <tbody>
                @foreach($backlogRows as $r)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors {{ $r['overdue'] ? 'bg-red-50/30' : '' }}">
                    <td class="px-5 py-3 font-medium text-gray-700">{{ $r['room_no'] ? 'Room ' . $r['room_no'] : ($r['location'] ?: 'Common area') }}</td>
                    <td class="px-4 py-3 text-gray-600">{{ $r['category'] }}</td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border-[0.5px] {{ $prioBadge[$r['priority']] ?? 'bg-gray-50 text-gray-500 border-gray-200' }}">{{ ucfirst($r['priority']) }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border-[0.5px] {{ $statusBadge[$r['status']] ?? 'bg-gray-50 text-gray-500 border-gray-200' }}">{{ \Illuminate\Support\Str::headline($r['status']) }}</span>
                    </td>
                    <td class="px-4 py-3 text-gray-500 text-xs max-w-[240px] truncate">{{ $r['description'] }}</td>
                    <td class="px-5 py-3 text-right">
                        <span class="font-semibold {{ $r['overdue'] ? 'text-red-600' : 'text-gray-700' }}">{{ $r['age_days'] }}d</span>
                        @if($r['overdue'])<span class="block text-[9px] font-bold text-red-500 uppercase tracking-wider">Overdue</span>@endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>

<div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
    {{-- Backlog by priority + category --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100"><h2 class="text-sm font-semibold text-gray-700">Backlog Breakdown</h2></div>
        <div class="grid grid-cols-2 divide-x divide-gray-50">
            <div class="p-4">
                <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-2">By Priority</p>
                @forelse($byPriority as $prio => $count)
                <div class="flex items-center justify-between py-1">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold border-[0.5px] {{ $prioBadge[$prio] ?? 'bg-gray-50 text-gray-500 border-gray-200' }}">{{ ucfirst($prio) }}</span>
                    <span class="text-sm font-semibold text-gray-700">{{ $count }}</span>
                </div>
                @empty
                <p class="text-gray-300 text-xs">—</p>
                @endforelse
            </div>
            <div class="p-4">
                <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-2">By Category</p>
                @forelse($byCategory as $cat => $count)
                <div class="flex items-center justify-between py-1">
                    <span class="text-xs text-gray-600">{{ $cat }}</span>
                    <span class="text-sm font-semibold text-gray-700">{{ $count }}</span>
                </div>
                @empty
                <p class="text-gray-300 text-xs">—</p>
                @endforelse
            </div>
        </div>
    </div>

    {{-- MTTR by category --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100">
            <h2 class="text-sm font-semibold text-gray-700">Resolve Time by Category</h2>
            <p class="text-xs text-gray-400 mt-0.5">Resolved in the selected range</p>
        </div>
        @if($mttrByCategory->isEmpty())
        <p class="px-5 py-8 text-center text-gray-300 text-sm">No work orders resolved in this range.</p>
        @else
        <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Category</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Resolved</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Avg Time</th>
                </tr>
            </thead>
            <tbody>
                @foreach($mttrByCategory as $cat => $m)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }}">
                    <td class="px-5 py-2.5 font-medium text-gray-700">{{ $cat }}</td>
                    <td class="px-4 py-2.5 text-right text-gray-600">{{ $m['count'] }}</td>
                    <td class="px-5 py-2.5 text-right font-semibold text-gray-800">{{ $fmtHours($m['hours']) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        </div>
        @endif
    </div>
</div>

@endsection