@extends('layouts.admin')

@section('title', 'Question Analysis')
@section('header', 'Question Analysis')
@section('subheader', 'All questions ranked by favorability score')

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

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

<div class="space-y-6">
    <!-- Summary Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="stat-card">
            <div class="stat-value">{{ $questions->count() }}</div>
            <div class="stat-label">Total Questions</div>
        </div>
        <div class="stat-card">
            <div class="stat-value text-green-500">{{ $questions->where('favorability', '>=', 70)->count() }}</div>
            <div class="stat-label">Strong (70%+)</div>
        </div>
        <div class="stat-card">
            <div class="stat-value text-red-500">{{ $questions->where('favorability', '<', 50)->count() }}</div>
            <div class="stat-label">Needs Attention (&lt;50%)</div>
        </div>
    </div>

    <!-- Questions Table -->
    <div class="card">
        <div class="card-header flex items-center justify-between">
            <h3 class="font-semibold text-secondary-900">All Questions Ranked</h3>
            <span class="text-sm text-gray-500">Sorted by favorability (highest first)</span>
        </div>
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        <th class="w-12">#</th>
                        <th>Question</th>
                        <th class="w-32">Category</th>
                        <th class="w-24 text-center">Mean</th>
                        <th class="w-32 text-center">Favorability</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($questions as $index => $q)
                        @php 
                            $interpretation = \App\Models\Category::getScoreInterpretation($q['favorability'] ?? 0);
                        @endphp
                        <tr class="hover:bg-gray-50">
                            <td class="text-gray-400 font-medium">{{ $index + 1 }}</td>
                            <td>
                                <p class="text-gray-900">{{ $q['text'] }}</p>
                            </td>
                            <td>
                                <span class="text-sm text-gray-600">
                                    <span class="mr-1">{{ $q['category_icon'] }}</span>
                                    {{ $q['category'] }}
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="font-medium">{{ number_format($q['mean'] ?? 0, 2) }}</span>
                            </td>
                            <td class="text-center">
                                <div class="flex items-center justify-center">
                                    <div class="w-16 h-2 bg-gray-100 rounded-full mr-2">
                                        <div class="h-full rounded-full" style="width: {{ $q['favorability'] ?? 0 }}%; background-color: {{ $interpretation['color'] }}"></div>
                                    </div>
                                    <span class="font-bold" style="color: {{ $interpretation['color'] }}">
                                        {{ round($q['favorability'] ?? 0) }}%
                                    </span>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection