<!-- resources/views/livewire/dashboard.blade.php -->
<div>
    <style>
        .stat-card {
            transition: all 0.3s ease;
            border: none;
            border-radius: 16px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            overflow: hidden;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
        }
        
        .stat-icon.primary {
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            color: white;
        }
        
        .stat-icon.success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
        }
        
        .stat-icon.warning {
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: white;
        }
        
        .stat-icon.info {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: white;
        }
        
        .stat-icon.purple {
            background: linear-gradient(135deg, #8b5cf6, #6d28d9);
            color: white;
        }
        
        .stat-icon.pink {
            background: linear-gradient(135deg, #ec4899, #be185d);
            color: white;
        }
        
        .activity-timeline {
            position: relative;
            padding-left: 2rem;
        }
        
        .activity-item {
            position: relative;
            padding-bottom: 1.5rem;
        }
        
        .activity-item:last-child {
            padding-bottom: 0;
        }
        
        .activity-item::before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--primary-color);
            border: 2px solid var(--card-bg);
            box-shadow: 0 0 0 2px var(--primary-light);
        }
        
        .activity-item::after {
            content: '';
            position: absolute;
            left: -1.1rem;
            top: 1.2rem;
            bottom: -0.5rem;
            width: 2px;
            background: var(--border-color);
        }
        
        .activity-item:last-child::after {
            display: none;
        }
        
        .activity-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .progress-bar-custom {
            height: 8px;
            border-radius: 4px;
            background: var(--border-color);
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--primary-color), #3a0ca3);
        }
        
        .dashboard-header {
            background: linear-gradient(135deg, var(--primary-color), #3a0ca3);
            color: white;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .welcome-text {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .date-badge {
            background: rgba(255, 255, 255, 0.2);
            padding: 0.25rem 1rem;
            border-radius: 30px;
            font-size: 0.85rem;
            display: inline-block;
        }
        
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>

    <div class="main-content" id="mainContent">
        <div class="container-fluid px-0">
            <!-- Welcome Header -->
            <div class="dashboard-header">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h1 class="welcome-text">
                            👋 Welcome back, {{ Auth::user()->name ?? 'Admin' }}!
                        </h1>
                        <p class="mb-0 opacity-75">Here's what's happening with your application today.</p>
                    </div>
                    <div class="col-md-4 text-md-end mt-3 mt-md-0">
                        <span class="date-badge">
                            <i class="bi bi-calendar me-2"></i>
                            {{ now()->format('l, F j, Y') }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Stats Cards -->
            <div class="row g-3 mb-4">
                <!-- Total Files -->
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center">
                            <div class="stat-icon primary me-3">
                                <i class="bi bi-files"></i>
                            </div>
                            <div>
                                <h6 class="text-muted mb-1">Total Files</h6>
                                <h3 class="mb-0 fw-bold">{{ $stats['total_files'] }}</h3>
                                <small class="text-success">
                                    <i class="bi bi-check-circle me-1"></i>
                                    {{ $stats['active_files'] }} Active
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Categories -->
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center">
                            <div class="stat-icon success me-3">
                                <i class="bi bi-tags"></i>
                            </div>
                            <div>
                                <h6 class="text-muted mb-1">Categories</h6>
                                <h3 class="mb-0 fw-bold">{{ $stats['total_categories'] }}</h3>
                                <small class="text-muted">
                                    <i class="bi bi-grid me-1"></i>
                                    Organize files
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Stages -->
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center">
                            <div class="stat-icon warning me-3">
                                <i class="bi bi-diagram-3"></i>
                            </div>
                            <div>
                                <h6 class="text-muted mb-1">Stages</h6>
                                <h3 class="mb-0 fw-bold">{{ $stats['total_stages'] }}</h3>
                                <small class="text-info">
                                    <i class="bi bi-arrow-left-right me-1"></i>
                                    {{ $stats['active_assignments'] }} Active Assignments
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notices -->
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center">
                            <div class="stat-icon info me-3">
                                <i class="bi bi-megaphone"></i>
                            </div>
                            <div>
                                <h6 class="text-muted mb-1">Notice Updates</h6>
                                <h3 class="mb-0 fw-bold">{{ $stats['total_notices'] }}</h3>
                                <small class="text-success">
                                    <i class="bi bi-check-circle me-1"></i>
                                    {{ $stats['active_notices'] }} Active
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Attachments -->
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center">
                            <div class="stat-icon purple me-3">
                                <i class="bi bi-paperclip"></i>
                            </div>
                            <div>
                                <h6 class="text-muted mb-1">Attachments</h6>
                                <h3 class="mb-0 fw-bold">{{ $stats['total_attachments'] }}</h3>
                                <small class="text-muted">
                                    <i class="bi bi-file-earmark me-1"></i>
                                    Files & documents
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Users -->
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card p-3">
                        <div class="d-flex align-items-center">
                            <div class="stat-icon pink me-3">
                                <i class="bi bi-people"></i>
                            </div>
                            <div>
                                <h6 class="text-muted mb-1">Users</h6>
                                <h3 class="mb-0 fw-bold">{{ $stats['total_users'] }}</h3>
                                <small class="text-muted">
                                    <i class="bi bi-person-plus me-1"></i>
                                    Active members
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts Section -->
            <div class="row g-3 mb-4">
                <!-- Monthly Stats Chart -->
                <div class="col-lg-8">
                    <div class="card dashboard-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-bar-chart-line me-2" style="color: var(--primary-color);"></i>
                                Monthly Activity ({{ now()->year }})
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="monthlyChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Stage Distribution -->
                <div class="col-lg-4">
                    <div class="card dashboard-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-pie-chart me-2" style="color: var(--primary-color);"></i>
                                Stage Distribution
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="stageChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-3 mb-4">
                <!-- Top Categories -->
                <div class="col-lg-4">
                    <div class="card dashboard-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-trophy me-2" style="color: var(--primary-color);"></i>
                                Top Categories
                            </h5>
                        </div>
                        <div class="card-body">
                            @forelse($topCategories as $category)
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <span>{{ $category->name }}</span>
                                        <span class="badge bg-primary bg-opacity-10 text-primary">{{ $category->files_count }} files</span>
                                    </div>
                                    <div class="progress-bar-custom">
                                        @php
                                            $maxCount = $topCategories->max('files_count');
                                            $percentage = $maxCount > 0 ? ($category->files_count / $maxCount) * 100 : 0;
                                        @endphp
                                        <div class="progress-fill" style="width: {{ $percentage }}%"></div>
                                    </div>
                                </div>
                            @empty
                                <p class="text-muted text-center py-3">No categories found</p>
                            @endforelse
                        </div>
                    </div>
                </div>

                <!-- Recent Files -->
                <div class="col-lg-4">
                    <div class="card dashboard-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-clock-history me-2" style="color: var(--primary-color);"></i>
                                Recent Files
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="list-group list-group-flush">
                                @forelse($recentFiles as $file)
                                    <a href="{{ route('files') }}" class="list-group-item list-group-item-action d-flex align-items-center px-3 py-3">
                                        <div class="flex-shrink-0 me-3">
                                            <div class="stat-icon sm primary" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                <i class="bi bi-file-earmark"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0">{{ $file->name }}</h6>
                                            <small class="text-muted">
                                                {{ $file->category->name ?? 'No category' }} • 
                                                {{ $file->created_at->diffForHumans() }}
                                            </small>
                                        </div>
                                    </a>
                                @empty
                                    <div class="text-muted text-center py-4">No recent files</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Notices -->
                <div class="col-lg-4">
                    <div class="card dashboard-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-megaphone me-2" style="color: var(--primary-color);"></i>
                                Recent Notices
                            </h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="list-group list-group-flush">
                                @forelse($recentNotices as $notice)
                                    <a href="{{ route('notices') }}" class="list-group-item list-group-item-action d-flex align-items-center px-3 py-3">
                                        <div class="flex-shrink-0 me-3">
                                            <div class="stat-icon warning" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                <i class="bi bi-megaphone"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0">{{ Str::limit($notice->notice_description, 30) }}</h6>
                                            <small class="text-muted">
                                                {{ $notice->file->name ?? 'No file' }} • 
                                                {{ $notice->created_at->diffForHumans() }}
                                            </small>
                                        </div>
                                    </a>
                                @empty
                                    <div class="text-muted text-center py-4">No recent notices</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Activity Timeline -->
            <div class="row">
                <div class="col-12">
                    <div class="card dashboard-card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-activity me-2" style="color: var(--primary-color);"></i>
                                Activity Timeline
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="activity-timeline">
                                @forelse($activityTimeline as $activity)
                                    <div class="activity-item">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                @if($activity->type == 'file')
                                                    <span class="badge bg-primary bg-opacity-10 text-primary mb-2">New File</span>
                                                    <h6 class="mb-1">{{ $activity->name }}</h6>
                                                    <p class="text-muted small mb-0">Created by {{ $activity->createdBy->name ?? 'System' }}</p>
                                                @elseif($activity->type == 'notice')
                                                    <span class="badge bg-warning bg-opacity-10 text-warning mb-2">New Notice</span>
                                                    <h6 class="mb-1">{{ Str::limit($activity->notice_description, 50) }}</h6>
                                                    <p class="text-muted small mb-0">Created by {{ $activity->createdBy->name ?? 'System' }}</p>
                                                @elseif($activity->type == 'assignment')
                                                    <span class="badge bg-info bg-opacity-10 text-info mb-2">Stage Assignment</span>
                                                    <h6 class="mb-1">{{ $activity->file->name ?? 'File' }} → {{ $activity->stage->name ?? 'Stage' }}</h6>
                                                    <p class="text-muted small mb-0">
                                                        {{ $activity->comment ?: 'No comment' }} • By {{ $activity->createdBy->name ?? 'System' }}
                                                    </p>
                                                @endif
                                            </div>
                                            <span class="activity-time">{{ $activity->created_at->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-muted text-center py-3">No recent activity</p>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('livewire:init', function() {
            // Monthly Chart
            const monthlyCtx = document.getElementById('monthlyChart')?.getContext('2d');
            if (monthlyCtx) {
                new Chart(monthlyCtx, {
                    type: 'bar',
                    data: {
                        labels: @json(array_column($monthlyStats, 'month')),
                        datasets: [
                            {
                                label: 'Files',
                                data: @json(array_column($monthlyStats, 'files')),
                                backgroundColor: '#4361ee',
                                borderRadius: 6
                            },
                            {
                                label: 'Notices',
                                data: @json(array_column($monthlyStats, 'notices')),
                                backgroundColor: '#f59e0b',
                                borderRadius: 6
                            },
                            {
                                label: 'Attachments',
                                data: @json(array_column($monthlyStats, 'attachments')),
                                backgroundColor: '#10b981',
                                borderRadius: 6
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: {
                                    color: 'var(--text-primary)'
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: 'var(--border-color)'
                                },
                                ticks: {
                                    color: 'var(--text-secondary)'
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    color: 'var(--text-secondary)'
                                }
                            }
                        }
                    }
                });
            }

            // Stage Distribution Chart
            const stageCtx = document.getElementById('stageChart')?.getContext('2d');
            if (stageCtx && @json($stageDistribution).length > 0) {
                new Chart(stageCtx, {
                    type: 'doughnut',
                    data: {
                        labels: @json($stageDistribution->pluck('name')),
                        datasets: [{
                            data: @json($stageDistribution->pluck('count')),
                            backgroundColor: [
                                '#4361ee',
                                '#3a0ca3',
                                '#4cc9f0',
                                '#f72585',
                                '#7209b7',
                                '#f59e0b',
                                '#10b981',
                                '#ef4444'
                            ],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: {
                                    color: 'var(--text-primary)',
                                    font: {
                                        size: 11
                                    }
                                }
                            }
                        },
                        cutout: '60%'
                    }
                });
            }
        });
    </script>
</div>