@extends('layouts.app')

@section('content')
<x-page-header title="Intelligence & Analytics" subtitle="Cross-platform performance trends and deep-dive reports">
    <x-slot name="actions">
        <div class="flex gap-4">
            <button class="btn-modern bg-blue-500/10 text-blue-500 border border-blue-500/30 hover:bg-blue-500 hover:text-white">
                <i class="bi bi-calendar-event mr-2"></i> Schedule Report
            </button>
            <form action="{{ route('reports.generate') }}" method="POST">
                @csrf
                <input type="hidden" name="period" value="monthly">
                <button type="submit" class="btn-modern bg-[var(--accent-green)] text-black">
                    <i class="bi bi-file-earmark-bar-graph mr-2"></i> Run Full Audit
                </button>
            </form>
        </div>
    </x-slot>
</x-page-header>

<!-- Global Metrics Pulse -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bento-card p-6 bg-gradient-to-br from-[var(--bg-card)] to-[var(--bg-dark)]">
        <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest mb-1">Company Efficiency</div>
        <div class="text-3xl font-black text-[var(--accent-green)]">88.4%</div>
        <div class="text-[9px] text-[var(--text-secondary)] mt-2 flex items-center gap-1">
            <i class="bi bi-arrow-up-right text-[var(--accent-green)]"></i> +2.4% vs last month
        </div>
    </div>
    <div class="bento-card p-6">
        <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest mb-1">Total Billable Hours</div>
        <div class="text-3xl font-black text-[var(--text-primary)]">1,420h</div>
        <div class="text-[9px] text-[var(--text-secondary)] mt-2 italic">Calculated from 12 active projects</div>
    </div>
    <div class="bento-card p-6 border-l-4 border-red-500">
        <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest mb-1">Overdue Task Ratio</div>
        <div class="text-3xl font-black text-red-500">14.2%</div>
        <div class="text-[9px] text-[var(--text-secondary)] mt-2">Risk Level: Moderate</div>
    </div>
    <div class="bento-card p-6">
        <div class="text-[10px] text-[var(--text-secondary)] uppercase font-bold tracking-widest mb-1">QA Stability Index</div>
        <div class="text-3xl font-black text-blue-400">9.2/10</div>
        <div class="text-[9px] text-[var(--text-secondary)] mt-2">Based on reopen rates</div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Reports History -->
    <div class="lg:col-span-2">
        <x-table-wrapper title="Generated Reports History" icon="bi-clock-history">
            <table class="w-full text-left table-modern">
                <thead>
                    <tr>
                        <th>Report Info</th>
                        <th>Period</th>
                        <th>Status</th>
                        <th class="text-right">Export</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($snapshots as $snapshot)
                    <tr class="group">
                        <td>
                            <div class="font-bold text-sm text-[var(--text-primary)]">System Audit Snapshot</div>
                            <div class="text-[10px] text-[var(--text-secondary)]">{{ $snapshot->from_date->format('M d') }} - {{ $snapshot->to_date->format('M d, Y') }}</div>
                        </td>
                        <td><x-badge color="info" text="{{ $snapshot->period }}" /></td>
                        <td><x-badge color="success" text="Ready" /></td>
                        <td class="text-right">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('reports.export.csv', $snapshot->id) }}" class="p-2 bg-[var(--input-bg)] rounded-lg hover:text-[var(--accent-green)] transition-colors"><i class="bi bi-filetype-csv"></i></a>
                                <a href="{{ route('reports.export.pdf', $snapshot->id) }}" class="p-2 bg-[var(--input-bg)] rounded-lg hover:text-red-400 transition-colors"><i class="bi bi-file-pdf"></i></a>
                                <a href="{{ route('reports.whatsapp', $snapshot->id) }}" class="p-2 bg-[var(--input-bg)] rounded-lg hover:text-[var(--accent-green)] transition-colors"><i class="bi bi-whatsapp"></i></a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </x-table-wrapper>
    </div>

    <!-- Analytics Trends -->
    <div class="space-y-8">
        <div class="bento-card p-6">
            <h3 class="font-bold text-sm mb-6 flex items-center gap-2">
                <i class="bi bi-lightning text-yellow-400"></i> Productivity Trends
            </h3>
            <div class="h-48 flex items-end gap-1">
                @for($i=0; $i<12; $i++)
                    <div class="flex-grow bg-[var(--accent-green)]/20 rounded-t hover:bg-[var(--accent-green)] transition-all cursor-help" 
                         style="height: {{ rand(40, 95) }}%" 
                         title="Week {{ $i+1 }}: {{ rand(70, 95) }}%"></div>
                @endfor
            </div>
            <div class="flex justify-between mt-4 text-[9px] text-[var(--text-secondary)] uppercase font-bold tracking-widest">
                <span>Week 1</span>
                <span>Week 12</span>
            </div>
        </div>

        <div class="bento-card p-6 bg-gradient-to-br from-red-500/10 to-transparent border-red-500/20">
            <h3 class="font-bold text-sm mb-4">Risk Heatmap</h3>
            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <span class="text-xs">Deadlines Missed</span>
                    <span class="text-xs font-bold text-red-400">12</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-xs">Idle Time Leakage</span>
                    <span class="text-xs font-bold text-yellow-400">Low</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-xs">Staff Overload</span>
                    <span class="text-xs font-bold text-red-500">High</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection