@extends('layouts.app')
@section('title', 'QA Intelligence Center')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .qa-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }
    .qa-main-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 24px;
    }
    @media (max-width: 1024px) {
        .qa-main-layout { grid-template-columns: 1fr; }
    }
    .severity-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 100px;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '<a href="'.route('bugs.create').'" class="final-btn" style="background: var(--danger-color); color: white; border: none; box-shadow: 0 0 20px rgba(244, 63, 94, 0.2);"><i class="bi bi-bug"></i> Report Critical Failure</a>';
@endphp

@include('components.page-header', [
    'title' => 'Quality Operations Command',
    'description' => 'Monitor bug lifecycle analytics, regression health, and engineering stability scores across all production modules.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'QA' => '#'],
    'actions' => $actionsHtml
])

<!-- Analytics Stats Grid -->
<div class="qa-grid">
    <div class="final-card" style="border-left: 4px solid var(--danger-color);">
        <div class="final-stat-label">Critical Failures</div>
        <div class="final-stat-value" style="color: var(--danger-color)">{{ $stats['critical_bugs'] }}</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">BLOCKING PRODUCTION</div>
    </div>
    <div class="final-card" style="border-left: 4px solid var(--warning-color);">
        <div class="final-stat-label">Open Issues</div>
        <div class="final-stat-value">{{ $stats['open_bugs'] }}</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">ACTIVE IN BACKLOG</div>
    </div>
    <div class="final-card" style="border-left: 4px solid var(--info-color);">
        <div class="final-stat-label">Reopen Rate</div>
        <div class="final-stat-value" style="color: var(--info-color)">{{ number_format($stats['reopen_rate'], 1) }}%</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">REGRESSION METRIC</div>
    </div>
    <div class="final-card" style="border-left: 4px solid var(--accent-color);">
        <div class="final-stat-label">Avg Fix Time</div>
        <div class="final-stat-value" style="color: var(--accent-color)">{{ number_format($stats['avg_fix_time'], 1) }}h</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">RESPONSE LATENCY</div>
    </div>
    <div class="final-card" style="border-left: 4px solid #a855f7;">
        <div class="final-stat-label">Total Audited</div>
        <div class="final-stat-value">{{ $stats['total_bugs'] }}</div>
        <div class="final-secondary-text" style="font-size: 10px; font-weight: 700;">LIFETIME REPORTS</div>
    </div>
</div>

