@extends('layouts.app')
@section('title', 'QA Intelligence - Bug Tracking')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .bug-status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }
    .filter-bar {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
    }
    .enterprise-modal {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }
    .enterprise-modal.open { display: flex; }
    .modal-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.85);
        backdrop-filter: blur(10px);
    }
    .modal-container {
        position: relative;
        background: var(--bg-dark);
        border: 1px solid var(--border-color);
        border-radius: 24px;
        width: 100%;
        max-width: 1100px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
    .modal-header {
        padding: 24px 32px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255,255,255,0.02);
    }
    .modal-body {
        padding: 32px;
        overflow-y: auto;
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 32px;
    }
    .history-item {
        position: relative;
        padding-left: 24px;
        padding-bottom: 20px;
        border-left: 1px solid var(--border-color);
    }
    .history-item::before {
        content: '';
        position: absolute;
        left: -5px;
        top: 0;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--accent-color);
        box-shadow: 0 0 10px var(--accent-color);
    }
    .bug-row:hover {
        cursor: pointer;
    }
</style>
@endpush

@section('content')

@php
    $openCount = \App\Models\Bug::whereIn('status', ['open', 'assigned', 'reopened'])->count();
    $criticalCount = \App\Models\Bug::where('severity', 'critical')->count();
    $totalCount = \App\Models\Bug::count();
    $reopenRate = $totalCount > 0 ? (\App\Models\Bug::where('reopen_count', '>', 0)->count() / $totalCount) * 100 : 0;
@endphp

@include('components.page-header', [
    'title' => 'QA Intelligence Center',
    'description' => 'Enterprise defect management with structural component tracking and regression analytics.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Bug Tracking' => '#'],
    'actions' => '<a href="'.route('bugs.create').'" class="final-btn final-btn-primary"><i class="bi bi-bug"></i> Report Intelligence Failure</a>'
])

<div class="bug-status-grid">
    <div class="final-card" style="border-top: 4px solid var(--danger-color);">
        <div class="final-stat-label">Critical Failures</div>
        <div style="display: flex; align-items: baseline; gap: 8px;">
            <div class="final-metric-value" style="color: var(--danger-color)">{{ $criticalCount }}</div>
            <div class="final-secondary-text" style="font-size: 10px; font-weight: 800;">ACTIVE BLOCKS</div>
        </div>
    </div>
    <div class="final-card" style="border-top: 4px solid var(--warning-color);">
        <div class="final-stat-label">Open Defects</div>
        <div style="display: flex; align-items: baseline; gap: 8px;">
            <div class="final-metric-value">{{ $openCount }}</div>
            <div class="final-secondary-text" style="font-size: 10px; font-weight: 800;">IN PIPELINE</div>
        </div>
    </div>
    <div class="final-card" style="border-top: 4px solid var(--info-color);">
        <div class="final-stat-label">Regression Health</div>
        <div style="display: flex; align-items: baseline; gap: 8px;">
            <div class="final-metric-value" style="color: var(--info-color)">{{ number_format(100 - $reopenRate, 1) }}%</div>
            <div class="final-secondary-text" style="font-size: 10px; font-weight: 800;">STABILITY SCORE</div>
        </div>
    </div>
    <div class="final-card" style="border-top: 4px solid var(--accent-color);">
        <div class="final-stat-label">Total Audited</div>
        <div style="display: flex; align-items: baseline; gap: 8px;">
            <div class="final-metric-value" style="color: var(--accent-color)">{{ $totalCount }}</div>
            <div class="final-secondary-text" style="font-size: 10px; font-weight: 800;">LIFETIME REPorts</div>
        </div>
    </div>
</div>

