@extends('layouts.admin')

@php
    $isDenison = !empty($analytics->category_scores) && isset($analytics->category_scores['denison-mission']);
@endphp

@section('title', $isDenison ? 'Culture Profile' : 'Engagement Index')
@section('header', $isDenison ? 'Denison Culture Profile' : 'Engagement Index')
@section('subheader', $isDenison ? 'Organizational culture assessment across four critical traits' : 'Overall employee engagement classification')

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

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

<div class="space-y-6">
    <!-- Response Statistics -->
    <div class="card">
        <div class="card-header">
            <h3 class="font-semibold text-secondary-900">Response Overview</h3>
        </div>
        <div class="card-body">
            @include('company.partials.response-stats')
        </div>
    </div>

    @if($isDenison)
        {{-- Denison Culture Profile --}}
        @include('company.partials.denison-quadrant')
    @endif

    <!-- Main Engagement Display -->
    <div class="card">
        <div class="card-body">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                <!-- Gauge Chart -->
                <div class="flex flex-col items-center">
                    @php
                        $engagementIndex = $analytics->overall_engagement_index ?? 0;
                        $interpretation = \App\Models\Category::getScoreInterpretation($engagementIndex);
                    @endphp
                    <div class="relative w-64 h-32 overflow-hidden">
                        <div class="absolute inset-0">
                            <svg viewBox="0 0 200 100" class="w-full h-full">
                                <path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke="#e5e7eb" stroke-width="16" stroke-linecap="round"/>
                                <path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke="{{ $interpretation['color'] }}" stroke-width="16" stroke-linecap="round"
                                    stroke-dasharray="{{ 3.14159 * 80 }}"
                                    stroke-dashoffset="{{ 3.14159 * 80 * (1 - $engagementIndex / 100) }}"/>
                            </svg>
                        </div>
                        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 text-center">
                            <div class="text-4xl font-bold text-secondary-900">{{ round($engagementIndex) }}%</div>
                            <div class="text-sm text-gray-500">Engaged Employees</div>
                        </div>
                    </div>
                    
                    <div class="mt-4 text-center">
                        <span class="badge text-lg px-4 py-2" style="background-color: {{ $interpretation['color'] }}20; color: {{ $interpretation['color'] }}">
                            {{ $interpretation['label'] }}
                        </span>
                        <p class="text-sm text-gray-500 mt-2 max-w-sm">{{ $interpretation['description'] }}</p>
                    </div>
                </div>
                
                <!-- Classification Breakdown -->
                <div>
                    <h3 class="font-semibold text-secondary-900 mb-4">Employee Classification</h3>
                    
                    <div class="space-y-4">
                        @foreach(['engaged', 'not_engaged', 'actively_disengaged', 'unknown'] as $key)
                            @php $data = $engagementBreakdown[$key]; @endphp
                            @if($key !== 'unknown' || $data['count'] > 0)
                                <div class="flex items-center">
                                    <div class="w-44">
                                        <div class="flex items-center">
                                            <span class="w-3 h-3 rounded-full mr-2" style="background-color: {{ $data['color'] }}"></span>
                                            <span class="text-sm font-medium text-gray-700">{{ $data['label'] }}</span>
                                        </div>
                                        <p class="text-xs text-gray-500 ml-5">{{ $data['description'] }}</p>
                                    </div>
                                    <div class="flex-1 mx-4">
                                        <div class="overflow-hidden h-8 bg-gray-100 rounded-full">
                                            <div class="h-full rounded-full flex items-center justify-end px-2" style="width: {{ max($data['percentage'], 5) }}%; background-color: {{ $data['color'] }}">
                                                @if($data['percentage'] > 15)
                                                    <span class="text-white text-xs font-medium">{{ $data['count'] }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @if($lowVolumeWarnings['show_percentages'])
                                        <span class="text-lg font-bold w-16 text-right" style="color: {{ $data['color'] }}">{{ round($data['percentage']) }}%</span>
                                    @else
                                        <span class="text-lg font-bold w-16 text-right" style="color: {{ $data['color'] }}">{{ $data['count'] }}</span>
                                    @endif
                                </div>
                            @endif
                        @endforeach
                    </div>
                    
                    <div class="mt-6 pt-4 border-t border-gray-100">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Total Responses</span>
                            <span class="font-medium">{{ $analytics->total_responses }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Methodology Explanation -->
    <div class="card">
        <div class="card-header bg-blue-50">
            <h3 class="font-semibold text-blue-800">
                <i class="fas fa-info-circle mr-2"></i>
                Classification Methodology
            </h3>
        </div>
        <div class="card-body prose prose-sm max-w-none text-gray-600">
            <p>Employees are classified based on their responses to Likert-scale questions:</p>
            <ul class="mt-2 space-y-2">
                <li><strong class="text-green-600">Engaged:</strong> 75%+ favorable responses (4-5 on 5-point scale), no unfavorable responses. These employees are highly involved and enthusiastic.</li>
                <li><strong class="text-yellow-600">Not Engaged:</strong> Employees who don't meet the criteria for engaged or disengaged. They're putting in time but not energy.</li>
                <li><strong class="text-red-600">Actively Disengaged:</strong> 33%+ unfavorable responses (1-2) or average below 2.5. These employees may be undermining workplace morale.</li>
                <li><strong class="text-gray-600">Unclassified:</strong> Responses without sufficient Likert-scale answers to determine classification.</li>
            </ul>
            <p class="text-xs text-gray-400 mt-4">Based on Gallup Q12 engagement classification framework.</p>
        </div>
    </div>

    <!-- Sub-Index Breakdown -->
    @if($isDenison && !empty($subIndexScores))
        @include('company.partials.denison-sub-indices')
    @endif

    <!-- Benchmark Comparison -->
    @include('company.partials.benchmark-comparison')
</div>
@endsection