@extends('layouts.admin')

@section('title', 'Heatmap')
@section('header', 'Department × Category Heatmap')
@section('subheader', 'Compare engagement scores across departments and dimensions')

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

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

<div class="space-y-6">
    @if(count($heatmapData['data']) > 0)
        <!-- Legend -->
        <div class="card">
            <div class="card-body">
                <div class="flex flex-wrap items-center justify-center gap-4">
                    <span class="flex items-center text-sm">
                        <span class="w-4 h-4 rounded mr-2 bg-green-500"></span>
                        Strong (75%+)
                    </span>
                    <span class="flex items-center text-sm">
                        <span class="w-4 h-4 rounded mr-2 bg-lime-400"></span>
                        Healthy (65-74%)
                    </span>
                    <span class="flex items-center text-sm">
                        <span class="w-4 h-4 rounded mr-2 bg-yellow-400"></span>
                        Moderate (55-64%)
                    </span>
                    <span class="flex items-center text-sm">
                        <span class="w-4 h-4 rounded mr-2 bg-orange-400"></span>
                        Needs Work (45-54%)
                    </span>
                    <span class="flex items-center text-sm">
                        <span class="w-4 h-4 rounded mr-2 bg-red-500"></span>
                        Critical (&lt;45%)
                    </span>
                </div>
            </div>
        </div>
        
        <!-- Heatmap -->
        <div class="card overflow-x-auto">
            <table class="min-w-full">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 bg-gray-50 sticky left-0">
                            Department
                        </th>
                        @foreach($heatmapData['categories'] as $cat)
                            <th class="px-2 py-3 text-center text-xs font-medium text-gray-600 bg-gray-50 min-w-[80px]" title="{{ $cat['name'] }}">
                                <span class="block text-lg mb-1">{{ $cat['icon'] }}</span>
                                <span class="block truncate max-w-[70px]">{{ Str::limit($cat['name'], 10) }}</span>
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach($heatmapData['data'] as $row)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm font-medium text-gray-900 bg-white sticky left-0">
                                {{ $row['department'] }}
                            </td>
                            @foreach($heatmapData['categories'] as $cat)
                                @php
                                    $score = $row[$cat['slug']] ?? null;
                                    if ($score !== null) {
                                        if ($score >= 75) {
                                            $bgColor = 'bg-green-500';
                                            $textColor = 'text-white';
                                        } elseif ($score >= 65) {
                                            $bgColor = 'bg-lime-400';
                                            $textColor = 'text-gray-800';
                                        } elseif ($score >= 55) {
                                            $bgColor = 'bg-yellow-400';
                                            $textColor = 'text-gray-800';
                                        } elseif ($score >= 45) {
                                            $bgColor = 'bg-orange-400';
                                            $textColor = 'text-white';
                                        } else {
                                            $bgColor = 'bg-red-500';
                                            $textColor = 'text-white';
                                        }
                                    } else {
                                        $bgColor = 'bg-gray-100';
                                        $textColor = 'text-gray-400';
                                    }
                                @endphp
                                <td class="px-2 py-3 text-center">
                                    <div class="heatmap-cell {{ $bgColor }} {{ $textColor }} mx-auto" title="{{ $cat['name'] }}: {{ $score !== null ? $score.'%' : 'N/A' }}">
                                        {{ $score !== null ? round($score).'%' : '-' }}
                                    </div>
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Insights -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Highest Scores -->
            <div class="card">
                <div class="card-header bg-green-50">
                    <h3 class="font-semibold text-green-800">
                        <i class="fas fa-arrow-up mr-2"></i>
                        Top Performing Areas
                    </h3>
                </div>
                <div class="card-body">
                    @php
                        $topScores = collect();
                        foreach ($heatmapData['data'] as $row) {
                            foreach ($heatmapData['categories'] as $cat) {
                                $score = $row[$cat['slug']] ?? null;
                                if ($score !== null && $score >= 70) {
                                    $topScores->push([
                                        'department' => $row['department'],
                                        'category' => $cat['name'],
                                        'icon' => $cat['icon'],
                                        'score' => $score,
                                    ]);
                                }
                            }
                        }
                        $topScores = $topScores->sortByDesc('score')->take(5);
                    @endphp
                    @if($topScores->count() > 0)
                        <ul class="space-y-2">
                            @foreach($topScores as $item)
                                <li class="flex items-center justify-between">
                                    <span class="text-sm">
                                        <span class="mr-1">{{ $item['icon'] }}</span>
                                        {{ $item['department'] }} - {{ $item['category'] }}
                                    </span>
                                    <span class="badge badge-success">{{ round($item['score']) }}%</span>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-gray-500 text-sm">No areas scoring 70% or above</p>
                    @endif
                </div>
            </div>
            
            <!-- Areas Needing Attention -->
            <div class="card">
                <div class="card-header bg-orange-50">
                    <h3 class="font-semibold text-orange-800">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        Areas Needing Attention
                    </h3>
                </div>
                <div class="card-body">
                    @php
                        $lowScores = collect();
                        foreach ($heatmapData['data'] as $row) {
                            foreach ($heatmapData['categories'] as $cat) {
                                $score = $row[$cat['slug']] ?? null;
                                if ($score !== null && $score < 60) {
                                    $lowScores->push([
                                        'department' => $row['department'],
                                        'category' => $cat['name'],
                                        'icon' => $cat['icon'],
                                        'score' => $score,
                                    ]);
                                }
                            }
                        }
                        $lowScores = $lowScores->sortBy('score')->take(5);
                    @endphp
                    @if($lowScores->count() > 0)
                        <ul class="space-y-2">
                            @foreach($lowScores as $item)
                                <li class="flex items-center justify-between">
                                    <span class="text-sm">
                                        <span class="mr-1">{{ $item['icon'] }}</span>
                                        {{ $item['department'] }} - {{ $item['category'] }}
                                    </span>
                                    <span class="badge badge-danger">{{ round($item['score']) }}%</span>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-gray-500 text-sm">No areas scoring below 60%</p>
                    @endif
                </div>
            </div>
        </div>
    @else
        <!-- No Data Available -->
        <div class="card">
            <div class="card-body text-center py-12">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-border-all text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-gray-700 font-medium mb-2">Heatmap Not Available</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                    Department breakdown requires at least 5 responses per department to protect anonymity.
                    @if(isset($analytics))
                        <br><br>
                        <span class="text-sm">
                            Total responses: <strong>{{ $analytics->total_responses }}</strong>
                        </span>
                    @endif
                </p>
                <p class="text-sm text-gray-400 mt-4">
                    <i class="fas fa-info-circle mr-1"></i>
                    Either no department data was collected, or all departments have fewer than 5 responses.
                </p>
            </div>
        </div>
    @endif
</div>
@endsection