<form action="{{ route('bugs.index') }}" method="GET" class="filter-bar">
    <div style="flex-grow: 1; position: relative;">
        <i class="bi bi-search" style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-secondary);"></i>
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Search ID, title, or description..." class="final-input" style="padding-left: 44px;">
    </div>
    <select name="project_id" class="final-select" style="width: 180px;">
        <option value="">All Projects</option>
        @foreach($projects as $p) <option value="{{ $p->id }}" @selected(request('project_id') == $p->id)>{{ $p->name }}</option> @endforeach
    </select>
    <select name="module_id" class="final-select" style="width: 180px;">
        <option value="">All Modules</option>
        @foreach($modules as $m) <option value="{{ $m->id }}" @selected(request('module_id') == $m->id)>{{ $m->name }}</option> @endforeach
    </select>
    <select name="status" class="final-select" style="width: 150px;">
        <option value="">All Statuses</option>
        @foreach(['open','in_progress','resolved','qa_approved','qa_rejected','reopened','closed'] as $st)
            <option value="{{ $st }}" @selected(request('status') == $st)>{{ ucfirst(str_replace('_',' ',$st)) }}</option>
        @endforeach
    </select>
    <select name="severity" class="final-select" style="width: 150px;">
        <option value="">All Severities</option>
        @foreach(['low','medium','high','critical'] as $sv)
            <option value="{{ $sv }}" @selected(request('severity') == $sv)>{{ ucfirst($sv) }}</option>
        @endforeach
    </select>
    <button type="submit" class="final-btn final-btn-primary"><i class="bi bi-filter"></i> Apply</button>
    <a href="{{ route('bugs.index') }}" class="final-btn final-btn-secondary"><i class="bi bi-arrow-counterclockwise"></i></a>
</form>

<div class="final-card" style="padding: 0;">
    <div class="final-table-container">
        <table class="final-table">
            <thead>
                <tr>
                    <th><input type="checkbox" style="accent-color: var(--accent-color)"></th>
                    <th>Intelligence ID</th>
                    <th>Failure Specification</th>
                    <th>Structural Component</th>
                    <th>Severity</th>
                    <th>State</th>
                    <th>Assignment</th>
                    <th style="text-align: right;">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bugs as $bug)
                <tr class="bug-row" onclick="viewBug({{ $bug->id }})">
                    <td onclick="event.stopPropagation()"><input type="checkbox" style="accent-color: var(--accent-color)"></td>
                    <td><span style="font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--accent-color);">#{{ str_pad($bug->id, 5, '0', STR_PAD_LEFT) }}</span></td>
                    <td>
                        <div style="font-weight: 800; color: var(--text-primary); font-size: 14px;">{{ $bug->title }}</div>
                        <div class="final-secondary-text" style="font-size: 11px; margin-top: 2px;">Reported {{ $bug->created_at->diffForHumans() }} by {{ $bug->reporter->name }}</div>
                    </td>
                    <td>
                        <div style="font-weight: 700; font-size: 12px; color: var(--text-primary);">{{ $bug->project->name }}</div>
                        <div style="font-size: 10px; color: var(--text-secondary); font-weight: 800; text-transform: uppercase;">{{ $bug->module->name ?? 'Core Module' }}</div>
                    </td>
                    <td>
                        @php
                            $sevClass = $bug->severity == 'critical' ? 'badge-critical' : ($bug->severity == 'high' ? 'badge-high' : ($bug->severity == 'medium' ? 'badge-medium' : 'badge-low'));
                        @endphp
                        <span class="final-badge {{ $sevClass }}">
                            @if($bug->severity == 'critical') <i class="bi bi-lightning-fill"></i> @endif
                            {{ strtoupper($bug->severity) }}
                        </span>
                    </td>
                    <td>
                        @php
                            $statusClass = match($bug->status) {
                                'open' => 'badge-low',
                                'in_progress' => 'badge-email',
                                'resolved' => 'badge-whatsapp',
                                'closed' => 'badge-inapp',
                                'reopened' => 'badge-critical',
                                default => 'badge-medium'
                            };
                        @endphp
                        <span class="final-badge {{ $statusClass }}">
                            {{ strtoupper(str_replace('_', ' ', $bug->status)) }}
                        </span>
                    </td>
                    <td>
                        @if($bug->assignee)
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <div class="final-avatar" style="width: 24px; height: 24px; font-size: 9px; border: 1px solid var(--border-color);">
                                {{ substr($bug->assignee->name, 0, 1) }}
                            </div>
                            <span style="font-size: 12px; font-weight: 700; color: var(--text-secondary);">{{ $bug->assignee->name }}</span>
                        </div>
                        @else
                        <span class="final-secondary-text" style="font-size: 11px;">UNASSIGNED</span>
                        @endif
                    </td>
                    <td style="text-align: right;" onclick="event.stopPropagation()">
                        <div style="display: flex; justify-content: flex-end; gap: 8px;">
                            <a href="{{ route('bugs.edit', $bug) }}" class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 11px;"><i class="bi bi-pencil"></i></a>
                            <form action="{{ route('bugs.destroy', $bug) }}" method="POST" onsubmit="return confirm('Archive this intelligence failure?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="final-btn final-btn-secondary" style="padding: 6px 10px; font-size: 11px; color: var(--danger-color);"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" style="padding: 100px; text-align: center;">
                        <x-empty-state title="Zero Defect Integrity" subtitle="No intelligence failures detected in the current filter scope." icon="bi-shield-check" />
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-8">
    {{ $bugs->links() }}