<div class="qa-main-layout">
    <!-- Main Bug Table -->
    <div style="display: flex; flex-direction: column; gap: 24px;">
        <div class="final-card">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-bug"></i> Recent Intelligence Reports</h3>
                <span class="final-secondary-text" style="font-size: 10px; font-weight: 800; letter-spacing: 0.1em;">LIVE FAILURE FEED</span>
            </div>

            <div class="final-table-container">
                <table class="final-table">
                    <thead>
                        <tr>
                            <th>Failure Intelligence</th>
                            <th>Portfolio</th>
                            <th>Severity</th>
                            <th>Current State</th>
                            <th style="text-align: right;">Assignment</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($bugs as $bug)
                        <tr class="group">
                            <td>
                                <div style="font-weight: 800; font-size: 14px; color: var(--text-primary);">{{ $bug->title }}</div>
                                <div style="font-size: 10px; color: var(--text-secondary); font-weight: 700;">#{{ $bug->id }} • Reported by {{ $bug->reporter->name }}</div>
                            </td>
                            <td>
                                <span style="font-size: 12px; font-weight: 700; color: var(--text-secondary);">{{ $bug->project->name }}</span>
                            </td>
                            <td>
                                @php
                                    $sevClass = $bug->severity == 'critical' ? 'badge-low' : ($bug->severity == 'high' ? 'badge-sms' : 'badge-email');
                                    $sevStyle = $bug->severity == 'critical' ? 'background: rgba(244, 63, 94, 0.1); color: #f43f5e; border-color: rgba(244, 63, 94, 0.2);' : '';
                                @endphp
                                <span class="final-badge {{ $sevClass }}" style="{{ $sevStyle }}">
                                    {{ strtoupper($bug->severity) }}
                                </span>
                            </td>
                            <td>
                                @php
                                    $statusClass = $bug->status == 'fixed' ? 'badge-whatsapp' : ($bug->status == 'open' ? 'badge-low' : 'badge-email');
                                @endphp
                                <span class="final-badge {{ $statusClass }}">{{ ucfirst($bug->status) }}</span>
                            </td>
                            <td style="text-align: right;">
                                <div style="display: flex; align-items: center; justify-content: flex-end; gap: 10px;">
                                    <span style="font-size: 11px; font-weight: 700; color: var(--text-secondary);">{{ $bug->assignee->name ?? 'SYSTEM' }}</span>
                                    <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>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Risk Modules -->
        <div class="final-card">
            <h3 class="final-card-title"><i class="bi bi-shield-slash" style="color: var(--danger-color)"></i> Structural Risk Analysis</h3>
            <p class="final-secondary-text" style="margin-top: -12px; margin-bottom: 24px;">Modules with abnormally high failure rates requiring immediate engineering review.</p>
            
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                @foreach($riskModules as $module)
                <div style="padding: 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); border-radius: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                        <span style="font-size: 13px; font-weight: 800; color: var(--text-primary);">{{ $module->name }}</span>
                        <span class="final-badge badge-low" style="font-size: 9px;">{{ $module->bugs_count }} FAILURES</span>
                    </div>
                    <div class="final-progress-bg" style="height: 6px;">
                        <div class="final-progress-fill" style="width: {{ min(100, ($module->bugs_count / 10) * 100) }}%; background: var(--danger-color);"></div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Sidebar Analytics -->
    <div style="display: flex; flex-direction: column; gap: 24px;">
        <div class="final-card">
            <h3 class="final-card-title"><i class="bi bi-people" style="color: var(--accent-color)"></i> Developer Stability</h3>
            <div style="display: flex; flex-direction: column; gap: 16px; margin-top: 20px;">
                @foreach($devPerformance as $dev)
                <div style="padding-bottom: 16px; border-bottom: 1px solid var(--border-color);">
                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                        <div class="final-avatar" style="width: 32px; height: 32px; border-radius: 10px; background: rgba(181, 255, 59, 0.05); color: var(--accent-color);">
                            {{ substr($dev['name'], 0, 1) }}
                        </div>
                        <div style="flex-grow: 1;">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span style="font-size: 13px; font-weight: 800;">{{ $dev['name'] }}</span>
                                <span style="font-size: 10px; font-weight: 700; color: var(--text-secondary);">{{ $dev['bugs_fixed'] }}/{{ $dev['bugs_assigned'] }} FIXED</span>
                            </div>
                        </div>
                    </div>
                    <div class="final-progress-bg" style="height: 4px;">
                        <div class="final-progress-fill" style="width: {{ $dev['bugs_assigned'] > 0 ? ($dev['bugs_fixed'] / $dev['bugs_assigned'] * 100) : 100 }}%"></div>
                    </div>
                    @if($dev['penalties'] > 0)
                        <div style="margin-top: 8px; display: flex; align-items: center; gap: 6px; color: var(--danger-color); font-size: 9px; font-weight: 800;">
                            <i class="bi bi-exclamation-octagon-fill"></i> RECURRENCE PENALTY: {{ $dev['penalties'] }}
                        </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>

        <!-- System Stability Chart Placeholder -->
        <div class="final-card" style="background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);">
            <h3 class="final-card-title"><i class="bi bi-graph-up"></i> Regression Health</h3>
            <div style="height: 120px; display: flex; align-items: flex-end; gap: 8px; margin-top: 24px; padding: 0 10px;">
                @for($i=0; $i<12; $i++)
                    @php $h = rand(30, 90); @endphp
                    <div style="flex: 1; height: {{ $h }}%; background: {{ $h > 70 ? 'rgba(244, 63, 94, 0.2)' : 'rgba(181, 255, 59, 0.1)' }}; border-radius: 4px 4px 0 0; transition: all 0.3s;" title="Stability Metric: {{ $h }}%"></div>
                @endfor
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 12px; font-size: 9px; font-weight: 800; color: var(--text-secondary); letter-spacing: 0.1em;">
                <span>HISTORICAL</span>
                <span>REAL-TIME</span>
            </div>
        </div>
    </div>
</div>
@endsection