@extends('layouts.app')
@section('title', 'Appraisal — '.$appraisal->communicator->name)
@section('page-title', 'Appraisal: '.$appraisal->quarter_label)

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

    {{-- Summary card --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h2 class="text-lg font-bold text-gray-900">{{ $appraisal->communicator->name }}</h2>
                <div class="text-sm text-gray-500 mt-0.5">{{ $appraisal->communicator->region?->name }} · {{ $appraisal->quarter_label }}</div>
            </div>
            <span class="text-sm px-3 py-1 rounded-full {{ $appraisal->status_badge }} font-semibold">{{ ucfirst($appraisal->status) }}</span>
        </div>

        @if($appraisal->total_score !== null)
        <div class="mt-5 grid grid-cols-3 gap-4 text-center">
            <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-2xl font-bold text-gray-900">{{ $appraisal->total_score }}<span class="text-base font-normal text-gray-400">/50</span></div>
                <div class="text-xs text-gray-500 mt-1">Total Score</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-2xl font-bold text-gray-900">{{ $appraisal->score_percentage }}<span class="text-base font-normal text-gray-400">%</span></div>
                <div class="text-xs text-gray-500 mt-1">Percentage</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-sm font-bold text-gray-900">
                    @if($appraisal->tierBefore && $appraisal->tierAfter)
                        @if($appraisal->tierAfter->level > $appraisal->tierBefore->level)
                            <span class="text-green-600">↑ Promoted</span>
                        @elseif($appraisal->tierAfter->level < $appraisal->tierBefore->level)
                            <span class="text-red-600">↓ Demoted</span>
                        @else
                            <span class="text-gray-500">No Change</span>
                        @endif
                    @else
                        <span class="text-gray-400">Pending</span>
                    @endif
                </div>
                <div class="text-xs text-gray-500 mt-1">Tier Outcome</div>
            </div>
        </div>

        @if($appraisal->tierBefore || $appraisal->tierAfter)
        <div class="mt-3 text-sm text-gray-600 text-center">
            {{ $appraisal->tierBefore?->name ?? '?' }}
            <span class="text-gray-400 mx-2">→</span>
            {{ $appraisal->tierAfter?->name ?? 'TBD' }}
        </div>
        @endif
        @endif

        @if($appraisal->notes)
        <div class="mt-4 text-sm text-gray-600 bg-gray-50 rounded-lg p-3">
            <strong>Notes:</strong> {{ $appraisal->notes }}
        </div>
        @endif
    </div>

    {{-- Score form (only if not completed) --}}
    @if($appraisal->status !== 'completed')
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6"
         x-data="{
             criteria: [
                 { criteria: 'Public Communication Skills', score: {{ $appraisal->scores->where('criteria','Public Communication Skills')->first()?->score ?? 0 }}, max_score: 10 },
                 { criteria: 'Policy Knowledge & Messaging', score: {{ $appraisal->scores->where('criteria','Policy Knowledge & Messaging')->first()?->score ?? 0 }}, max_score: 10 },
                 { criteria: 'Media Engagement & Consistency', score: {{ $appraisal->scores->where('criteria','Media Engagement & Consistency')->first()?->score ?? 0 }}, max_score: 10 },
                 { criteria: 'Party Discipline & Conduct', score: {{ $appraisal->scores->where('criteria','Party Discipline & Conduct')->first()?->score ?? 0 }}, max_score: 10 },
                 { criteria: 'Availability & Responsiveness', score: {{ $appraisal->scores->where('criteria','Availability & Responsiveness')->first()?->score ?? 0 }}, max_score: 10 },
             ],
             get total() { return this.criteria.reduce((s,c) => s + Number(c.score), 0); }
         }">
        <h3 class="font-semibold text-gray-900 text-sm mb-4">Enter Scores (max 10 per criterion · 50 total)</h3>
        <form method="POST" action="{{ route('appraisals.score', $appraisal) }}">
            @csrf

            <div class="space-y-3">
                <template x-for="(item, index) in criteria" :key="index">
                    <div class="flex items-center gap-4 p-3 bg-gray-50 rounded-lg">
                        <div class="flex-1 text-sm text-gray-700" x-text="item.criteria"></div>
                        <input type="hidden" :name="'scores['+index+'][criteria]'" :value="item.criteria">
                        <input type="hidden" :name="'scores['+index+'][max_score]'" :value="item.max_score">
                        <div class="flex items-center gap-2 shrink-0">
                            <input type="number" :name="'scores['+index+'][score]'" x-model="item.score"
                                   min="0" :max="item.max_score" step="0.5"
                                   class="w-16 px-2 py-1.5 text-sm text-center border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <span class="text-xs text-gray-400">/ 10</span>
                        </div>
                    </div>
                </template>

                <div class="flex items-center justify-between bg-npp-blue text-white rounded-lg px-4 py-3">
                    <span class="text-sm font-semibold">Total Score</span>
                    <span class="text-xl font-bold" x-text="total + ' / 50'"></span>
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5 mt-4">Appraiser Notes</label>
                <textarea name="notes" rows="2" placeholder="Observations, comments…"
                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none">{{ $appraisal->notes }}</textarea>
            </div>

            <button type="submit" class="mt-4 px-5 py-2.5 bg-npp-blue text-white text-sm font-semibold rounded-lg hover:bg-blue-800">
                Save Scores
            </button>
        </form>
    </div>

    {{-- Complete appraisal --}}
    @if($appraisal->total_score !== null)
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <h3 class="font-semibold text-gray-900 text-sm mb-1">Complete Appraisal & Update Tier</h3>
        <p class="text-xs text-gray-500 mb-4">Select the new tier for this communicator based on their score, then complete the appraisal. The communicator will be notified.</p>
        <form method="POST" action="{{ route('appraisals.complete', $appraisal) }}">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Assign New Tier <span class="text-red-500">*</span></label>
                    <select name="tier_after" required
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        @foreach($tiers as $tier)
                            <option value="{{ $tier->id }}" {{ $appraisal->communicator->tier_id == $tier->id ? 'selected' : '' }}>
                                {{ $tier->name }}{{ $appraisal->communicator->tier_id == $tier->id ? ' (current)' : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="submit"
                            onclick="return confirm('Complete this appraisal? This will update the communicator\'s tier and cannot be undone.')"
                            class="w-full px-4 py-2.5 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700">
                        Complete & Update Tier
                    </button>
                </div>
            </div>
        </form>
    </div>
    @endif
    @endif

    {{-- Score breakdown (read-only when completed) --}}
    @if($appraisal->scores->isNotEmpty() && $appraisal->status === 'completed')
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <h3 class="font-semibold text-gray-900 text-sm mb-4">Score Breakdown</h3>
        <div class="space-y-3">
            @foreach($appraisal->scores as $score)
            <div class="flex items-center gap-4">
                <div class="flex-1 text-sm text-gray-700">{{ $score->criteria }}</div>
                <div class="w-32 bg-gray-100 rounded-full h-2">
                    <div class="bg-npp-blue h-2 rounded-full" style="width: {{ ($score->score / $score->max_score) * 100 }}%"></div>
                </div>
                <div class="text-sm font-semibold text-gray-900 w-12 text-right">{{ $score->score }}/{{ $score->max_score }}</div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <a href="{{ route('appraisals.index') }}" class="inline-flex items-center gap-1.5 text-sm text-blue-600 hover:underline">← Back to Appraisals</a>
</div>
@endsection