<div wire:poll.2s x-data="wakeLock" x-init="acquire()">
    @if(!$execution)
        <p class="text-sm text-gray-400">Execution not found.</p>
    @else
        {{-- Progress bar --}}
        <div class="mb-4">
            <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                <span>{{ $validatedCount }}/{{ $tasks->count() }} completed</span>
                <div class="flex gap-3">
                    @if($runningCount > 0)
                        <span class="text-blue-600">{{ $runningCount }} running</span>
                    @endif
                    @if($failedCount > 0)
                        <span class="text-red-600">{{ $failedCount }} failed</span>
                    @endif
                </div>
            </div>
            <div class="h-2 w-full rounded-full bg-gray-200">
                <div class="h-2 rounded-full bg-green-500 transition-all duration-500" style="width: {{ $progress }}%"></div>
            </div>
        </div>

        {{-- Status & controls --}}
        <div class="mb-4 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
                    {{ match($execution->status->value) {
                        'completed' => 'bg-green-100 text-green-700',
                        'failed', 'terminated' => 'bg-red-100 text-red-700',
                        'executing', 'planning' => 'bg-blue-100 text-blue-700',
                        'paused' => 'bg-yellow-100 text-yellow-700',
                        default => 'bg-gray-100 text-gray-700',
                    } }}">
                    {{ $execution->status->label() }}
                </span>
                @if($execution->trust_mode)
                    <span title="{{ $execution->trust_mode->description() }}"
                        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
                        {{ match($execution->trust_mode->value) {
                            'full_consensus' => 'bg-green-50 text-green-700 ring-1 ring-green-200',
                            'majority_consensus' => 'bg-yellow-50 text-yellow-700 ring-1 ring-yellow-200',
                            'single_agent' => 'bg-blue-50 text-blue-700 ring-1 ring-blue-200',
                            'llm_judge' => 'bg-purple-50 text-purple-700 ring-1 ring-purple-200',
                            default => 'bg-gray-50 text-gray-700',
                        } }}">
                        {{ $execution->trust_mode->label() }}
                    </span>
                @endif
                @if($execution->coordinator_iterations > 0)
                    <span class="text-xs text-gray-500">Iteration {{ $execution->coordinator_iterations }}</span>
                @endif
                @if($execution->total_cost_credits > 0)
                    <span class="text-xs text-gray-500">{{ $execution->total_cost_credits }} credits</span>
                @endif
            </div>

            @if($execution->status->isActive())
                <button wire:click="terminateExecution"
                    wire:confirm="Are you sure you want to terminate this execution?"
                    class="rounded bg-red-100 px-3 py-1 text-xs font-medium text-red-700 hover:bg-red-200">
                    Terminate
                </button>
            @endif
        </div>

        {{-- Task list --}}
        <div class="space-y-1">
            @foreach($tasks as $task)
                <div class="rounded-lg px-3 py-2 transition hover:bg-gray-50"
                    x-data="{ showDetail: false }">
                    <div class="flex items-center gap-3">
                        {{-- Status icon --}}
                        @switch($task->status->value)
                            @case('validated')
                                <span class="flex h-5 w-5 items-center justify-center rounded-full bg-green-100 text-green-600">
                                    <i class="fa-solid fa-check text-sm"></i>
                                </span>
                                @break
                            @case('running')
                            @case('assigned')
                                <span class="flex h-5 w-5 items-center justify-center">
                                    <i class="fa-solid fa-spinner fa-spin text-base text-blue-500"></i>
                                </span>
                                @break
                            @case('failed')
                            @case('qa_failed')
                                <span class="flex h-5 w-5 items-center justify-center rounded-full bg-red-100 text-red-600">
                                    <i class="fa-solid fa-xmark text-sm"></i>
                                </span>
                                @break
                            @case('needs_revision')
                                <span class="flex h-5 w-5 items-center justify-center rounded-full bg-amber-100 text-amber-600">
                                    <i class="fa-solid fa-rotate text-sm"></i>
                                </span>
                                @break
                            @default
                                <span class="flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 text-gray-400">
                                    <i class="fa-solid fa-circle text-[8px]"></i>
                                </span>
                        @endswitch

                        {{-- Task info --}}
                        <button @click="showDetail = !showDetail" class="flex flex-1 items-center gap-2 text-left">
                            <span class="text-sm font-medium text-gray-700">{{ $task->title }}</span>
                            @if($task->attempt_number > 1)
                                <span class="text-xs text-amber-600">(attempt {{ $task->attempt_number }})</span>
                            @endif
                        </button>

                        {{-- Meta --}}
                        <span class="text-xs text-gray-400">{{ $task->agent?->name ?? '—' }}</span>
                        @if($task->duration_ms)
                            <span class="text-xs text-gray-400">{{ number_format($task->duration_ms / 1000, 1) }}s</span>
                        @endif
                        @if($task->qa_score)
                            <span class="text-xs {{ $task->qa_score >= 0.7 ? 'text-green-600' : 'text-amber-600' }}">
                                {{ number_format($task->qa_score * 100) }}%
                            </span>
                        @endif
                    </div>

                    {{-- Expandable detail --}}
                    <div x-show="showDetail" x-cloak class="mt-2 ml-8 rounded-lg bg-gray-50 p-3 text-xs">
                        @if($task->description)
                            <p class="text-gray-600 mb-2">{{ $task->description }}</p>
                        @endif
                        @if($task->output && $task->status->value === 'validated')
                            <div class="mb-2">
                                <span class="font-medium text-gray-700">Output:</span>
                                <div class="mt-1 max-h-60 overflow-y-auto rounded bg-white p-2 text-gray-600 border border-gray-200 prose-output">
                                    {!! \App\Domain\Experiment\Services\ArtifactContentResolver::renderAsHtml($task->output, 2000) !!}
                                </div>
                            </div>
                        @endif
                        @if($task->qa_feedback)
                            <div class="mb-2">
                                <span class="font-medium text-gray-700">QA Feedback:</span>
                                <span class="text-gray-600">{{ $task->qa_feedback['feedback'] ?? 'No feedback' }}</span>
                            </div>
                        @endif
                        @if(!empty($task->qa_feedback['unverified']))
                            <div class="mb-2">
                                <span class="font-medium text-amber-700">Could not verify:</span>
                                <ul class="mt-1 list-disc pl-5 text-amber-700">
                                    @foreach($task->qa_feedback['unverified'] as $unverified)
                                        <li>{{ $unverified }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if($task->error_message)
                            <p class="text-red-600">Error: {{ $task->error_message }}</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Chat Room Messages --}}
        @if($isChatRoom && $chatMessages->isNotEmpty())
            <div class="mt-4 border-t border-gray-200 pt-4">
                <h4 class="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Chat Room Discussion</h4>
                <div class="max-h-[32rem] space-y-2 overflow-y-auto">
                    @php $currentRound = 0; @endphp
                    @foreach($chatMessages as $msg)
                        @if($msg->round !== $currentRound)
                            @php $currentRound = $msg->round; @endphp
                            @if($currentRound > 0)
                                <div class="my-2 flex items-center gap-2">
                                    <div class="h-px flex-1 bg-gray-200"></div>
                                    <span class="text-[10px] font-medium text-gray-400">Round {{ $currentRound }}</span>
                                    <div class="h-px flex-1 bg-gray-200"></div>
                                </div>
                            @endif
                        @endif
                        <div class="flex gap-2 {{ $msg->role === 'system' ? 'justify-center' : '' }}">
                            @if($msg->role === 'system')
                                <div class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs text-gray-500 italic">{{ $msg->content }}</div>
                            @else
                                <div class="flex-1 rounded-lg border border-gray-100 bg-white p-2.5">
                                    <div class="mb-1 flex items-center gap-1.5">
                                        <span class="inline-flex rounded-full bg-indigo-50 px-2 py-0.5 text-[10px] font-semibold text-indigo-700">{{ $msg->agent_name }}</span>
                                        <span class="text-[10px] text-gray-400">{{ $msg->created_at?->diffForHumans() }}</span>
                                    </div>
                                    <div class="text-sm text-gray-700 whitespace-pre-wrap">{{ Str::limit($msg->content, 2000) }}</div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Final Output --}}
        @if($execution->final_output && $execution->status->value === 'completed')
            <div class="mt-4 border-t border-gray-200 pt-4">
                <h4 class="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Final Result</h4>
                <div class="max-h-96 overflow-y-auto rounded-lg bg-gray-50 p-3 text-sm text-gray-700 prose-output">
                    {!! \App\Domain\Experiment\Services\ArtifactContentResolver::renderAsHtml($execution->final_output) !!}
                </div>
            </div>
        @endif

        {{-- Artifacts --}}
        @if($execution->artifacts_count > 0)
            <div class="mt-4 border-t border-gray-200 pt-4">
                <livewire:experiments.artifact-list :artifact-owner="$execution" wire:key="exec-artifacts-{{ $execution->id }}" />
            </div>
        @endif
    @endif
</div>
