@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-title-jp', 'ダッシュボード')

@section('content')
    <style>
        .dashboard-section-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 1.25rem;
            margin-top: 2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .dashboard-section-title:first-child {
            margin-top: 0;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 16px;
            padding: 1.25rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .glass-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--card-color-1, #3b82f6), var(--card-color-2, #8b5cf6));
        }

        .glass-card-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.25rem;
        }

        .glass-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .glass-icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(var(--card-rgb, 59, 130, 246), 0.1), rgba(var(--card-rgb, 59, 130, 246), 0.2));
            color: rgb(var(--card-rgb, 59, 130, 246));
            opacity: 0.8;
        }

        .glass-value {
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.02em;
            margin: 0.75rem 0;
        }

        .glass-change {
            font-size: 0.75rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .glass-change.positive {
            color: #10b981;
        }

        .glass-change.neutral {
            color: #8b5cf6;
        }

        .metrics-grid-modern {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.25rem;
        }
        .activity-badge.learning { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
        .activity-badge.social { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
        .activity-badge.system { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
        .activity-badge.focus { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }

        .status-indicator { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
        .status-indicator.correct { background: #dcfce7; color: #166534; }
        .status-indicator.incorrect { background: #fee2e2; color: #991b1b; }
        .status-indicator.completed { background: #f0f9ff; color: #075985; }
        .status-indicator.new { background: #fef9c3; color: #854d0e; }
        .status-indicator.finished { background: #f3f4f6; color: #374151; }

        .activity-impact { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #64748b; }

        .rank-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
        .rank-beginner-i { background: #f1f5f9; color: #64748b; }
        .rank-beginner-ii { background: #e2e8f0; color: #475569; }
        .rank-elementary { background: #dcfce7; color: #166534; }
        .rank-pre-intermediate { background: #d1fae5; color: #065f46; }
        .rank-intermediate { background: #dbeafe; color: #1e40af; }
        .rank-upper-intermediate { background: #d0e1ff; color: #1e3a8a; }
        .rank-advanced { background: #ede9fe; color: #5b21b6; }
        .rank-expert { background: #f5f3ff; color: #4c1d95; }
        .rank-master { background: #ffedd5; color: #9a3412; }
        .rank-sage { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

        .activity-streak { color: #f59e0b; font-weight: 700; font-size: 12px; white-space: nowrap; }
        .activity-accuracy { color: #10b981; font-weight: 600; font-size: 12px; white-space: nowrap; }
        .activity-elo { color: #6366f1; font-weight: 600; font-size: 12px; white-space: nowrap; }

        .activity-card { width: 100%; overflow: hidden; }
        .activity-table table { min-width: 1000px; }
    </style>

    <h2 class="dashboard-section-title">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24" class="text-blue-500">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
        User Engagement
    </h2>

    <div class="metrics-grid-modern">
        <div class="glass-card" style="--card-color-1: #3b82f6; --card-color-2: #2563eb; --card-rgb: 59, 130, 246;">
            <div class="glass-card-top">
                <div class="glass-label">Total Users</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($metrics['total_users']) }}</div>
            <div class="glass-change positive">↑ +{{ $metrics['new_users_this_week'] }} this week</div>
        </div>

        <div class="glass-card" style="--card-color-1: #10b981; --card-color-2: #059669; --card-rgb: 16, 185, 129;">
            <div class="glass-card-top">
                <div class="glass-label">Active Today</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($metrics['active_users_today']) }}</div>
            <div class="glass-change positive">{{ $engagementMetrics['daily_active_rate'] }}% daily engagement</div>
        </div>

        <div class="glass-card" style="--card-color-1: #8b5cf6; --card-color-2: #6d28d9; --card-rgb: 139, 92, 246;">
            <div class="glass-card-top">
                <div class="glass-label">Reviews Today</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($metrics['reviews_today']) }}</div>
            <div class="glass-change neutral">{{ number_format($contentMetrics['total_reviews']) }} total reviews ever</div>
        </div>

        <div class="glass-card" style="--card-color-1: #0ea5e9; --card-color-2: #0284c7; --card-rgb: 14, 165, 233;">
            <div class="glass-card-top">
                <div class="glass-label">Weekly Active Users</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ $engagementMetrics['weekly_active_rate'] }}%</div>
            <div class="glass-change neutral">{{ $engagementMetrics['monthly_active_rate'] }}% monthly active</div>
        </div>

        <div class="glass-card" style="--card-color-1: #ec4899; --card-color-2: #db2777; --card-rgb: 236, 72, 153;">
            <div class="glass-card-top">
                <div class="glass-label">Today's Accuracy</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ $metrics['today_accuracy_rate'] }}%</div>
            <div class="glass-change positive">Average retention rate today</div>
        </div>

        <div class="glass-card" style="--card-color-1: #f43f5e; --card-color-2: #e11d48; --card-rgb: 244, 63, 94;">
            <div class="glass-card-top">
                <div class="glass-label">New Users (Month)</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($metrics['new_users_this_month']) }}</div>
            <div class="glass-change positive">Last 30 days growth</div>
        </div>
    </div>

    <h2 class="dashboard-section-title">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="24" height="24"
            class="text-orange-500">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
        Content Health
    </h2>

    <div class="metrics-grid-modern" style="margin-bottom: 24px">
        <div class="glass-card" style="--card-color-1: #f59e0b; --card-color-2: #d97706; --card-rgb: 245, 158, 11;">
            <div class="glass-card-top">
                <div class="glass-label">Vocab Flashcards</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($metrics['total_cards']) }}</div>
            <div class="glass-change neutral">Across {{ number_format($metrics['total_decks']) }} decks
                ({{ number_format($contentMetrics['avg_cards_per_deck'], 1) }} avg)</div>
        </div>

        <div class="glass-card" style="--card-color-1: #ef4444; --card-color-2: #dc2626; --card-rgb: 239, 68, 68;">
            <div class="glass-card-top">
                <div class="glass-label">Practice Sentences</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($contentMetrics['total_sentences']) }}</div>
            <div class="glass-change neutral">Curated Japanese sentences</div>
        </div>

        <div class="glass-card" style="--card-color-1: #8b5cf6; --card-color-2: #7c3aed; --card-rgb: 139, 92, 246;">
            <div class="glass-card-top">
                <div class="glass-label">Particle Quizzes</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($contentMetrics['total_particles']) }}</div>
            <div class="glass-change neutral">Grammar fill-in-the-blank</div>
        </div>

        <div class="glass-card" style="--card-color-1: #14b8a6; --card-color-2: #0d9488; --card-rgb: 20, 184, 166;">
            <div class="glass-card-top">
                <div class="glass-label">Total Kanji</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($contentMetrics['total_kanjis']) }}</div>
            <div class="glass-change neutral">JLPT kanji database</div>
        </div>

        <div class="glass-card" style="--card-color-1: #6366f1; --card-color-2: #4f46e5; --card-rgb: 99, 102, 241;">
            <div class="glass-card-top">
                <div class="glass-label">Weekly New Content</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">{{ number_format($metrics['weekly_new_content']['total']) }}</div>
            <div class="glass-change neutral">{{ $metrics['weekly_new_content']['kanjis'] }} Kanji,
                {{ $metrics['weekly_new_content']['cards'] }} Vocab added</div>
        </div>

        <div class="glass-card" style="--card-color-1: #ef4444; --card-color-2: #b91c1c; --card-rgb: 239, 68, 68;">
            <div class="glass-card-top">
                <div class="glass-label">Reported Content</div>
                <div class="glass-icon-wrapper">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
            <div class="glass-value">0</div>
            <div class="glass-change neutral">Pending user reports (Coming soon)</div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="charts-row">
        <div class="chart-card">
            <div class="chart-header">
                <h3>User Growth (60 Days)</h3>
                <span class="chart-subtitle">New user registrations</span>
            </div>
            <div class="chart-container">
                <div id="userGrowthChart" style="width: 100%; height: 100%;"></div>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h3>Review Activity (14 Days)</h3>
                <span class="chart-subtitle">Daily review completions</span>
            </div>
            <div class="chart-container">
                <div id="reviewActivityChart" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>

    <!-- New Charts Row -->
    <div class="charts-row-custom">
        <div class="chart-card chart-card-small">
            <div class="chart-header">
                <h3>User Engagement Distribution</h3>
                <span class="chart-subtitle">Active users breakdown</span>
            </div>
            <div class="chart-container">
                <div id="engagementChart" style="width: 100%; height: 100%;"></div>
            </div>
        </div>

        <div class="chart-card chart-card-large">
            <div class="chart-header">
                <h3>Cumulative Reviews (14 Days)</h3>
                <span class="chart-subtitle">Total reviews over time</span>
            </div>
            <div class="chart-container">
                <div id="cumulativeChart" style="width: 100%; height: 100%;"></div>
            </div>
        </div>
    </div>

    <!-- Data Tables Row -->
    <div class="tables-row">
        <!-- Top Performing Users -->
        <div class="data-card">
            <div class="data-header">
                <h3>Top Performing Users</h3>
                <a href="{{ route('admin.users.index') }}" class="view-all">View All →</a>
            </div>
            <div class="data-content">
                @forelse($topUsers as $user)
                    <div class="user-item">
                        <div class="user-avatar">{{ strtoupper(substr($user['name'], 0, 1)) }}</div>
                        <div class="user-info">
                            <div class="user-name">{{ $user['name'] }}</div>
                            <div class="user-stat">{{ number_format($user['reviews']) }} reviews</div>
                        </div>
                        <div class="user-badge">🏆</div>
                    </div>
                @empty
                    <p class="empty-state">No user data available</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Users -->
        <div class="data-card">
            <div class="data-header">
                <h3>Recent Users</h3>
                <a href="{{ route('admin.users.index') }}" class="view-all">View All →</a>
            </div>
            <div class="data-content">
                @forelse($recentUsers as $user)
                    <div class="user-item">
                        <div class="user-avatar">{{ strtoupper(substr($user['name'], 0, 1)) }}</div>
                        <div class="user-info">
                            <div class="user-name">{{ $user['name'] }}</div>
                            <div class="user-stat">{{ $user['created_at']->diffForHumans() }}</div>
                        </div>
                        <div class="user-badge new">NEW</div>
                    </div>
                @empty
                    <p class="empty-state">No recent users</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Recent Activity Table -->
    <div class="activity-card">
        <div class="activity-header">
            <h3>Recent Activity</h3>
            <span class="activity-subtitle">Latest user interactions</span>
        </div>
        @if (count($recentActivity) > 0)
            <div class="activity-table">
                <table>
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Rank</th>
                            <th>Streak</th>
                            <th>Action</th>
                            <th>Detail</th>
                            <th>Status</th>
                            <th>Impact</th>
                            <th>Acc (7d)</th>
                            <th>ELO</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recentActivity as $activity)
                            <tr>
                                <td>
                                    <div class="activity-user">
                                        <div class="activity-avatar">{{ strtoupper(substr($activity['user'], 0, 1)) }}
                                        </div>
                                        <span>{{ $activity['user'] }}</span>
                                    </div>
                                </td>
                                <td><span class="rank-badge rank-{{ strtolower(str_replace(' ', '-', $activity['rank'])) }}">{{ $activity['rank'] }}</span></td>
                                <td class="activity-streak">🔥 {{ $activity['streak'] }}d</td>
                                <td><span class="activity-badge {{ $activity['type'] }}">{{ $activity['action'] }}</span></td>
                                <td class="activity-card-text">{{ Str::limit($activity['detail'], 40) }}</td>
                                <td>
                                    <span class="status-indicator {{ strtolower($activity['status']) }}">
                                        {{ $activity['status'] }}
                                    </span>
                                </td>
                                <td class="activity-impact">{{ $activity['impact'] }}</td>
                                <td class="activity-accuracy">🎯 {{ $activity['accuracy_7d'] }}%</td>
                                <td class="activity-elo">🏆 {{ number_format($activity['elo']) }}</td>
                                <td class="activity-time">{{ $activity['timestamp']->diffForHumans() }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="empty-state">No recent activity</p>
        @endif
    </div>

    <script src="{{ asset('js/echarts.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // User Growth Chart (Enhanced Area Chart)
            const userGrowthChart = echarts.init(document.querySelector("#userGrowthChart"));
            const userGrowthOptions = {
                animationDuration: 800,
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c}'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '4%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: @json($userGrowthChart['labels']),
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#64748b',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#f1f5f9'
                        }
                    },
                    axisLabel: {
                        color: '#64748b',
                        fontSize: 12
                    }
                },
                series: [{
                    name: 'New Users',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    itemStyle: {
                        color: '#3b82f6'
                    },
                    lineStyle: {
                        width: 3
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(59, 130, 246, 0.7)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(59, 130, 246, 0.2)'
                            }
                        ])
                    },
                    data: @json($userGrowthChart['values'])
                }]
            };
            userGrowthChart.setOption(userGrowthOptions);

            // Review Activity Chart (Enhanced Column Chart)
            const reviewActivityChart = echarts.init(document.querySelector("#reviewActivityChart"));
            const reviewActivityOptions = {
                animationDuration: 800,
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c} reviews',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '4%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: @json($reviewActivityChart['labels']),
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#64748b',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#f1f5f9'
                        }
                    },
                    axisLabel: {
                        color: '#64748b',
                        fontSize: 12
                    }
                },
                series: [{
                    name: 'Reviews',
                    type: 'bar',
                    barWidth: '60%',
                    itemStyle: {
                        color: '#8b5cf6',
                        borderRadius: [8, 8, 0, 0]
                    },
                    data: @json($reviewActivityChart['values'])
                }]
            };
            reviewActivityChart.setOption(reviewActivityOptions);

            // Engagement Distribution Donut Chart
            const engagementChart = echarts.init(document.querySelector("#engagementChart"));
            const engagementOptions = {
                animationDuration: 800,
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}%'
                },
                legend: {
                    bottom: '0%',
                    left: 'center',
                    icon: 'circle',
                    itemGap: 16,
                    textStyle: {
                        color: '#64748b',
                        fontSize: 11,
                        fontWeight: 500
                    }
                },
                color: ['#10b981', '#3b82f6', '#e5e7eb'],
                series: [{
                    name: 'Engagement',
                    type: 'pie',
                    radius: ['55%', '75%'],
                    center: ['50%', '45%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 2,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold',
                            color: '#1e293b',
                            formatter: '{d}%'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [{
                            value: {{ $engagementMetrics['daily_active_rate'] }},
                            name: 'Active Today'
                        },
                        {
                            value: {{ $engagementMetrics['weekly_active_rate'] - $engagementMetrics['daily_active_rate'] }},
                            name: 'Active This Week'
                        },
                        {
                            value: {{ 100 - $engagementMetrics['weekly_active_rate'] }},
                            name: 'Inactive'
                        }
                    ]
                }]
            };
            engagementChart.setOption(engagementOptions);

            // Cumulative Reviews Area Chart
            const cumulativeData = @json($reviewActivityChart['values']).reduce((acc, val, idx) => {
                const prev = Number(acc[idx - 1] || 0);
                const current = Number(val || 0);
                acc.push(prev + current);
                return acc;
            }, []);

            const cumulativeChart = echarts.init(document.querySelector("#cumulativeChart"));
            const cumulativeOptions = {
                animationDuration: 800,
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c} total reviews'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '4%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: @json($reviewActivityChart['labels']),
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#64748b',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#f1f5f9'
                        }
                    },
                    axisLabel: {
                        color: '#64748b',
                        fontSize: 12
                    }
                },
                series: [{
                    name: 'Total Reviews',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    itemStyle: {
                        color: '#f59e0b'
                    },
                    lineStyle: {
                        width: 3
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(245, 158, 11, 0.6)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(245, 158, 11, 0.1)'
                            }
                        ])
                    },
                    data: cumulativeData
                }]
            };
            cumulativeChart.setOption(cumulativeOptions);

            // Resize charts on window resize
            window.addEventListener('resize', function() {
                userGrowthChart.resize();
                reviewActivityChart.resize();
                engagementChart.resize();
                cumulativeChart.resize();
            });
        });
    </script>
@endsection