<div>
    @php
        $payload = $signal->payload ?? [];
        $severity = $payload['severity'] ?? 'minor';
        $severityColors = [
            'critical' => 'bg-red-100 text-red-800',
            'major' => 'bg-orange-100 text-orange-800',
            'minor' => 'bg-yellow-100 text-yellow-800',
            'cosmetic' => 'bg-gray-100 text-gray-800',
        ];
        $statusColor = $signal->status?->color() ?? 'gray';
        $reportedTypeLabels = [
            'bug' => ['label' => 'Бъг', 'color' => 'bg-red-100 text-red-800'],
            'feature_request' => ['label' => 'Промяна', 'color' => 'bg-blue-100 text-blue-800'],
            'auto' => ['label' => 'Авто', 'color' => 'bg-gray-100 text-gray-600'],
        ];
        $suggestedTypeLabels = [
            'bug' => 'bg-red-100 text-red-800',
            'feature_request' => 'bg-blue-100 text-blue-800',
        ];
    @endphp

    {{-- Header --}}
    <div class="flex items-start justify-between mb-6">
        <div>
            <div class="flex items-center gap-2 mb-1">
                <a href="{{ route('bug-reports.index') }}" wire:navigate class="text-sm text-gray-500 hover:text-gray-900">Bug Reports</a>
                <span class="text-gray-400">/</span>
                <span class="text-sm text-gray-500">{{ $signal->project_key ?? 'Report' }}</span>
            </div>
            <h1 class="text-2xl font-semibold text-gray-900">{{ $payload['title'] ?? 'Bug Report' }}</h1>
            <div class="flex items-center gap-2 mt-2">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ $severityColors[$severity] ?? 'bg-gray-100 text-gray-800' }}">
                    {{ ucfirst($severity) }}
                </span>
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-{{ $statusColor }}-100 text-{{ $statusColor }}-800">
                    {{ $signal->status?->label() ?? 'Received' }}
                </span>
                @if($signal->project_key)
                    <span class="text-xs text-gray-500">{{ $signal->project_key }}</span>
                @endif
                @if($signal->reported_type)
                    @php $rt = $reportedTypeLabels[$signal->reported_type] ?? ['label' => $signal->reported_type, 'color' => 'bg-gray-100 text-gray-600']; @endphp
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium {{ $rt['color'] }}">
                        <span class="opacity-60">Reporter:</span> {{ $rt['label'] }}
                    </span>
                @endif
                @if($signal->suggested_type)
                    @php
                        $stColor = $suggestedTypeLabels[$signal->suggested_type] ?? 'bg-gray-100 text-gray-600';
                        $stLabel = $signal->suggested_type === 'bug' ? 'Бъг' : 'Промяна';
                        $stMuted = ($signal->suggested_type_confidence ?? 1.0) < 0.6;
                    @endphp
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium {{ $stColor }} {{ $stMuted ? 'opacity-60 italic' : '' }}"
                          title="Увереност: {{ (int) round(($signal->suggested_type_confidence ?? 0) * 100) }}%">
                        <span class="opacity-60">Triage:</span> {{ $stLabel }}
                    </span>
                @endif
            </div>
        </div>

        {{-- Header actions: Edit + Status transitions --}}
        <div class="flex items-center gap-2 flex-wrap">
            <button
                wire:click="openEditModal"
                class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
            >
                Edit
            </button>
            @foreach($allowedTransitions as $transition)
                <button
                    wire:click="updateStatus('{{ $transition->value }}')"
                    wire:confirm="Change status to {{ $transition->label() }}?"
                    class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 {{ in_array($transition->value, ['triaged']) && $signal->status?->isTerminal() ? 'border-blue-300 text-blue-700 hover:bg-blue-50' : '' }}"
                >
                    {{ $signal->status?->isTerminal() && $transition->value === 'triaged' ? 'Reopen' : $transition->label() }}
                </button>
            @endforeach
        </div>
    </div>

    <div class="grid grid-cols-3 gap-6">
        {{-- Left column: main content --}}
        <div class="col-span-2 space-y-6">

            {{-- Description --}}
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <h2 class="text-sm font-semibold text-gray-900 mb-2">Description</h2>
                <p class="text-sm text-gray-700 whitespace-pre-wrap">{{ $payload['description'] ?? '—' }}</p>
            </div>

            {{-- Attachments --}}
            @if($mediaFiles->isNotEmpty())
                <div class="bg-white rounded-lg border border-gray-200 p-4">
                    <h2 class="text-sm font-semibold text-gray-900 mb-3">Attachments ({{ $mediaFiles->count() }})</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach($mediaFiles as $media)
                            <a href="{{ $media->getUrl() }}" target="_blank" class="block">
                                @if(Str::startsWith($media->mime_type, 'image/'))
                                    <img
                                        src="{{ $media->getUrl() }}"
                                        alt="{{ $media->file_name }}"
                                        class="rounded border border-gray-200 max-w-full cursor-zoom-in hover:opacity-90 transition"
                                    />
                                @else
                                    <div class="flex items-center gap-2 p-3 rounded border border-gray-200 hover:bg-gray-50 transition">
                                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                        </svg>
                                        <span class="text-sm text-gray-700 truncate">{{ $media->file_name }}</span>
                                        <span class="text-xs text-gray-400">({{ Number::fileSize($media->size) }})</span>
                                    </div>
                                @endif
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Suspect Files --}}
            @if(!empty($payload['suspect_files']))
                <div class="bg-white rounded-lg border border-gray-200 p-4">
                    <h2 class="text-sm font-semibold text-gray-900 mb-3">Suspect Files</h2>
                    <div class="space-y-2">
                        @foreach($payload['suspect_files'] as $file)
                            @php $pct = (int) round(($file['confidence'] ?? 0) * 100); @endphp
                            <div class="flex items-start gap-3">
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs font-mono text-gray-800 truncate">{{ $file['path'] ?? '' }}</p>
                                    <p class="text-xs text-gray-400 truncate">{{ $file['reason'] ?? '' }}</p>
                                </div>
                                <span class="shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold
                                    {{ $pct >= 80 ? 'bg-red-100 text-red-700' : ($pct >= 60 ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-600') }}">
                                    {{ $pct }}%
                                </span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Breadcrumbs (structured, typed) — preferred over action_log when present --}}
            @if(!empty($payload['breadcrumbs']))
                @php
                    $bcLevelColors = [
                        'error'   => 'text-red-600 bg-red-50',
                        'warning' => 'text-yellow-700 bg-yellow-50',
                        'info'    => 'text-blue-600 bg-blue-50',
                        'debug'   => 'text-gray-500 bg-gray-50',
                        'log'     => 'text-gray-600',
                    ];
                @endphp
                <div x-data="{ open: false }" class="bg-white rounded-lg border border-gray-200 p-4">
                    <button @click="open = !open" class="flex items-center justify-between w-full text-sm font-semibold text-gray-900">
                        <span>Breadcrumbs ({{ count($payload['breadcrumbs']) }})</span>
                        <span x-text="open ? '▲' : '▼'" class="text-gray-400 text-xs"></span>
                    </button>
                    <div x-show="open" x-cloak class="mt-3 overflow-auto max-h-72 space-y-0.5 font-mono text-xs">
                        @foreach($payload['breadcrumbs'] as $bc)
                            @php
                                $bcLevel    = $bc['level']    ?? 'log';
                                $bcCategory = $bc['category'] ?? '';
                                $bcData     = $bc['data']     ?? [];
                                $bcCls      = $bcLevelColors[$bcLevel] ?? 'text-gray-500';
                                $bcStack    = null;
                                $bcError    = null;

                                // Build the human-readable summary from data, keyed by category
                                $bcSummary = '';
                                if (str_starts_with($bcCategory, 'navigation')) {
                                    $from = $bcData['from'] ?? '';
                                    $to   = $bcData['to']   ?? '';
                                    $bcSummary = trim("$from → $to", ' →');
                                } elseif ($bcCategory === 'ui.click' || ($bcCategory === 'ui' && !array_key_exists('value', $bcData))) {
                                    $bcTarget   = is_array($bcData['target'] ?? null) ? $bcData['target'] : [];
                                    $role       = $bcTarget['role'] ?? '';
                                    $rawText    = $bcTarget['text'] ?? $bcData['text'] ?? $bcData['label'] ?? '';
                                    $cleanText  = trim(preg_replace('/\s+/', ' ', (string) $rawText));
                                    $shortText  = mb_strlen($cleanText) > 50 ? mb_substr($cleanText, 0, 50).'…' : $cleanText;
                                    $component  = $bcTarget['component'] ?? '';
                                    $bcSummary  = 'clicked';
                                    if ($role) { $bcSummary .= ' '.$role; }
                                    if ($shortText) { $bcSummary .= ' "'.$shortText.'"'; }
                                    if ($component) { $bcSummary .= ' @'.$component; }
                                } elseif ($bcCategory === 'ui.input' || ($bcCategory === 'ui' && array_key_exists('value', $bcData))) {
                                    $bcTarget  = is_array($bcData['target'] ?? null) ? $bcData['target'] : [];
                                    $name      = $bcData['name'] ?? $bcTarget['name'] ?? $bcTarget['selector'] ?? $bcData['id'] ?? '';
                                    $component = $bcTarget['component'] ?? '';
                                    $bcSummary = trim('input '.$name).' (redacted)';
                                    if ($component) { $bcSummary .= ' @'.$component; }
                                } elseif (in_array($bcCategory, ['http', 'xhr', 'fetch'])) {
                                    $method = strtoupper($bcData['method'] ?? '');
                                    $url    = $bcData['url']        ?? '';
                                    $status = $bcData['status_code'] ?? $bcData['statusCode'] ?? $bcData['status'] ?? '';
                                    $bcSummary = trim("$method $url".($status ? " → $status" : ''));
                                    $bcError = ($status >= 400 && isset($bcData['response_body']))
                                        ? $bcData['response_body']
                                        : null;
                                } elseif ($bcCategory === 'console') {
                                    $lvl = strtoupper($bcData['level'] ?? $bcLevel);
                                    $msg = $bcData['message'] ?? ($bc['message'] ?? '');
                                    $bcSummary = "$lvl: $msg";
                                } elseif ($bcCategory === 'error') {
                                    $type = $bcData['type']    ?? 'Error';
                                    $msg  = $bcData['message'] ?? ($bc['message'] ?? '');
                                    $bcSummary = "$type: $msg";
                                    $bcStack   = $bcData['stack'] ?? null;
                                } else {
                                    $bcSummary = $bc['message'] ?? '';
                                    if (empty($bcSummary) && !empty($bcData)) {
                                        // Generic fallback: key=value pairs
                                        $pairs = [];
                                        foreach (array_slice($bcData, 0, 4) as $k => $v) {
                                            if (is_scalar($v)) $pairs[] = "$k=$v";
                                        }
                                        $bcSummary = implode(' ', $pairs);
                                    }
                                }
                            @endphp
                            <div class="px-2 py-1 rounded {{ $bcCls }}">
                                <div class="flex items-start gap-2">
                                    <span class="shrink-0 text-gray-400 whitespace-nowrap">{{ $bc['timestamp'] ?? '' }}</span>
                                    @if($bcCategory)
                                        <span class="shrink-0 text-gray-400">[{{ $bcCategory }}]</span>
                                    @endif
                                    <span class="flex-1 break-all">{{ $bcSummary }}</span>
                                </div>
                                {{-- Error stack trace (collapsible) --}}
                                @if(!empty($bcStack))
                                    <div x-data="{ s: false }" class="mt-0.5 ml-2">
                                        <button @click="s = !s" class="text-gray-400 hover:text-gray-600 text-xs">
                                            <span x-text="s ? '▲ hide stack' : '▼ stack trace'"></span>
                                        </button>
                                        <pre x-show="s" x-cloak class="mt-1 whitespace-pre-wrap text-gray-500 text-xs leading-tight">{{ $bcStack }}</pre>
                                    </div>
                                @endif
                                {{-- HTTP error response body --}}
                                @if(!empty($bcError))
                                    <div class="mt-0.5 ml-2 text-red-500 break-all">{{ Str::limit($bcError, 200) }}</div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            {{-- Action Log (fallback when no structured breadcrumbs) --}}
            @elseif(!empty($payload['action_log']))
                <div x-data="{ open: false }" class="bg-white rounded-lg border border-gray-200 p-4">
                    <button @click="open = !open" class="flex items-center justify-between w-full text-sm font-semibold text-gray-900">
                        <span>Action Log ({{ count($payload['action_log']) }} events)</span>
                        <span x-text="open ? '▲' : '▼'" class="text-gray-400 text-xs"></span>
                    </button>
                    <div x-show="open" x-cloak class="mt-3 overflow-auto max-h-64">
                        <table class="min-w-full text-xs">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-2 py-1 text-left text-gray-500">Time</th>
                                    <th class="px-2 py-1 text-left text-gray-500">Action</th>
                                    <th class="px-2 py-1 text-left text-gray-500">Target</th>
                                    <th class="px-2 py-1 text-left text-gray-500">Detail</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($payload['action_log'] as $entry)
                                    <tr>
                                        <td class="px-2 py-1 text-gray-400 whitespace-nowrap font-mono">{{ $entry['timestamp'] ?? '' }}</td>
                                        <td class="px-2 py-1 text-gray-700">{{ $entry['action'] ?? '' }}</td>
                                        <td class="px-2 py-1 text-gray-500 font-mono truncate max-w-xs">{{ $entry['target'] ?? '' }}</td>
                                        <td class="px-2 py-1 text-gray-500 truncate max-w-xs">{{ $entry['detail'] ?? '' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            {{-- Console Log --}}
            @if(!empty($payload['console_log']))
                <div x-data="{ open: false }" class="bg-white rounded-lg border border-gray-200 p-4">
                    <button @click="open = !open" class="flex items-center justify-between w-full text-sm font-semibold text-gray-900">
                        <span>Console Log ({{ count($payload['console_log']) }} entries)</span>
                        <span x-text="open ? '▲' : '▼'" class="text-gray-400 text-xs"></span>
                    </button>
                    <div x-show="open" x-cloak class="mt-3 overflow-auto max-h-64 font-mono text-xs space-y-0.5">
                        @foreach($payload['console_log'] as $entry)
                            @php
                                $level = $entry['level'] ?? 'log';
                                $colors = ['error' => 'text-red-600 bg-red-50', 'warn' => 'text-yellow-700 bg-yellow-50', 'info' => 'text-blue-600', 'log' => 'text-gray-600'];
                                $cls = $colors[$level] ?? 'text-gray-500';
                            @endphp
                            <div class="px-2 py-0.5 rounded {{ $cls }}">
                                <span class="text-gray-400 mr-2">{{ $entry['timestamp'] ?? '' }}</span>
                                <span class="uppercase font-semibold mr-2">{{ $level }}</span>
                                {{ $entry['message'] ?? '' }}
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Network Log --}}
            @if(!empty($payload['network_log']))
                <div x-data="{ open: false }" class="bg-white rounded-lg border border-gray-200 p-4">
                    <button @click="open = !open" class="flex items-center justify-between w-full text-sm font-semibold text-gray-900">
                        <span>Network Log ({{ count($payload['network_log']) }} requests)</span>
                        <span x-text="open ? '▲' : '▼'" class="text-gray-400 text-xs"></span>
                    </button>
                    <div x-show="open" x-cloak class="mt-3 overflow-auto max-h-64">
                        <table class="min-w-full text-xs">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-2 py-1 text-left text-gray-500">Method</th>
                                    <th class="px-2 py-1 text-left text-gray-500">URL</th>
                                    <th class="px-2 py-1 text-left text-gray-500">Status</th>
                                    <th class="px-2 py-1 text-left text-gray-500">Duration</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($payload['network_log'] as $req)
                                    @php $statusCode = (int)($req['status'] ?? 0); @endphp
                                    <tr>
                                        <td class="px-2 py-1 font-mono font-semibold text-gray-700">{{ $req['method'] ?? '' }}</td>
                                        <td class="px-2 py-1 text-gray-500 truncate max-w-xs font-mono">{{ $req['url'] ?? '' }}</td>
                                        <td class="px-2 py-1 {{ $statusCode >= 400 ? 'text-red-600 font-semibold' : 'text-green-600' }}">{{ $req['status'] ?? '' }}</td>
                                        <td class="px-2 py-1 text-gray-500">{{ isset($req['duration_ms']) ? $req['duration_ms'].'ms' : '' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            {{-- Comments --}}
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <h2 class="text-sm font-semibold text-gray-900 mb-3">Comments</h2>

                @if($signal->comments->isEmpty())
                    <p class="text-sm text-gray-400 mb-4">No comments yet.</p>
                @else
                    <div class="space-y-3 mb-4">
                        @php
                            $reporterName = $payload['reporter_name'] ?? 'Reporter';
                            $authorMeta = function ($comment) use ($reporterName) {
                                return match ($comment->author_type) {
                                    'agent'    => ['label' => 'Agent',          'avatar' => 'AI', 'class' => 'bg-purple-100 text-purple-700'],
                                    'reporter' => ['label' => $reporterName,    'avatar' => mb_substr($reporterName, 0, 1), 'class' => 'bg-blue-100 text-blue-700'],
                                    'support'  => ['label' => $comment->user?->name ?? 'Support', 'avatar' => mb_substr($comment->user?->name ?? 'S', 0, 1), 'class' => 'bg-green-100 text-green-700'],
                                    default    => ['label' => $comment->user?->name ?? 'Unknown', 'avatar' => mb_substr($comment->user?->name ?? 'U', 0, 1), 'class' => 'bg-gray-200 text-gray-600'],
                                };
                            };
                        @endphp
                        @foreach($signal->comments as $comment)
                            @php $meta = $authorMeta($comment); @endphp
                            <div class="flex items-start gap-3">
                                <div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold {{ $meta['class'] }}">
                                    {{ $meta['avatar'] }}
                                </div>
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-0.5">
                                        <span class="text-xs font-medium text-gray-800">{{ $meta['label'] }}</span>
                                        @if(! $comment->widget_visible)
                                            <span class="text-[10px] uppercase tracking-wide bg-gray-100 text-gray-500 px-1.5 py-0.5 rounded">internal</span>
                                        @endif
                                        <span class="text-xs text-gray-400">{{ $comment->created_at?->diffForHumans() }}</span>
                                    </div>
                                    @if($comment->body !== '')
                                        <div class="prose prose-sm max-w-none text-gray-700">{!! Str::markdown($comment->body, ['html_input' => 'strip', 'allow_unsafe_links' => false]) !!}</div>
                                    @endif
                                    @php $attachments = $comment->getMedia('attachments'); @endphp
                                    @if($attachments->isNotEmpty())
                                        <div class="mt-2 flex flex-wrap gap-2">
                                            @foreach($attachments as $media)
                                                <a
                                                    href="{{ $media->getFullUrl() }}"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    class="block w-24 h-24 rounded border border-gray-200 overflow-hidden hover:ring-2 hover:ring-primary-300 transition"
                                                    title="{{ $media->file_name }}"
                                                >
                                                    <img
                                                        src="{{ $media->hasGeneratedConversion('thumb') ? $media->getFullUrl('thumb') : $media->getFullUrl() }}"
                                                        alt=""
                                                        loading="lazy"
                                                        class="w-full h-full object-cover"
                                                    />
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <form
                    wire:submit.prevent="addComment"
                    class="space-y-2"
                    x-data="{
                        handlePaste(event) {
                            const items = event.clipboardData?.items || [];
                            const files = [];
                            for (const it of items) if (it.kind === 'file') { const f = it.getAsFile(); if (f) files.push(f); }
                            if (files.length) {
                                event.preventDefault();
                                $wire.uploadMultiple('commentImages', files, () => {}, () => {}, () => {});
                            }
                        }
                    }"
                >
                    <div
                        x-on:dragover.prevent="$el.classList.add('ring-2','ring-primary-300')"
                        x-on:dragleave="$el.classList.remove('ring-2','ring-primary-300')"
                        x-on:drop.prevent="
                            $el.classList.remove('ring-2','ring-primary-300');
                            if ($event.dataTransfer.files.length) {
                                $wire.uploadMultiple('commentImages', Array.from($event.dataTransfer.files), () => {}, () => {}, () => {});
                            }
                        "
                        class="rounded-lg transition-all"
                    >
                        <x-form-textarea
                            wire:model="commentText"
                            rows="2"
                            placeholder="Add a comment or drop/paste an image..."
                            x-on:paste="handlePaste($event)"
                            :error="$errors->first('commentText')"
                        />
                    </div>

                    @error('commentImages.*')
                        <p class="text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    @error('commentImages')
                        <p class="text-sm text-red-600">{{ $message }}</p>
                    @enderror

                    @if(count($commentImages) > 0)
                        <div
                            class="flex flex-wrap gap-2"
                            wire:loading.class="opacity-50"
                            wire:target="commentImages"
                        >
                            @foreach($commentImages as $idx => $upload)
                                @if(is_object($upload) && method_exists($upload, 'temporaryUrl') && method_exists($upload, 'isPreviewable') && $upload->isPreviewable())
                                    <div class="relative w-16 h-16 rounded border border-gray-200 overflow-hidden group">
                                        <img src="{{ $upload->temporaryUrl() }}" class="w-full h-full object-cover" alt="">
                                        <button
                                            type="button"
                                            wire:click="removeCommentImage({{ $idx }})"
                                            class="absolute top-0.5 right-0.5 w-4 h-4 rounded-full bg-gray-900/75 text-white text-xs leading-none flex items-center justify-center"
                                            title="Remove"
                                        >&times;</button>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endif

                    <div class="flex items-center gap-2">
                        <label
                            class="cursor-pointer px-2.5 py-2 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 select-none"
                            title="Attach image"
                        >
                            <span aria-hidden="true">📎</span>
                            <input
                                type="file"
                                wire:model="commentImages"
                                multiple
                                accept="image/jpeg,image/png,image/webp,image/gif"
                                class="hidden"
                            >
                        </label>
                        <button
                            type="submit"
                            class="px-3 py-2.5 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700"
                            wire:loading.attr="disabled"
                            wire:target="addComment,commentImages"
                        >
                            <span wire:loading.remove wire:target="addComment,commentImages">Post</span>
                            <span wire:loading wire:target="addComment,commentImages">Saving…</span>
                        </button>
                        <label class="text-xs text-gray-600 flex items-center gap-2 ml-auto select-none">
                            <input type="checkbox" wire:model.live="commentVisibleToReporter" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            Visible to reporter (sent to widget). Uncheck to keep as an internal note.
                        </label>
                    </div>
                </form>
            </div>
        </div>

        {{-- Right column: metadata + delegate --}}
        <div class="space-y-4">

            {{-- Metadata --}}
            <div class="bg-white rounded-lg border border-gray-200 p-4 space-y-3">
                <h2 class="text-sm font-semibold text-gray-900">Details</h2>
                <dl class="space-y-2 text-sm">
                    <div>
                        <dt class="text-gray-500">Reporter</dt>
                        <dd class="text-gray-800 font-medium">{{ $payload['reporter_name'] ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Page URL</dt>
                        <dd class="text-gray-800 truncate">
                            <a href="{{ $payload['url'] ?? '#' }}" target="_blank" class="text-primary-600 hover:underline">
                                {{ $payload['url'] ?? '—' }}
                            </a>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Environment</dt>
                        <dd class="text-gray-800">{{ ucfirst($payload['environment'] ?? '—') }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Viewport</dt>
                        <dd class="text-gray-800">{{ $payload['viewport'] ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Browser</dt>
                        <dd class="text-gray-800 text-xs truncate">{{ $payload['browser'] ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Reported</dt>
                        <dd class="text-gray-800" title="{{ $signal->created_at?->diffForHumans() }}">
                            {{ $signal->created_at?->format('Y-m-d H:i') }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-gray-500">Assignee</dt>
                        <dd class="text-gray-800 font-medium">{{ $signal->assignedUser?->name ?? '—' }}</dd>
                    </div>
                    @if($signal->experiment_id)
                        <div>
                            <dt class="text-gray-500">Experiment</dt>
                            <dd>
                                <a href="{{ route('experiments.show', $signal->experiment_id) }}" wire:navigate class="text-primary-600 hover:underline text-xs font-mono">
                                    {{ substr($signal->experiment_id, 0, 8) }}…
                                </a>
                            </dd>
                        </div>
                    @endif
                </dl>
            </div>

            {{-- Deploy Info --}}
            @if(!empty($payload['deploy_commit']) || !empty($payload['deploy_timestamp']))
                <div class="bg-white rounded-lg border border-gray-200 p-4 space-y-2">
                    <h2 class="text-sm font-semibold text-gray-900">Deploy</h2>
                    @if(!empty($payload['deploy_commit']))
                        <div>
                            <dt class="text-xs text-gray-500">Commit</dt>
                            <dd class="text-xs font-mono text-gray-800">{{ substr($payload['deploy_commit'], 0, 12) }}</dd>
                        </div>
                    @endif
                    @if(!empty($payload['deploy_timestamp']))
                        <div>
                            <dt class="text-xs text-gray-500">Deployed at</dt>
                            <dd class="text-xs text-gray-800">{{ $payload['deploy_timestamp'] }}</dd>
                        </div>
                    @endif
                </div>
            @endif

            {{-- Source Hints (route match) --}}
            @php $routeHint = $payload['source_hints']['route'] ?? null; @endphp
            @if($routeHint)
                <div class="bg-white rounded-lg border border-gray-200 p-4 space-y-2">
                    <h2 class="text-sm font-semibold text-gray-900">Route Match</h2>
                    @if(!empty($routeHint['name']))
                        <div>
                            <dt class="text-xs text-gray-500">Route name</dt>
                            <dd class="text-xs font-mono text-gray-800">{{ $routeHint['name'] }}</dd>
                        </div>
                    @endif
                    @if(!empty($routeHint['uri']))
                        <div>
                            <dt class="text-xs text-gray-500">URI</dt>
                            <dd class="text-xs font-mono text-gray-800">{{ $routeHint['uri'] }}</dd>
                        </div>
                    @endif
                    @if(!empty($routeHint['controller']))
                        <div>
                            <dt class="text-xs text-gray-500">Controller</dt>
                            <dd class="text-xs font-mono text-gray-700 break-all">{{ $routeHint['controller'] }}</dd>
                        </div>
                    @endif
                    @if(!empty($routeHint['livewire_component']))
                        <div>
                            <dt class="text-xs text-gray-500">Livewire</dt>
                            <dd class="text-xs font-mono text-gray-700 break-all">{{ $routeHint['livewire_component'] }}</dd>
                        </div>
                    @endif
                </div>
            @endif

            {{-- Assign / Reassign --}}
            <div class="bg-white rounded-lg border border-gray-200 p-4">
                <h2 class="text-sm font-semibold text-gray-900 mb-3">
                    {{ $signal->assignedUser ? 'Reassign' : 'Assign' }}
                </h2>
                @if($signal->assignedUser)
                    <p class="text-xs text-gray-500 mb-3">Assigned to <span class="font-medium text-gray-800">{{ $signal->assignedUser->name }}</span></p>
                @endif
                <button
                    wire:click="openAssignModal"
                    class="w-full px-3 py-2.5 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700"
                >
                    {{ $signal->assignedUser ? 'Reassign' : 'Assign to team member' }}
                </button>
            </div>

            {{-- Delegate to Agent --}}
            @if(! in_array($signal->status, [\App\Domain\Signal\Enums\SignalStatus::DelegatedToAgent, \App\Domain\Signal\Enums\SignalStatus::AgentFixing, \App\Domain\Signal\Enums\SignalStatus::Review, \App\Domain\Signal\Enums\SignalStatus::Resolved, \App\Domain\Signal\Enums\SignalStatus::Dismissed]))
                <div class="bg-white rounded-lg border border-gray-200 p-4">
                    <h2 class="text-sm font-semibold text-gray-900 mb-3">Delegate to Agent</h2>
                    <x-form-select
                        wire:model="delegateAgentId"
                        :error="$errors->first('delegateAgentId')"
                    >
                        <option value="">Select agent...</option>
                        @foreach($agents as $agent)
                            <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                        @endforeach
                    </x-form-select>
                    <button
                        wire:click="delegateToAgent"
                        wire:loading.attr="disabled"
                        class="mt-2 w-full px-3 py-2.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 disabled:opacity-50"
                    >
                        <span wire:loading.remove wire:target="delegateToAgent">Delegate</span>
                        <span wire:loading wire:target="delegateToAgent">Delegating…</span>
                    </button>
                </div>
            @endif
        </div>
    </div>

    {{-- Edit Modal --}}
    @if($showEditModal)
        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" wire:click.self="$set('showEditModal', false)">
            <div class="w-full max-w-xl rounded-xl border border-gray-200 bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-base font-semibold text-gray-900">Edit Report</h3>
                    <button wire:click="$set('showEditModal', false)" class="text-gray-400 hover:text-gray-600">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="space-y-4">
                    <x-form-input
                        wire:model="editTitle"
                        label="Title"
                        :error="$errors->first('editTitle')"
                    />
                    <x-form-textarea
                        wire:model="editDescription"
                        label="Description"
                        rows="5"
                        :error="$errors->first('editDescription')"
                    />
                    <div>
                        <p class="block text-sm font-medium text-gray-700 mb-1">Replace Screenshot</p>
                        <input
                            type="file"
                            wire:model="editAttachment"
                            accept="image/jpeg,image/png,image/webp,image/gif"
                            class="text-sm text-gray-600"
                        >
                        @error('editAttachment')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                        @if($mediaFiles->isNotEmpty())
                            <p class="text-xs text-gray-400 mt-1">Uploading a new image will replace the existing attachment.</p>
                        @endif
                    </div>
                </div>
                <div class="mt-5 flex justify-end gap-2">
                    <button
                        wire:click="$set('showEditModal', false)"
                        class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                    >
                        Cancel
                    </button>
                    <button
                        wire:click="saveEdit"
                        wire:loading.attr="disabled"
                        class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-60"
                    >
                        <span wire:loading.remove wire:target="saveEdit">Save Changes</span>
                        <span wire:loading wire:target="saveEdit">Saving…</span>
                    </button>
                </div>
            </div>
        </div>
    @endif

    {{-- Assign Modal --}}
    @if($showAssignModal)
        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" wire:click.self="$set('showAssignModal', false)">
            <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-base font-semibold text-gray-900">Assign Bug Report</h3>
                    <button wire:click="$set('showAssignModal', false)" class="text-gray-400 hover:text-gray-600">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="space-y-4">
                    <div>
                        <x-form-select wire:model="assignUserId" label="Assign to">
                            <option value="">— Unassign —</option>
                            @foreach($teamMembers as $member)
                                <option value="{{ $member->id }}">{{ $member->name }} ({{ $member->email }})</option>
                            @endforeach
                        </x-form-select>
                        @error('assignUserId') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <x-form-textarea wire:model="assignReason" label="Note (optional)" rows="3"
                            hint="Added as an internal comment, not visible to the reporter." />
                        @error('assignReason') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>
                </div>
                <div class="mt-5 flex justify-end gap-2">
                    <button wire:click="$set('showAssignModal', false)" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                    <button wire:click="submitAssign" wire:loading.attr="disabled" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-60">
                        <span wire:loading.remove wire:target="submitAssign">Confirm</span>
                        <span wire:loading wire:target="submitAssign">Saving…</span>
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>
