@extends('layouts.app')
@section('title', $communicator->name)
@section('page-title', $communicator->name)

@section('content')
<div class="mt-4 space-y-5">

    {{-- Profile header --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <div class="flex items-start gap-5">
            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl shrink-0"
                 style="background-color: {{ $communicator->tier?->color ?? '#003087' }}">
                {{ strtoupper(substr($communicator->name, 0, 2)) }}
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex flex-wrap items-center gap-3">
                    <h2 class="text-xl font-bold text-gray-900">{{ $communicator->name }}</h2>
                    @if($communicator->tier)
                        <span class="text-xs px-2.5 py-1 rounded-full text-white font-semibold"
                              style="background-color: {{ $communicator->tier->color }}">{{ $communicator->tier->name }}</span>
                    @endif
                    <span class="text-xs px-2.5 py-1 rounded-full font-semibold
                        {{ $communicator->status === 'active' ? 'bg-green-100 text-green-700' : '' }}
                        {{ $communicator->status === 'inactive' ? 'bg-gray-100 text-gray-500' : '' }}
                        {{ $communicator->status === 'suspended' ? 'bg-red-100 text-red-700' : '' }}
                        {{ $communicator->status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}">
                        {{ ucfirst($communicator->status) }}
                    </span>
                </div>
                <div class="mt-2 grid sm:grid-cols-3 gap-x-8 gap-y-1 text-sm text-gray-600">
                    <div><span class="font-medium">Phone:</span> {{ $communicator->full_phone }}</div>
                    @if($communicator->momo_number)
                    <div><span class="font-medium">MoMo:</span> {{ $communicator->momo_number }}</div>
                    @endif
                    <div><span class="font-medium">Region:</span> {{ $communicator->region?->name ?? '—' }}</div>
                    @if($communicator->constituency)
                    <div><span class="font-medium">Constituency:</span> {{ $communicator->constituency }}</div>
                    @endif
                    <div><span class="font-medium">Languages:</span> {{ $communicator->languages_list ?: '—' }}</div>
                </div>
                @if($communicator->notes)
                <p class="mt-3 text-sm text-gray-500">{{ $communicator->notes }}</p>
                @endif
            </div>
            <div class="flex gap-2 shrink-0">
                <a href="{{ route('communicators.edit', $communicator) }}"
                   class="px-4 py-2 text-sm bg-npp-blue text-white rounded-lg hover:bg-blue-800 font-medium">Edit</a>
            </div>
        </div>
    </div>

    {{-- Stats row --}}
    <div class="grid 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-blue-600">{{ $communicator->deployments->count() }}</div>
            <div class="text-xs text-gray-500 mt-1">Total Deployments</div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-4 text-center">
            <div class="text-2xl font-bold text-green-600">{{ $communicator->deployments->where('status', 'completed')->count() }}</div>
            <div class="text-xs text-gray-500 mt-1">Completed</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">{{ $communicator->appraisals->where('status', 'completed')->count() }}</div>
            <div class="text-xs text-gray-500 mt-1">Appraisals Done</div>
        </div>
    </div>

    <div class="grid lg:grid-cols-2 gap-5">
        {{-- 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">Recent Deployments</h3>
                <a href="{{ route('deployments.create') }}?communicator_id={{ $communicator->id }}" class="text-xs text-blue-600 hover:underline">+ Deploy</a>
            </div>
            <div class="divide-y divide-gray-50">
                @forelse($communicator->deployments->sortByDesc('deployment_date')->take(6) as $d)
                <div class="px-5 py-3 flex items-center justify-between gap-3">
                    <div>
                        <div class="text-sm text-gray-900">{{ $d->station->name }}{{ $d->programme ? ' · '.$d->programme->name : '' }}</div>
                        <div class="text-xs text-gray-400">{{ $d->deployment_date->format('d M Y') }}</div>
                    </div>
                    <span class="text-xs px-2 py-0.5 rounded-full {{ $d->status_badge }}">{{ ucfirst($d->status) }}</span>
                </div>
                @empty
                <div class="px-5 py-6 text-center text-sm text-gray-400">No deployments yet</div>
                @endforelse
            </div>
        </div>

        {{-- Appraisals --}}
        <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">Appraisal History</h3>
                <a href="{{ route('appraisals.create') }}?communicator_id={{ $communicator->id }}" class="text-xs text-blue-600 hover:underline">+ Open Appraisal</a>
            </div>
            <div class="divide-y divide-gray-50">
                @forelse($communicator->appraisals->sortByDesc('year')->sortByDesc('quarter') as $a)
                <div class="px-5 py-3">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-sm font-medium text-gray-900">{{ $a->quarter_label }}</div>
                            @if($a->total_score !== null)
                                <div class="text-xs text-gray-500">Score: {{ $a->total_score }} / 50 ({{ $a->score_percentage }}%)</div>
                            @endif
                            @if($a->tierBefore && $a->tierAfter && $a->status === 'completed')
                                <div class="text-xs text-gray-400 mt-0.5">
                                    {{ $a->tierBefore->name }} → {{ $a->tierAfter->name }}
                                </div>
                            @endif
                        </div>
                        <span class="text-xs px-2 py-0.5 rounded-full {{ $a->status_badge }}">{{ ucfirst($a->status) }}</span>
                    </div>
                </div>
                @empty
                <div class="px-5 py-6 text-center text-sm text-gray-400">No appraisals yet</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection