@extends('layouts.app')

@section('title', 'Admin Dashboard')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
@endpush

@section('content')
<div class="final-dashboard-wrapper">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; position: relative; z-index: 20;">
        <div>
            <h1 class="final-main-title" style="margin-bottom: 4px;">Executive Intelligence</h1>
            <p class="final-subtitle" style="margin: 0;">Organization-wide operational monitoring and automated risk detection.</p>
        </div>
        <div style="display: flex; gap: 12px; align-items: center;">
            <a href="{{ route('settings.index') }}" class="final-btn final-btn-secondary" style="text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;">
                <i class="bi bi-gear"></i> <span>Configure</span>
            </a>
            <a href="{{ route('reports.dashboard') }}" class="final-btn final-btn-primary" style="text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;">
                <i class="bi bi-lightning-charge"></i> <span>Live Report</span>
            </a>
        </div>
    </div>

    <!-- ROW 1: 4 Stat Cards -->
    <div class="final-row final-row-1">
        <div class="final-card">
            <div class="final-stat-icon"><i class="bi bi-people"></i></div>
            <span class="final-stat-label">Total Workforce</span>
            <h2 class="final-metric-value">{{ $totalEmployees ?? '0' }}</h2>
        </div>
        <div class="final-card">
            <div class="final-stat-icon" style="color: var(--warning-color)"><i class="bi bi-briefcase"></i></div>
            <span class="final-stat-label">Active Projects</span>
            <h2 class="final-metric-value">{{ $activeProjects ?? '0' }}</h2>
        </div>
        <div class="final-card">
            <div class="final-stat-icon" style="color: #0ea5e9"><i class="bi bi-lightning"></i></div>
            <span class="final-stat-label">Productivity</span>
            <h2 class="final-metric-value">{{ ($productivityScore ?? 0) . '%' }}</h2>
        </div>
        <div class="final-card">
            <div class="final-stat-icon" style="color: #f43f5e"><i class="bi bi-shield-check"></i></div>
            <span class="final-stat-label">QA Failures</span>
            <h2 class="final-metric-value">{{ $qaFailures ?? '0' }}</h2>
        </div>
    </div>

    <!-- ROW 2: 2 Columns (2fr 1fr) -->
    <div class="final-row final-row-2">
        <!-- LEFT: Analytics Chart Card -->
        <div class="final-card">
            <div class="final-card-header">
                <h3 class="final-card-title"><i class="bi bi-graph-up text-[var(--accent-color)]"></i> Productivity Analytics</h3>
            </div>
            <div class="final-chart-area">
                <canvas id="finalProductivityChart"></canvas>
            </div>
        </div>

        <!-- RIGHT: Live Workforce Card -->
        <div class="final-card" style="border-color: rgba(182, 255, 59, 0.2);">
            <div class="final-card-header" 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-broadcast text-[var(--accent-color)]"></i> Live Tracking</h3>
                <span style="font-size: 10px; font-weight: 800; color: var(--accent-color); text-transform: uppercase; letter-spacing: 0.1em; background: rgba(182, 255, 59, 0.1); padding: 4px 8px; border-radius: 4px;">Active Now</span>
            </div>
            
            <div class="final-workforce-container">
                @forelse($runningTimers as $timer)
                <div class="final-employee-row">
                    <div class="final-employee-content">
                        <div class="final-avatar">
                            {{ strtoupper(substr($timer->user?->name ?? 'U', 0, 1)) }}
                        </div>
                        <div class="final-employee-info">
                            <h4>{{ $timer->user?->name }}</h4>
                            <p>Task #{{ $timer->task_id }}</p>
                        </div>
                    </div>
                    <div class="final-timer-badge">
                        {{ \Carbon\Carbon::parse($timer->start_time)->diffForHumans(null, true) }}
                    </div>
                </div>
                @empty
                <div style="padding: 60px 0; text-align: center; opacity: 0.2;">
                    <i class="bi bi-clock" style="font-size: 32px; display: block; margin-bottom: 12px;"></i>
                    <p style="font-size: 12px; font-weight: 700; text-transform: uppercase;">No active engineers</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- ROW 3: 3 Equal Cards -->
    <div class="final-row final-row-3">
        <!-- Delivery Health -->
        <div class="final-card">
            <h3 class="final-card-title"><i class="bi bi-heart-pulse text-[var(--accent-color)]"></i> Delivery Health</h3>
            <div class="final-health-container">
                @php $totalHealth = max(1, ($health['healthy'] + $health['risk'] + $health['delayed'])); @endphp
                <div class="final-health-item">
                    <div class="final-health-row">
                        <span class="final-health-label">Optimal Flow</span>
                        <span class="final-health-value" style="color: var(--accent-color)">{{ $health['healthy'] }}</span>
                    </div>
                    <div class="final-progress-bg">
                        <div class="final-progress-fill" style="width: {{ ($health['healthy'] / $totalHealth) * 100 }}%; background: var(--accent-color)"></div>
                    </div>
                </div>
                <div class="final-health-item">
                    <div class="final-health-row">
                        <span class="final-health-label">Warning Zone</span>
                        <span class="final-health-value" style="color: var(--warning-color)">{{ $health['risk'] }}</span>
                    </div>
                    <div class="final-progress-bg">
                        <div class="final-progress-fill" style="width: {{ ($health['risk'] / $totalHealth) * 100 }}%; background: var(--warning-color)"></div>
                    </div>
                </div>
                <div class="final-health-item">
                    <div class="final-health-row">
                        <span class="final-health-label">Critical Delay</span>
                        <span class="final-health-value" style="color: #f43f5e">{{ $health['delayed'] }}</span>
                    </div>
                    <div class="final-progress-bg">
                        <div class="final-progress-fill" style="width: {{ ($health['delayed'] / $totalHealth) * 100 }}%; background: #f43f5e"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Performer -->
        <div class="final-card" style="text-align: center;">
            <h3 class="final-card-title" style="justify-content: center;"><i class="bi bi-award text-[var(--warning-color)]"></i> Top Performer</h3>
            @if($topPerformer)
            <div style="margin: 20px 0;">
                <div style="width: 80px; height: 80px; border-radius: 50%; background: var(--accent-color); margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #000; border: 4px solid rgba(255,255,255,0.05);">
                    {{ strtoupper(substr($topPerformer->user?->name ?? 'U', 0, 1)) }}
                </div>
                <h4 style="font-size: 18px; font-weight: 800; margin: 0 0 4px 0;">{{ $topPerformer->user?->name }}</h4>
                <p class="final-secondary-text" style="text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;">{{ $topPerformer->user?->role ?? 'Lead Engineer' }}</p>
            </div>
            <div style="font-size: 32px; font-weight: 900; color: var(--accent-color); margin-top: 20px;">
                {{ number_format($topPerformer->total_points) }} <span style="font-size: 12px; opacity: 0.5;">PTS</span>
            </div>
            @else
            <div style="padding: 40px; opacity: 0.2; font-style: italic;">No performance data</div>
            @endif
        </div>

        <!-- Workload Balance -->
        <div class="final-card">
            <h3 class="final-card-title"><i class="bi bi-pie-chart text-[#8b5cf6]"></i> Workload Balance</h3>
            <div class="final-row" style="grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px;">
                <div style="background: rgba(255,255,255,0.02); padding: 20px; border-radius: 16px; text-align: center;">
                    <div style="font-size: 24px; font-weight: 800; margin-bottom: 4px;">{{ $workload['dev'] }}</div>
                    <div style="font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">Engineering</div>
                </div>
                <div style="background: rgba(255,255,255,0.02); padding: 20px; border-radius: 16px; text-align: center;">
                    <div style="font-size: 24px; font-weight: 800; margin-bottom: 4px;">{{ $workload['qa'] }}</div>
                    <div style="font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;">QA Cycles</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ROW 4: System Insights -->
    <div class="final-row final-row-4">
        <div class="final-card" style="background: linear-gradient(90deg, var(--card-bg), #1a1a2e); border-left: 4px solid var(--accent-color);">
            <div style="display: flex; align-items: center; gap: 16px;">
                <div style="width: 48px; height: 48px; background: rgba(182, 255, 59, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent-color);">
                    <i class="bi bi-cpu"></i>
                </div>
                <div>
                    <h4 style="font-size: 14px; font-weight: 800; margin: 0 0 4px 0; color: var(--accent-color); text-transform: uppercase; letter-spacing: 0.1em;">System Intelligence Insight</h4>
                    <p class="final-secondary-text" style="margin: 0;">Currently <span style="color: #fff; font-weight: 800;">{{ $kbMissing }}</span> architectural components are identified with pending documentation requirements.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- ROW 5: Recent Activity Table -->
    <div class="final-row final-row-5">
        <div class="final-card" style="padding: 0;">
            <div style="padding: 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
                <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-activity text-[var(--accent-color)]"></i> Recent Activity Stream</h3>
                <button class="final-btn final-btn-secondary" style="padding: 6px 16px; font-size: 11px;">View All Logs</button>
            </div>
            <div class="final-table-container">
                <table class="final-table">
                    <thead>
                        <tr>
                            <th>Action Event</th>
                            <th>Module Component</th>
                            <th>Engineer</th>
                            <th>Timeline</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentActivities ?? [] as $log)
                        <tr>
                            <td><span style="background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase;">{{ $log->action }}</span></td>
                            <td style="font-weight: 600;">{{ $log->module }}</td>
                            <td>
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <div style="width: 24px; height: 24px; background: var(--bg-secondary); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--accent-color); border: 1px solid var(--border-color);">
                                        {{ strtoupper(substr($log->user?->name ?? 'U', 0, 1)) }}
                                    </div>
                                    <span style="font-weight: 700;">{{ $log->user?->name ?? 'System' }}</span>
                                </div>
                            </td>
                            <td class="final-secondary-text" style="font-weight: 700; text-transform: uppercase;">{{ \Carbon\Carbon::parse($log->created_at)->diffForHumans() }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" style="text-align: center; padding: 48px; opacity: 0.2; font-style: italic;">No recent activities found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('finalProductivityChart').getContext('2d');
    
    const gradient = ctx.createLinearGradient(0, 0, 0, 340);
    gradient.addColorStop(0, 'rgba(182, 255, 59, 0.15)');
    gradient.addColorStop(1, 'rgba(182, 255, 59, 0)');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Efficiency %',
                data: [82, 85, 90, 88, 94, 65, 45],
                borderColor: '#b6ff3b',
                backgroundColor: gradient,
                borderWidth: 3,
                tension: 0.4,
                fill: true,
                pointBackgroundColor: '#b6ff3b',
                pointBorderColor: '#0b0f14',
                pointBorderWidth: 2,
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { 
                legend: { display: false },
                tooltip: {
                    backgroundColor: '#151c24',
                    titleColor: '#94a3b8',
                    bodyColor: '#fff',
                    borderColor: 'rgba(255,255,255,0.06)',
                    borderWidth: 1,
                    padding: 12,
                    displayColors: false
                }
            },
            scales: {
                y: { 
                    beginAtZero: true, 
                    max: 100, 
                    grid: { color: 'rgba(255,255,255,0.03)', drawBorder: false }, 
                    ticks: { color: '#475569', font: { size: 10, weight: '700' } } 
                },
                x: { 
                    grid: { display: false }, 
                    ticks: { color: '#475569', font: { size: 10, weight: '700' } } 
                }
            }
        }
    });
});
</script>
@endpush
@endsection