@extends('layouts.admin')
@section('title', 'Tier Management — JAM Admin')
@section('page-title', 'Tier Management')

@section('content')
<div x-data="{ actionModal: null, assessment: null }" class="space-y-6">

    @if(session('success'))
    <div class="bg-green-900/20 border border-green-700/40 rounded-xl px-5 py-3 text-green-400 text-sm">{{ session('success') }}</div>
    @endif
    @if(session('error'))
    <div class="bg-red-900/20 border border-red-700/40 rounded-xl px-5 py-3 text-red-400 text-sm">{{ session('error') }}</div>
    @endif

    {{-- Header + Controls --}}
    <div class="flex items-start justify-between">
        <div>
            <h2 class="text-2xl font-semibold" style="font-family: 'Playfair Display', serif;">Tier Management</h2>
            <p class="text-white/40 text-sm mt-1">Quarterly assessment and tier override controls.</p>
        </div>
        <div class="flex items-center gap-3">
            {{-- Auto-suggest toggle --}}
            <form method="POST" action="{{ route('admin.tiers.toggle-auto-suggest') }}">
                @csrf
                <button type="submit"
                        class="flex items-center gap-2.5 border rounded-full px-4 py-2.5 text-xs font-medium tracking-wide transition-colors
                            {{ $autoSuggest ? 'border-[#D4B84A]/50 text-[#D4B84A] bg-[#D4B84A]/5' : 'border-white/20 text-white/40 hover:text-white hover:border-white/40' }}">
                    <span class="w-2 h-2 rounded-full {{ $autoSuggest ? 'bg-[#D4B84A]' : 'bg-white/20' }}"></span>
                    Auto-suggest {{ $autoSuggest ? 'ON' : 'OFF' }}
                </button>
            </form>
            {{-- Run assessment --}}
            <form method="POST" action="{{ route('admin.tiers.run-assessment') }}"
                  onsubmit="return confirm('Run quarterly assessment now? This will evaluate all active members and flag any needing tier changes.')">
                @csrf
                <button type="submit"
                        class="bg-[#D4B84A] hover:bg-[#E8D080] text-black text-xs font-semibold tracking-widest uppercase px-5 py-3 rounded-full transition-colors">
                    Run Assessment
                </button>
            </form>
        </div>
    </div>

    {{-- Tier stats --}}
    <div class="grid grid-cols-4 gap-4">
        @foreach($tierStats as $tier)
        <div class="bg-[#111111] border border-[#1e1e1e] rounded-xl p-5">
            <div class="flex items-center justify-between mb-3">
                <span class="px-2.5 py-1 rounded-full text-xs border
                    {{ $tier->slug === 'limitless' ? 'border-[#D4B84A]/50 text-[#D4B84A]' : ($tier->slug === 'indulged' ? 'border-blue-400/30 text-blue-300' : 'border-white/20 text-white/50') }}">
                    {{ $tier->name }}
                </span>
            </div>
            <p class="text-3xl font-semibold text-white">{{ $tier->current_members_count }}</p>
            <p class="text-white/30 text-xs mt-1">members</p>
            <div class="mt-3 pt-3 border-t border-[#1e1e1e] space-y-1 text-xs text-white/30">
                <p>Min spend: ${{ number_format($tier->min_spend_per_visit, 0) }}/visit</p>
                <p>Threshold: {{ number_format($tier->points_threshold_3months) }} pts/qtr</p>
            </div>
        </div>
        @endforeach
        <div class="bg-[#111111] border border-[#1e1e1e] rounded-xl p-5">
            <p class="text-white/40 text-xs tracking-widest uppercase mb-3">Pending Reviews</p>
            <p class="text-3xl font-semibold {{ $pending->total() > 0 ? 'text-[#D4B84A]' : 'text-white' }}">
                {{ $pending->total() }}
            </p>
            <p class="text-white/30 text-xs mt-1">assessments queued</p>
            @if($atRiskCount > 0)
            <p class="text-orange-400/70 text-xs mt-3">⚠ {{ $atRiskCount }} member{{ $atRiskCount !== 1 ? 's' : '' }} at risk</p>
            @endif
        </div>
    </div>

    {{-- Pending assessments --}}
    <div class="bg-[#111111] border border-[#1e1e1e] rounded-xl">
        <div class="px-6 py-4 border-b border-[#1e1e1e] flex items-center justify-between">
            <h3 class="text-sm font-medium">Pending Assessments</h3>
            @if($pending->total() > 0)
            <span class="text-white/40 text-xs">{{ $pending->total() }} awaiting action</span>
            @endif
        </div>

        @if($pending->isEmpty())
        <div class="px-6 py-12 text-center">
            <p class="text-white/30 text-sm">No pending assessments.</p>
            <p class="text-white/20 text-xs mt-2">Run an assessment or wait for the auto-suggest system to flag members.</p>
        </div>
        @else
        <div class="divide-y divide-[#1e1e1e]">
            @foreach($pending as $assessment)
            <div class="px-6 py-4 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-9 h-9 rounded-full bg-[#1e1e1e] flex items-center justify-center flex-shrink-0">
                        <span class="text-white/60 text-sm">{{ strtoupper(substr($assessment->user?->first_name ?? '?', 0, 1)) }}</span>
                    </div>
                    <div>
                        <p class="text-white text-sm font-medium">{{ $assessment->user?->full_name }}</p>
                        <p class="text-white/40 text-xs mt-0.5">{{ $assessment->user?->membership_number }}</p>
                        @if($assessment->reason)
                        <p class="text-white/30 text-xs mt-1 italic">{{ $assessment->reason }}</p>
                        @endif
                    </div>
                </div>
                <div class="flex items-center gap-6">
                    {{-- Tier change arrow --}}
                    <div class="flex items-center gap-2">
                        <span class="px-2.5 py-1 rounded-full text-xs border
                            {{ $assessment->previousTier?->slug === 'limitless' ? 'border-[#D4B84A]/50 text-[#D4B84A]' : ($assessment->previousTier?->slug === 'indulged' ? 'border-blue-400/30 text-blue-300' : 'border-white/20 text-white/50') }}">
                            {{ $assessment->previousTier?->name }}
                        </span>
                        @php $isUpgrade = $assessment->recommendedTier?->display_order > $assessment->previousTier?->display_order; @endphp
                        <span class="{{ $isUpgrade ? 'text-[#D4B84A]' : 'text-red-400' }} text-sm">
                            {{ $isUpgrade ? '↑' : '↓' }}
                        </span>
                        <span class="px-2.5 py-1 rounded-full text-xs border
                            {{ $assessment->recommendedTier?->slug === 'limitless' ? 'border-[#D4B84A]/50 text-[#D4B84A]' : ($assessment->recommendedTier?->slug === 'indulged' ? 'border-blue-400/30 text-blue-300' : 'border-white/20 text-white/50') }}">
                            {{ $assessment->recommendedTier?->name }}
                        </span>
                    </div>
                    <span class="text-white/25 text-xs">{{ $assessment->assessed_at->diffForHumans() }}</span>
                    <a href="{{ route('admin.tiers.evaluate', $assessment->user) }}"
                       class="text-white/30 hover:text-[#D4B84A] text-xs transition-colors border border-[#2a2a2a] hover:border-[#D4B84A]/40 px-3 py-1.5 rounded-full">
                        View Detail
                    </a>
                    {{-- Approve / Dismiss --}}
                    <button @click="assessment = {{ $assessment->id }}; actionModal = 'approve'"
                            class="bg-green-900/30 hover:bg-green-800/40 text-green-400 text-xs px-3 py-1.5 rounded-full transition-colors border border-green-800/50">
                        Approve
                    </button>
                    <button @click="assessment = {{ $assessment->id }}; actionModal = 'dismiss'"
                            class="border border-[#2a2a2a] hover:border-white/30 text-white/30 hover:text-white/60 text-xs px-3 py-1.5 rounded-full transition-colors">
                        Dismiss
                    </button>
                </div>
            </div>
            @endforeach
        </div>
        @if($pending->hasPages())
        <div class="px-6 py-4 border-t border-[#1e1e1e]">{{ $pending->links() }}</div>
        @endif
        @endif
    </div>

    {{-- Action Modal (Approve / Dismiss) --}}
    <div x-show="actionModal !== null" x-cloak
         class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
         @keydown.escape.window="actionModal = null">
        <div class="bg-[#111111] border border-[#2a2a2a] rounded-2xl p-8 w-full max-w-md" @click.stop>
            <h3 class="text-lg font-semibold mb-1" style="font-family: 'Playfair Display', serif;"
                x-text="actionModal === 'approve' ? 'Approve Tier Change' : 'Dismiss Assessment'"></h3>
            <p class="text-white/40 text-sm mb-6" x-text="actionModal === 'approve' ? 'This will apply the recommended tier change immediately.' : 'Dismiss without applying any change.'"></p>

            <template x-for="id in [assessment]" :key="id">
                <form :action="`/admin/tiers/assessments/${id}/action`" method="POST" class="space-y-4">
                    @csrf
                    <input type="hidden" name="decision" :value="actionModal">
                    <div>
                        <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Note (optional)</label>
                        <textarea name="reason" rows="3"
                                  class="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#D4B84A] rounded-lg px-4 py-3 text-sm text-white outline-none transition-colors resize-none"
                                  placeholder="Add a note to this action…"></textarea>
                    </div>
                    <div class="flex justify-end gap-3">
                        <button type="button" @click="actionModal = null"
                                class="px-5 py-2.5 rounded-full border border-[#2a2a2a] text-white/50 text-sm hover:text-white transition-colors">
                            Cancel
                        </button>
                        <button type="submit"
                                :class="actionModal === 'approve' ? 'bg-green-700 hover:bg-green-600' : 'bg-[#2a2a2a] hover:bg-[#333]'"
                                class="px-5 py-2.5 rounded-full text-white text-sm font-semibold transition-colors"
                                x-text="actionModal === 'approve' ? 'Approve' : 'Dismiss'">
                        </button>
                    </div>
                </form>
            </template>
        </div>
    </div>

</div>
@endsection