</div>

<!-- Bug Detail Modal -->
<div class="enterprise-modal" id="bugModal">
    <div class="modal-overlay" onclick="closeModal()"></div>
    <div class="modal-container">
        <div class="modal-header">
            <div style="display: flex; align-items: center; gap: 16px;">
                <span id="modalId" style="font-family: 'JetBrains Mono', monospace; font-weight: 900; color: var(--accent-color); font-size: 18px;"></span>
                <h2 id="modalTitle" style="font-size: 20px; font-weight: 900; color: var(--text-primary);"></h2>
            </div>
            <div style="display: flex; gap: 12px;">
                <button onclick="closeModal()" class="final-btn final-btn-secondary" style="padding: 8px;"><i class="bi bi-x-lg"></i></button>
            </div>
        </div>
        <div class="modal-body scrollbar-modern">
            <div class="main-column">
                <div style="margin-bottom: 32px;">
                    <label class="final-stat-label">Structural Description</label>
                    <div id="modalDescription" style="font-size: 15px; color: var(--text-primary); line-height: 1.6; background: rgba(255,255,255,0.02); padding: 20px; border-radius: 16px; border: 1px solid var(--border-color);"></div>
                </div>

                <div id="modalScreenshots" style="margin-bottom: 32px; display: none;">
                    <label class="final-stat-label">Visual Telemetry (Screenshot)</label>
                    <img id="modalScreenshotImg" src="" style="width: 100%; border-radius: 16px; border: 1px solid var(--border-color); margin-top: 12px;">
                </div>

                <div style="margin-bottom: 32px;">
                    <label class="final-stat-label">Intelligence Lifecycle (Activity)</label>
                    <div id="modalHistory" style="margin-top: 20px; display: flex; flex-direction: column;"></div>
                </div>

                <div>
                    <label class="final-stat-label">Collaborative Intelligence (Discussion)</label>
                    <div id="modalComments" style="margin-top: 16px; display: flex; flex-direction: column; gap: 12px;"></div>
                </div>
            </div>

            <div class="side-column">
                <div class="final-card" style="background: rgba(255,255,255,0.02); padding: 24px; border-radius: 20px;">
                    <div style="margin-bottom: 24px;">
                        <label class="final-stat-label">Governance State</label>
                        <div id="modalStatusBadge" style="margin-top: 8px;"></div>
                    </div>
                    <div style="margin-bottom: 24px;">
                        <label class="final-stat-label">Severity Tier</label>
                        <div id="modalSeverityBadge" style="margin-top: 8px;"></div>
                    </div>
                    <div style="margin-bottom: 24px;">
                        <label class="final-stat-label">Project Domain</label>
                        <div id="modalProject" style="font-size: 13px; font-weight: 800; color: var(--text-primary); margin-top: 8px;"></div>
                        <div id="modalModule" style="font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;"></div>
                    </div>
                    <div style="margin-bottom: 24px;">
                        <label class="final-stat-label">Stakeholder Alignment</label>
                        <div style="display: flex; flex-direction: column; gap: 12px; margin-top: 12px;">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <div id="modalReporterAvatar" class="final-avatar" style="width: 32px; height: 32px; font-size: 11px;"></div>
                                <div>
                                    <div id="modalReporterName" style="font-size: 12px; font-weight: 800;"></div>
                                    <div style="font-size: 9px; color: var(--text-secondary); font-weight: 800; text-transform: uppercase;">REPORTER</div>
                                </div>
                            </div>
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <div id="modalAssigneeAvatar" class="final-avatar" style="width: 32px; height: 32px; font-size: 11px; border-color: var(--accent-color); color: var(--accent-color);"></div>
                                <div>
                                    <div id="modalAssigneeName" style="font-size: 12px; font-weight: 800;"></div>
                                    <div style="font-size: 9px; color: var(--text-secondary); font-weight: 800; text-transform: uppercase;">ASSIGNED ENGINEER</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-bottom: 24px;">
                        <label class="final-stat-label">Technical Environment</label>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;">
                            <span id="modalOS" class="final-badge badge-low"></span>
                            <span id="modalBrowser" class="final-badge badge-low"></span>
                            <span id="modalDevice" class="final-badge badge-low"></span>
                        </div>
                    </div>
                    <div id="modalActions" style="display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border-color);">
                        <!-- Dynamic Actions -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function closeModal() { document.getElementById('bugModal').classList.remove('open'); }

    function viewBug(id) {
        const modal = document.getElementById('bugModal');
        modal.classList.add('open');

        fetch(`/admin/bugs/${id}`, { headers: { 'Accept': 'application/json' } })
            .then(res => res.json())
            .then(bug => {
                document.getElementById('modalId').innerText = `#${bug.id.toString().padStart(5, '0')}`;
                document.getElementById('modalTitle').innerText = bug.title;
                document.getElementById('modalDescription').innerText = bug.description;
                document.getElementById('modalProject').innerText = bug.project ? bug.project.name : 'SYSTEM';
                document.getElementById('modalModule').innerText = bug.module ? bug.module.name : 'CORE MODULE';
                
                // Status Badge
                const statusBadge = document.getElementById('modalStatusBadge');
                statusBadge.innerHTML = `<span class="final-badge ${getStatusClass(bug.status)}">${bug.status.toUpperCase().replace('_', ' ')}</span>`;
                
                // Severity Badge
                const sevBadge = document.getElementById('modalSeverityBadge');
                sevBadge.innerHTML = `<span class="final-badge ${getSeverityClass(bug.severity)}">${bug.severity.toUpperCase()}</span>`;
                
                // Reporter
                document.getElementById('modalReporterName').innerText = bug.reporter.name;
                document.getElementById('modalReporterAvatar').innerText = bug.reporter.name.charAt(0);
                
                // Assignee
                const assName = document.getElementById('modalAssigneeName');
                const assAvatar = document.getElementById('modalAssigneeAvatar');
                if (bug.assignee) {
                    assName.innerText = bug.assignee.name;
                    assAvatar.innerText = bug.assignee.name.charAt(0);
                    assAvatar.style.display = 'flex';
                } else {
                    assName.innerText = 'UNASSIGNED';
                    assAvatar.style.display = 'none';
                }

                // Environment
                document.getElementById('modalOS').innerText = bug.os || 'UNKNOWN OS';
                document.getElementById('modalBrowser').innerText = bug.browser || 'UNKNOWN BROWSER';
                document.getElementById('modalDevice').innerText = bug.device || 'UNKNOWN DEVICE';

                // Screenshot
                const screenshotCont = document.getElementById('modalScreenshots');
                const screenshotImg = document.getElementById('modalScreenshotImg');
                if (bug.screenshot_path) {
                    screenshotCont.style.display = 'block';
                    screenshotImg.src = `/storage/${bug.screenshot_path}`;
                } else {
                    screenshotCont.style.display = 'none';
                }

                // History
                const historyCont = document.getElementById('modalHistory');
                historyCont.innerHTML = (bug.histories || []).map(h => `
                    <div class="history-item">
                        <div style="font-size: 12px; font-weight: 800; color: var(--text-primary);">${h.action.toUpperCase().replace('_', ' ')}</div>
                        <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px;">
                            ${h.actor ? h.actor.name : 'System'} changed status from <span style="color: var(--accent-color)">${h.from_status || 'initial'}</span> to <span style="color: var(--accent-color)">${h.to_status}</span>
                        </div>
                        <div style="font-size: 9px; color: var(--text-secondary); margin-top: 6px;">${new Date(h.created_at).toLocaleString()}</div>
                    </div>
                `).join('');
                if (historyCont.innerHTML === '') historyCont.innerHTML = '<p class="final-secondary-text" style="font-size: 11px;">No structural history available.</p>';

                // Comments
                const commentCont = document.getElementById('modalComments');
                commentCont.innerHTML = (bug.comments || []).map(c => `
                    <div style="background: rgba(255,255,255,0.02); padding: 16px; border-radius: 12px; border: 1px solid var(--border-color);">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                            <span style="font-size: 12px; font-weight: 800; color: var(--accent-color);">${c.user ? c.user.name : 'System'}</span>
                            <span style="font-size: 10px; color: var(--text-secondary);">${new Date(c.created_at).toLocaleDateString()}</span>
                        </div>
                        <div style="font-size: 13px; color: var(--text-primary);">${c.comment}</div>
                    </div>
                `).join('');
                if (commentCont.innerHTML === '') commentCont.innerHTML = '<p class="final-secondary-text" style="font-size: 11px;">No collaborative discussions yet.</p>';

                // Actions
                const actionsCont = document.getElementById('modalActions');
                actionsCont.innerHTML = '';
                
                if (bug.status !== 'closed') {
                    actionsCont.innerHTML += `
                        <form action="/admin/bugs/${bug.id}/approve" method="POST" style="width: 100%;">
                            @csrf
                            <button type="submit" class="final-btn final-btn-primary" style="width: 100%; justify-content: center; background: var(--success-color); color: white;">
                                <i class="bi bi-check-circle"></i> QA Approve & Close
                            </button>
                        </form>
                    `;
                }

                if (bug.status === 'fixed' || bug.status === 'resolved') {
                    actionsCont.innerHTML += `
                        <form action="/admin/bugs/${bug.id}/reject" method="POST" style="width: 100%;">
                            @csrf
                            <button type="submit" class="final-btn final-btn-secondary" style="width: 100%; justify-content: center; color: var(--danger-color); border-color: var(--danger-color);">
                                <i class="bi bi-x-circle"></i> Reject Resolution
                            </button>
                        </form>
                    `;
                }

                if (bug.status === 'closed') {
                    actionsCont.innerHTML += `
                        <form action="/admin/bugs/${bug.id}/reopen" method="POST" style="width: 100%;">
                            @csrf
                            <button type="submit" class="final-btn final-btn-secondary" style="width: 100%; justify-content: center; color: var(--warning-color); border-color: var(--warning-color);">
                                <i class="bi bi-arrow-counterclockwise"></i> Reopen Intelligence Failure
                            </button>
                        </form>
                    `;
                }

                if (bug.status !== 'closed' && bug.severity !== 'critical') {
                    actionsCont.innerHTML += `
                        <form action="/admin/bugs/${bug.id}/escalate" method="POST" style="width: 100%;">
                            @csrf
                            <button type="submit" class="final-btn final-btn-secondary" style="width: 100%; justify-content: center; color: var(--danger-color); border-color: var(--danger-color);">
                                <i class="bi bi-exclamation-triangle"></i> Escalate to Management
                            </button>
                        </form>
                    `;
                }

                actionsCont.innerHTML += `
                    <form action="/admin/bugs/${bug.id}/convert-to-task" method="POST" style="width: 100%;">
                        @csrf
                        <button type="submit" class="final-btn final-btn-secondary" style="width: 100%; justify-content: center; color: var(--accent-color); border-color: var(--accent-color);">
                            <i class="bi bi-arrow-up-right-circle"></i> Convert to Official Task
                        </button>
                    </form>
                `;

                actionsCont.innerHTML += `
                    <a href="/admin/bugs/${bug.id}/edit" class="final-btn final-btn-secondary" style="width: 100%; justify-content: center;">
                        <i class="bi bi-pencil-square"></i> Architect Modification
                    </a>
                `;
            });
    }

    function getStatusClass(status) {
        switch(status) {
            case 'open': return 'badge-low';
            case 'in_progress': return 'badge-email';
            case 'resolved': return 'badge-whatsapp';
            case 'closed': return 'badge-inapp';
            case 'reopened': return 'badge-critical';
            default: return 'badge-medium';
        }
    }

    function getSeverityClass(severity) {
        switch(severity) {
            case 'critical': return 'badge-critical';
            case 'high': return 'badge-high';
            case 'medium': return 'badge-medium';
            default: return 'badge-low';
        }
    }
</script>
@endpush
@endsection