@extends('layouts.app')

@section('title', 'CEO Command Center')

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

@section('content')
<div class="final-dashboard-wrapper">
    <!-- Header Row -->
    <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px;">
        <div>
            <h1 class="final-main-title">CEO Command Center</h1>
            <p class="final-subtitle" style="margin-bottom: 0;">Organization-wide intelligence and automated risk detection.</p>
        </div>
        <div style="display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: rgba(182, 255, 59, 0.05); border: 1px solid rgba(182, 255, 59, 0.1); border-radius: 50px;">
            <span style="position: relative; display: flex; height: 10px; width: 10px;">
                <span style="animation: final-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; position: absolute; display: inline-flex; height: 100%; width: 100%; border-radius: 50%; background-color: var(--accent-color); opacity: 0.75;"></span>
                <span style="position: relative; display: inline-flex; border-radius: 50%; height: 10px; width: 10px; background-color: var(--accent-color);"></span>
            </span>
            <span style="font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent-color);">AI Engines Active</span>
        </div>
    </div>

    <!-- ROW 1: Executive Pulse Grid -->
    <div class="final-row final-row-3">
        <div class="final-card" style="border-top: 4px solid var(--accent-color);">
            <span class="final-stat-label">Org Productivity</span>
            <div style="display: flex; align-items: baseline; gap: 12px;">
                <h2 class="final-metric-value" style="color: var(--accent-color); font-size: 48px;">{{ $health['productivity'] }}%</h2>
                <span class="final-secondary-text" style="font-weight: 800;">TARGET 85%</span>
            </div>
            <div class="final-progress-bg" style="margin-top: 20px; height: 4px;">
                <div class="final-progress-fill" style="width: {{ $health['productivity'] }}%; background: var(--accent-color)"></div>
            </div>
        </div>

        <div class="final-card" style="border-top: 4px solid #0ea5e9;">
            <span class="final-stat-label">Delivery Velocity</span>
            <div style="display: flex; align-items: baseline; gap: 12px;">
                <h2 class="final-metric-value" style="color: #0ea5e9; font-size: 48px;">{{ $health['on_time_delivery'] }}%</h2>
                <span class="final-secondary-text" style="font-weight: 800;">ON-TIME</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-top: 20px; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; opacity: 0.5;">
                <span>SLA COMPLIANCE</span>
                <span style="color: #0ea5e9;">OPTIMAL</span>
            </div>
        </div>

        <div class="final-card" style="border-top: 4px solid #f43f5e;">
            <span class="final-stat-label">Active Burnout Risks</span>
            <div style="display: flex; align-items: baseline; gap: 12px;">
                <h2 class="final-metric-value" style="color: #f43f5e; font-size: 48px;">{{ $health['active_burnout_risks'] }}</h2>
                <span class="final-secondary-text" style="font-weight: 800;">ENGINEERS</span>
            </div>
            <div style="margin-top: 20px; display: flex; align-items: center; gap: 10px;">
                @if($health['active_burnout_risks'] > 0)
                    <i class="bi bi-exclamation-triangle-fill" style="color: #f43f5e; font-size: 16px;"></i>
                    <span style="font-size: 10px; font-weight: 900; color: #f43f5e; letter-spacing: 0.1em;">IMMEDIATE ACTION REQUIRED</span>
                @else
                    <i class="bi bi-check-circle-fill" style="color: var(--accent-color); font-size: 16px;"></i>
                    <span style="font-size: 10px; font-weight: 900; color: var(--text-secondary); letter-spacing: 0.1em;">WORKFORCE STABLE</span>
                @endif
            </div>
        </div>
    </div>

    <!-- ROW 2: 2 Columns (60/40) -->
    <div class="final-row" style="grid-template-columns: 1fr 1fr;">
        <!-- High Risk Delivery Forecast -->
        <div class="final-card h-full">
            <h3 class="final-card-title"><i class="bi bi-shield-exclamation" style="color: #f43f5e;"></i> High Risk Delivery Forecast</h3>
            <div style="display: flex; flex-direction: column; gap: 16px;">
                @foreach($riskProjects as $project)
                <div style="padding: 20px; background: rgba(255,255,255,0.02); border-radius: 16px; border: 1px solid transparent; transition: all 0.3s ease; cursor: pointer;" onmouseover="this.style.borderColor='rgba(244, 63, 94, 0.3)'; this.style.background='rgba(255,255,255,0.04)'" onmouseout="this.style.borderColor='transparent'; this.style.background='rgba(255,255,255,0.02)'">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                        <span style="font-size: 15px; font-weight: 800;">{{ $project->name }}</span>
                        <span style="font-size: 10px; font-weight: 900; color: #f43f5e; text-transform: uppercase; letter-spacing: 0.1em;">{{ $project->tasks_count }} OVERDUE</span>
                    </div>
                    <p class="final-secondary-text" style="margin: 0; font-weight: 600;">Predicted delay: 4.2 days • Critical Path Blocked</p>
                </div>
                @endforeach
            </div>
        </div>

        <!-- AI Workload Optimization -->
        <div class="final-card h-full">
            <h3 class="final-card-title"><i class="bi bi-robot" style="color: #8b5cf6;"></i> Workforce Optimization AI</h3>
            <div style="display: flex; flex-direction: column; gap: 16px;">
                @foreach($burnoutRisks as $risk)
                <div style="padding: 20px; background: rgba(244, 63, 94, 0.04); border: 1px solid rgba(244, 63, 94, 0.1); border-radius: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                        <span style="font-size: 14px; font-weight: 800; color: #f43f5e;">{{ $risk['user_name'] }}</span>
                        <span style="background: rgba(244, 63, 94, 0.1); color: #f43f5e; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 900;">SCORE {{ $risk['burnout_score'] }}%</span>
                    </div>
                    <p class="final-secondary-text" style="margin: 0 0 20px 0; line-height: 1.6; font-weight: 600;">{{ $risk['reason'] }}</p>
                    <div style="display: flex; gap: 10px;">
                        <button class="final-btn" style="background: #f43f5e; color: #fff; padding: 8px 16px; font-size: 11px;">REASSIGN LOAD</button>
                        <button class="final-btn final-btn-secondary" style="padding: 8px 16px; font-size: 11px;">SCHEDULE LEAVE</button>
                    </div>
                </div>
                @endforeach

                @if($burnoutRisks->isEmpty())
                <div style="padding: 60px 0; text-align: center; opacity: 0.1;">
                    <i class="bi bi-magic" style="font-size: 48px; display: block; margin-bottom: 16px;"></i>
                    <p style="font-size: 12px; font-weight: 800; text-transform: uppercase;">No immediate risks detected</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- ROW 3: Strategic Recommendations -->
    <div class="final-row">
        <div class="final-card" style="padding: 0;">
            <div style="padding: 24px; border-bottom: 1px solid var(--border-color);">
                <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-lightbulb" style="color: var(--warning-color);"></i> Strategic AI Recommendations</h3>
            </div>
            <div class="final-table-container">
                <table class="final-table">
                    <thead>
                        <tr>
                            <th>Context</th>
                            <th>Recommendation</th>
                            <th>Confidence</th>
                            <th style="text-align: right;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recommendations as $rec)
                        <tr>
                            <td><span style="background: rgba(14, 165, 233, 0.1); color: #0ea5e9; padding: 4px 10px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase;">{{ str_replace('_', ' ', $rec->recommendation_type) }}</span></td>
                            <td style="font-weight: 700; font-size: 13px; max-width: 400px;">{{ $rec->message }}</td>
                            <td>
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <div class="final-progress-bg" style="width: 120px; height: 5px;">
                                        <div class="final-progress-fill" style="width: {{ $rec->confidence_score }}%; background: #8b5cf6;"></div>
                                    </div>
                                    <span style="font-size: 12px; font-weight: 800; opacity: 0.5;">{{ $rec->confidence_score }}%</span>
                                </div>
                            </td>
                            <td style="text-align: right;">
                                <button class="final-btn" style="background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.2); padding: 8px 16px; font-size: 11px;">APPLY SUGGESTION</button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
@keyframes final-ping {
    75%, 100% { transform: scale(2.5); opacity: 0; }
}
</style>
@endsection