@extends('layouts.admin')

@php
    $isDenison = $categoryData->contains(fn($c) => str_starts_with($c['slug'] ?? '', 'denison-'));
@endphp

@section('title', $isDenison ? 'Denison Trait Scores' : 'Category Scores')
@section('header', $isDenison ? 'Denison Culture Traits' : 'Category Scores')
@section('subheader', $isDenison ? 'Favorability scores across the four Denison cultural traits' : 'Engagement scores across all dimensions')

@section('content')
@include('company.partials.survey-selector')

<!-- Low Volume Warning -->
@include('company.partials.low-volume-warning')

<div class="space-y-6">
    <!-- Overview Chart -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">All Categories Overview</h3>
        </div>
        <div class="card-body">
            <div class="h-80">
                <canvas id="categoryChart"></canvas>
            </div>
        </div>
    </div>
    
    <!-- Category Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($categoryData as $cat)
            <a href="{{ route('company.analytics.category', $cat['id']) }}" class="card hover:shadow-card-hover transition-shadow">
                <div class="card-body">
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex items-center">
                            <span class="text-3xl mr-3">{{ $cat['icon'] }}</span>
                            <div>
                                <h3 class="font-semibold text-secondary-900">{{ $cat['name'] }}</h3>
                                <span class="badge text-xs" style="background-color: {{ $cat['interpretation']['color'] }}20; color: {{ $cat['interpretation']['color'] }}">
                                    {{ $cat['interpretation']['label'] }}
                                </span>
                            </div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                    
                    <div class="relative pt-1">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs text-gray-500">Favorability</span>
                            <span class="text-lg font-bold" style="color: {{ $cat['interpretation']['color'] }}">
                                {{ round($cat['score']) }}%
                            </span>
                        </div>
                        <div class="overflow-hidden h-3 text-xs flex rounded-full bg-gray-100">
                            <div class="rounded-full transition-all duration-500" style="width: {{ $cat['score'] }}%; background-color: {{ $cat['interpretation']['color'] }}"></div>
                        </div>
                    </div>
                    
                    @if($cat['description'])
                        <p class="text-xs text-gray-500 mt-3 line-clamp-2">{{ $cat['description'] }}</p>
                    @endif
                </div>
            </a>
        @endforeach
    </div>
    
    <!-- Benchmark Comparison -->
    @include('company.partials.benchmark-comparison')

    <!-- Ranked List -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">{{ $isDenison ? 'Traits' : 'Categories' }} Ranked by Score</h3>
        </div>
        <div class="divide-y divide-gray-100">
            @foreach($categoryData->sortByDesc('score') as $index => $cat)
                <div class="px-6 py-4 flex items-center">
                    <span class="text-lg font-bold text-gray-300 w-8">{{ $index + 1 }}</span>
                    <span class="text-2xl mr-3">{{ $cat['icon'] }}</span>
                    <div class="flex-1">
                        <h4 class="font-medium text-gray-900">{{ $cat['name'] }}</h4>
                    </div>
                    <div class="w-48 mr-4">
                        <div class="overflow-hidden h-2 text-xs flex rounded-full bg-gray-100">
                            <div class="rounded-full" style="width: {{ $cat['score'] }}%; background-color: {{ $cat['interpretation']['color'] }}"></div>
                        </div>
                    </div>
                    <span class="text-lg font-bold w-16 text-right" style="color: {{ $cat['interpretation']['color'] }}">
                        {{ round($cat['score']) }}%
                    </span>
                </div>
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script>
    const ctx = document.getElementById('categoryChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($categoryData->pluck('name')) !!},
            datasets: [{
                label: 'Favorability %',
                data: {!! json_encode($categoryData->pluck('score')) !!},
                backgroundColor: {!! json_encode($categoryData->map(fn($c) => $c['interpretation']['color'] . '80')) !!},
                borderColor: {!! json_encode($categoryData->pluck('interpretation.color')) !!},
                borderWidth: 1,
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            indexAxis: 'y',
            scales: {
                x: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        callback: function(value) {
                            return value + '%';
                        }
                    }
                }
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.parsed.x.toFixed(1) + '% favorable';
                        }
                    }
                }
            }
        }
    });
</script>
@endpush
@endsection