@extends('layouts.admin')

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

@section('title', 'Dashboard')
@section('header', $isDenison ? 'Culture Assessment Dashboard' : 'Engagement Dashboard')
@section('subheader', $isDenison ? 'Denison Organizational Culture Model - Assessment Results' : 'Overview of your latest employee engagement survey results')

@section('header-actions')
    @if($activeSurvey)
        <a href="{{ route('company.surveys.show', $activeSurvey) }}" class="btn-outline">
            <i class="fas fa-eye mr-2"></i>
            View Active Survey
        </a>
    @endif
    <a href="{{ route('company.reports.executive') }}" class="btn-primary">
        <i class="fas fa-download mr-2"></i>
        Download Report
    </a>
@endsection

@section('content')
<div class="space-y-6">
    @if($activeSurvey && $analytics)
        <!-- Low Volume Warning -->
        @include('company.partials.low-volume-warning')
        
        <!-- 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 Quadrant --}}
            @include('company.partials.denison-quadrant')
        @endif

        <!-- Key Metrics Row -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Engagement Index Card -->
            <div class="card p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Engagement Index</h3>
                    <span class="badge {{ $analytics->overall_engagement_index >= 70 ? 'badge-success' : ($analytics->overall_engagement_index >= 50 ? 'badge-warning' : 'badge-danger') }}">
                        {{ $analytics->getEngagementInterpretation()['label'] }}
                    </span>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <span class="text-4xl font-bold text-secondary-900">{{ number_format($analytics->overall_engagement_index, 0) }}%</span>
                        <p class="text-sm text-gray-500 mt-1">Overall Score</p>
                    </div>
                    <div class="w-24 h-24">
                        <canvas id="engagementGauge"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- Response Rate Card - FIXED -->
            <div class="card p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Responses</h3>
                    @if($responseStats['total_invitations'] > 0)
                        <span class="badge {{ $responseStats['invitation_response_rate'] >= 80 ? 'badge-success' : ($responseStats['invitation_response_rate'] >= 60 ? 'badge-warning' : 'badge-danger') }}">
                            {{ $responseStats['invitation_response_rate'] >= 80 ? 'Excellent' : ($responseStats['invitation_response_rate'] >= 60 ? 'Good' : 'Low') }}
                        </span>
                    @endif
                </div>
                <div>
                    <span class="text-4xl font-bold text-secondary-900">{{ $responseStats['total_responses'] }}</span>
                    <p class="text-sm text-gray-500 mt-1">
                        @if($responseStats['total_invitations'] > 0)
                            {{ $responseStats['via_invitation'] }} invited, {{ $responseStats['via_direct_link'] }} direct
                        @else
                            All via direct link
                        @endif
                    </p>
                </div>
                @if($responseStats['total_invitations'] > 0)
                    <div class="mt-4">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>Invitation Response Rate</span>
                            <span>{{ $responseStats['invitation_response_rate'] }}%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" style="width: {{ min(100, $responseStats['invitation_response_rate']) }}%"></div>
                        </div>
                    </div>
                @endif
            </div>
            
            <!-- Grand Mean Card -->
            <div class="card p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">Grand Mean</h3>
                    <span class="text-2xl">
                        @if($analytics->grand_mean >= 4)
                            😊
                        @elseif($analytics->grand_mean >= 3)
                            😐
                        @else
                            😟
                        @endif
                    </span>
                </div>
                <div>
                    <span class="text-4xl font-bold text-secondary-900">{{ number_format($analytics->grand_mean ?? 0, 2) }}</span>
                    <span class="text-xl text-gray-400">/ 5.0</span>
                    <p class="text-sm text-gray-500 mt-1">Average of all responses</p>
                </div>
            </div>
        </div>
        
        <!-- Engagement Classification -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Engagement Classification</h3>
                <p class="text-sm text-gray-500 mt-1">Distribution of employees by engagement level</p>
            </div>
            <div class="card-body">
                @include('company.partials.engagement-breakdown')
            </div>
        </div>
        
        <!-- Category Scores -->
        <div class="card">
            <div class="card-header flex items-center justify-between">
                <div>
                    <h3 class="font-semibold text-secondary-900">Category Scores</h3>
                    <p class="text-sm text-gray-500 mt-1">Performance across the engagement dimensions</p>
                </div>
                <a href="{{ route('company.analytics.categories') }}" class="btn-ghost text-sm">
                    View Details <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            <div class="card-body">
                <div class="space-y-4">
                    @foreach($categoryScores as $category)
                        @php
                            $interpretation = \App\Models\Category::getScoreInterpretation($category['score']);
                        @endphp
                        <div class="flex items-center">
                            <div class="w-48 flex items-center">
                                <span class="text-xl mr-2">{{ $category['icon'] }}</span>
                                <span class="text-sm font-medium text-gray-700 truncate">{{ $category['name'] }}</span>
                            </div>
                            <div class="flex-1 mx-4">
                                <div class="score-bar">
                                    <div class="score-bar-fill" style="width: {{ $category['score'] }}%; background-color: {{ $interpretation['color'] }}"></div>
                                </div>
                            </div>
                            <div class="w-20 text-right">
                                <span class="text-sm font-semibold" style="color: {{ $interpretation['color'] }}">{{ number_format($category['score'], 0) }}%</span>
                            </div>
                            <div class="w-24 text-right">
                                <span class="text-xs px-2 py-1 rounded-full" style="background-color: {{ $interpretation['color'] }}20; color: {{ $interpretation['color'] }}">
                                    {{ $interpretation['label'] }}
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        
        <!-- CVF Culture Type Summary -->
        @if(isset($cvfData) && $cvfData)
            @include('company.partials.cvf-summary')
        @endif

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

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

        <!-- Key Insights Row -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Top Strengths -->
            <div class="card">
                <div class="card-header bg-green-50 border-green-100">
                    <div class="flex items-center">
                        <i class="fas fa-thumbs-up text-green-500 mr-2"></i>
                        <h3 class="font-semibold text-green-800">Top Strengths</h3>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="space-y-3">
                        @forelse($topItems as $item)
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                                <div>
                                    <p class="text-sm text-gray-700">{{ $item['question_text'] }}</p>
                                    <p class="text-xs text-gray-500 mt-1">
                                        <span class="font-medium text-green-600">{{ number_format($item['score'], 0) }}%</span>
                                        favorable · {{ $item['category'] }}
                                    </p>
                                </div>
                            </li>
                        @empty
                            <li class="text-gray-500 text-sm">No data available yet</li>
                        @endforelse
                    </ul>
                </div>
            </div>
            
            <!-- Areas for Improvement -->
            <div class="card">
                <div class="card-header bg-orange-50 border-orange-100">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-triangle text-orange-500 mr-2"></i>
                        <h3 class="font-semibold text-orange-800">Areas for Improvement</h3>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="space-y-3">
                        @forelse($bottomItems as $item)
                            <li class="flex items-start">
                                <i class="fas fa-arrow-circle-up text-orange-500 mt-1 mr-3"></i>
                                <div>
                                    <p class="text-sm text-gray-700">{{ $item['question_text'] }}</p>
                                    <p class="text-xs text-gray-500 mt-1">
                                        <span class="font-medium text-orange-600">{{ number_format($item['score'], 0) }}%</span>
                                        favorable · {{ $item['category'] }}
                                    </p>
                                </div>
                            </li>
                        @empty
                            <li class="text-gray-500 text-sm">No data available yet</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
        
    @else
        <!-- No Active Survey State -->
        <div class="card p-12 text-center">
            <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-clipboard-list text-gray-400 text-3xl"></i>
            </div>
            <h2 class="text-xl font-semibold text-gray-700 mb-2">No Active Survey</h2>
            <p class="text-gray-500 mb-6">There is no active employee engagement survey at the moment.</p>
            @if(auth()->user()->isSuperAdmin())
                <a href="{{ route('admin.surveys.create') }}" class="btn-primary">
                    <i class="fas fa-plus mr-2"></i>
                    Create New Survey
                </a>
            @else
                <p class="text-sm text-gray-400">Please contact your administrator to create a new survey.</p>
            @endif
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    @if(isset($analytics) && $analytics)
    const ctx = document.getElementById('engagementGauge').getContext('2d');
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [{{ $analytics->overall_engagement_index }}, {{ 100 - $analytics->overall_engagement_index }}],
                backgroundColor: ['{{ $analytics->getEngagementInterpretation()['color'] }}', '#e5e7eb'],
                borderWidth: 0,
            }]
        },
        options: {
            cutout: '70%',
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: { display: false },
                tooltip: { enabled: false }
            }
        }
    });
    @endif
</script>
@endpush