@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')

{{-- ====== ADMIN / SUPERVISOR DASHBOARD ====== --}}
@if(Auth::user()->hasRole(['admin', 'supervisor']))

<div class="mt-4 space-y-6">
    {{-- Stats row --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
        <x-stat-card label="Total Communicators" :value="$stats['total_communicators']" color="blue" icon="users"/>
        <x-stat-card label="Active Communicators" :value="$stats['active_communicators']" color="green" icon="user-check"/>
        <x-stat-card label="Today's Deployments" :value="$stats['today_deployments']" color="indigo" icon="calendar"/>
        <x-stat-card label="Pending Responses" :value="$stats['pending_deployments']" color="yellow" icon="clock"/>
        <x-stat-card label="Pending Requests" :value="$stats['pending_requests']" color="red" icon="inbox"/>
        <x-stat-card label="Open Appraisals" :value="$stats['open_appraisals']" color="purple" icon="chart"/>
        <x-stat-card label="Stations" :value="$stats['total_stations']" color="gray" icon="radio"/>
    </div>

    <div class="grid lg:grid-cols-2 gap-6">
        {{-- Today's Deployments --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h3 class="font-semibold text-gray-900 text-sm">Today's Deployments</h3>
                <a href="{{ route('deployments.index', ['filter' => 'today']) }}" class="text-xs text-blue-600 hover:underline">View all</a>
            </div>
            <div class="divide-y divide-gray-50">
                @forelse($todayDeployments as $d)
                <div class="px-5 py-3 flex items-start gap-3">
                    <div class="w-8 h-8 bg-blue-50 rounded-full flex items-center justify-center text-blue-700 font-semibold text-xs shrink-0">
                        {{ strtoupper(substr($d->communicator->name, 0, 2)) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-gray-900 truncate">{{ $d->communicator->name }}</div>
                        <div class="text-xs text-gray-500">{{ $d->station->name }}{{ $d->programme ? ' · '.$d->programme->name : '' }}</div>
                        @if($d->start_time)
                            <div class="text-xs text-gray-400">{{ date('g:i A', strtotime($d->start_time)) }}</div>
                        @endif
                    </div>
                    <span class="shrink-0 text-xs px-2 py-0.5 rounded-full {{ $d->status_badge }}">{{ ucfirst($d->status) }}</span>
                </div>
                @empty
                <div class="px-5 py-8 text-center text-sm text-gray-400">No deployments scheduled for today</div>
                @endforelse
            </div>
        </div>

        {{-- Pending Requests --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h3 class="font-semibold text-gray-900 text-sm">Pending Requests</h3>
                <a href="{{ route('requests.index', ['status' => 'pending']) }}" class="text-xs text-blue-600 hover:underline">View all</a>
            </div>
            <div class="divide-y divide-gray-50">
                @forelse($pendingRequests as $r)
                <div class="px-5 py-3 flex items-start gap-3">
                    <span class="shrink-0 text-xs px-2 py-0.5 rounded-full {{ $r->type === 'self' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700' }} font-medium">
                        {{ $r->type === 'self' ? 'Self' : 'Producer' }}
                    </span>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-gray-900 truncate">
                            {{ $r->communicator?->name ?? $r->requestedBy->name }}
                        </div>
                        <div class="text-xs text-gray-500">{{ $r->station?->name }} · {{ $r->requested_date?->format('d M') }}</div>
                    </div>
                    <a href="{{ route('requests.show', $r) }}" class="text-xs text-blue-600 hover:underline shrink-0">Review</a>
                </div>
                @empty
                <div class="px-5 py-8 text-center text-sm text-gray-400">No pending requests</div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Upcoming deployments --}}
    @if($upcomingDeployments->isNotEmpty())
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h3 class="font-semibold text-gray-900 text-sm">Upcoming Deployments</h3>
            <a href="{{ route('deployments.index', ['filter' => 'upcoming']) }}" class="text-xs text-blue-600 hover:underline">View all</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="text-left px-5 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Communicator</th>
                        <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Station / Programme</th>
                        <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th>
                        <th class="text-left px-4 py-2.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($upcomingDeployments as $d)
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3 font-medium text-gray-900">{{ $d->communicator->name }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $d->station->name }}{{ $d->programme ? ' · '.$d->programme->name : '' }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $d->deployment_date->format('d M Y') }}</td>
                        <td class="px-4 py-3"><span class="text-xs px-2 py-0.5 rounded-full {{ $d->status_badge }}">{{ ucfirst($d->status) }}</span></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>

{{-- ====== COMMUNICATOR DASHBOARD ====== --}}
@elseif(Auth::user()->hasRole('communicator'))
<div class="mt-4 space-y-6">
    @if($communicator)
    {{-- Profile banner --}}
    <div class="bg-gradient-to-r from-npp-blue to-blue-700 rounded-xl p-5 text-white">
        <div class="flex items-center gap-4">
            <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center text-white font-bold text-xl">
                {{ strtoupper(substr($communicator->name, 0, 2)) }}
            </div>
            <div>
                <div class="font-bold text-lg">{{ $communicator->name }}</div>
                <div class="text-blue-100 text-sm">{{ $communicator->region?->name }} · {{ $communicator->tier?->name ?? 'Untiered' }}</div>
            </div>
            @if($communicator->tier)
            <div class="ml-auto text-right">
                <div class="text-blue-100 text-xs">Current Tier</div>
                <div class="font-semibold">{{ $communicator->tier->name }}</div>
            </div>
            @endif
        </div>
    </div>

    {{-- Quick stats --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-yellow-600">{{ $pendingDeployments->count() }}</div>
            <div class="text-xs text-gray-500 mt-1">Awaiting Response</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-blue-600">{{ $myDeployments->count() }}</div>
            <div class="text-xs text-gray-500 mt-1">Upcoming</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-purple-600">{{ $unreadCount }}</div>
            <div class="text-xs text-gray-500 mt-1">Unread Alerts</div>
        </div>
    </div>

    {{-- Pending deployments needing action --}}
    @if($pendingDeployments->isNotEmpty())
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-5">
        <h3 class="font-semibold text-yellow-900 text-sm mb-3">⚡ Action Required — Pending Deployments</h3>
        <div class="space-y-3">
            @foreach($pendingDeployments as $d)
            <div class="bg-white rounded-lg border border-yellow-100 p-4 flex items-start gap-4">
                <div class="flex-1">
                    <div class="font-medium text-gray-900 text-sm">{{ $d->station->name }}</div>
                    @if($d->programme) <div class="text-xs text-gray-500">{{ $d->programme->name }}</div> @endif
                    <div class="text-xs text-gray-500 mt-1">{{ $d->deployment_date->format('l, d M Y') }}{{ $d->start_time ? ' at '.date('g:i A', strtotime($d->start_time)) : '' }}</div>
                    @if($d->topic) <div class="text-xs text-gray-600 mt-1">Topic: {{ $d->topic }}</div> @endif
                </div>
                <div class="flex gap-2 shrink-0">
                    <form method="POST" action="{{ route('deployments.accept', $d) }}">
                        @csrf
                        <button type="submit" class="px-3 py-1.5 bg-green-600 text-white text-xs rounded-lg font-medium hover:bg-green-700">Accept</button>
                    </form>
                    <button onclick="document.getElementById('decline-{{ $d->id }}').classList.remove('hidden')"
                            class="px-3 py-1.5 bg-red-100 text-red-700 text-xs rounded-lg font-medium hover:bg-red-200">Decline</button>
                </div>
            </div>
            <div id="decline-{{ $d->id }}" class="hidden mt-2">
                <form method="POST" action="{{ route('deployments.decline', $d) }}">
                    @csrf
                    <div class="flex gap-2">
                        <input type="text" name="decline_reason" placeholder="Reason for declining (optional)"
                               class="flex-1 px-3 py-1.5 text-xs border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-red-500">
                        <button type="submit" class="px-3 py-1.5 bg-red-600 text-white text-xs rounded-lg font-medium hover:bg-red-700">Confirm Decline</button>
                    </div>
                </form>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Upcoming deployments --}}
    @if($myDeployments->isNotEmpty())
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h3 class="font-semibold text-gray-900 text-sm">Upcoming Deployments</h3>
            <a href="{{ route('my-deployments') }}" class="text-xs text-blue-600 hover:underline">View all</a>
        </div>
        <div class="divide-y divide-gray-50">
            @foreach($myDeployments as $d)
            <div class="px-5 py-3">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-sm font-medium text-gray-900">{{ $d->station->name }}</div>
                        <div class="text-xs text-gray-500">{{ $d->deployment_date->format('d M Y') }}{{ $d->start_time ? ' · '.date('g:i A', strtotime($d->start_time)) : '' }}</div>
                    </div>
                    <span class="text-xs px-2 py-0.5 rounded-full {{ $d->status_badge }}">{{ ucfirst($d->status) }}</span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
    @else
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-5 text-sm text-yellow-800">
        Your account is not yet linked to a communicator profile. Please contact your administrator.
    </div>
    @endif
</div>

{{-- ====== PRODUCER DASHBOARD ====== --}}
@elseif(Auth::user()->hasRole('producer'))
<div class="mt-4 space-y-6">
    <div class="grid grid-cols-2 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 p-5 text-center">
            <div class="text-3xl font-bold text-yellow-600">{{ $pendingCount }}</div>
            <div class="text-sm text-gray-500 mt-1">Pending Requests</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5 text-center">
            <div class="text-3xl font-bold text-green-600">{{ $approvedCount }}</div>
            <div class="text-sm text-gray-500 mt-1">Approved Requests</div>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
            <h3 class="font-semibold text-gray-900 text-sm">Recent Requests</h3>
            <a href="{{ route('requests.producer.create') }}" class="text-xs bg-npp-blue text-white px-3 py-1.5 rounded-lg hover:bg-blue-800">+ New Request</a>
        </div>
        <div class="divide-y divide-gray-50">
            @forelse($myRequests as $r)
            <div class="px-5 py-3 flex items-center gap-3">
                <div class="flex-1">
                    <div class="text-sm font-medium text-gray-900">{{ $r->communicator?->name ?? '—' }}</div>
                    <div class="text-xs text-gray-500">{{ $r->station?->name }} · {{ $r->requested_date?->format('d M Y') }}</div>
                </div>
                <span class="text-xs px-2 py-0.5 rounded-full {{ $r->status_badge }}">{{ ucfirst($r->status) }}</span>
            </div>
            @empty
            <div class="px-5 py-8 text-center text-sm text-gray-400">No requests yet. <a href="{{ route('requests.producer.create') }}" class="text-blue-600 hover:underline">Make a request</a></div>
            @endforelse
        </div>
    </div>
</div>
@endif

@endsection