@extends('layouts.app')

@section('title', 'HastAI Admin - General Dashboard')
@section('page_title', 'General Dashboard')

@section('styles')
<style>
    :root {
        --glass-bg: rgba(255, 255, 255, 0.75);
        --glass-border: rgba(255, 255, 255, 0.5);
        --glass-shadow: 0 8px 32px 10px rgba(31, 38, 135, 0.08);
        --accent-purple: #6c5ce7;
        --accent-blue: #0984e3;
        --accent-green: #00b894;
        --accent-orange: #e17055;
        --accent-red: #d63031;
        --text-dark: #2d3436;
        --text-muted: #636e72;
    }

    .glass-card {
        background: #fff;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 16px;
        box-shadow: 0 4px 20px 0 rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        margin-bottom: 24px;
        padding: 24px;
    }

    .glass-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    }

    .stat-card {
        display: flex;
        align-items: center;
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        font-size: 24px;
        color: #fff;
    }

    .icon-purple { background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
    .icon-blue { background: linear-gradient(135deg, #74b9ff, #0984e3); }
    .icon-green { background: linear-gradient(135deg, #55efc4, #00b894); }
    .icon-orange { background: linear-gradient(135deg, #fab1a0, #e17055); }
    .icon-red { background: linear-gradient(135deg, #ff7675, #d63031); }

    .stat-info h3 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: var(--text-dark);
    }

    .stat-info p {
        margin: 2px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .chart-container {
        position: relative;
        height: 320px;
    }
    .activity-timeline {
        padding: 0;
        list-style: none;
        position: relative;
        max-height: 350px;
        overflow-y: auto;
    }
    .activity-item {
        position: relative;
        padding-left: 30px;
        padding-bottom: 20px;
    }
    .activity-item::before {
        content: '';
        position: absolute;
        left: 9px;
        top: 5px;
        bottom: 0;
        width: 2px;
        background: rgba(0, 0, 0, 0.08);
    }
    .activity-item:last-child::before {
        display: none;
    }
    .activity-badge {
        position: absolute;
        left: 0;
        top: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--accent-purple);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }
    .activity-content h6 {
        margin: 0 0 4px;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-dark);
    }
    .activity-content p {
        margin: 0;
        font-size: 12px;
        color: var(--text-muted);
    }
</style>
@endsection

@section('content')
<!-- Quick Stats -->
<div class="row">
    <div class="col-md-3">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-blue">
                <i class="feather icon-users"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($totalUsers) }}</h3>
                <p>Total Users</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-purple">
                <i class="feather icon-smartphone"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($totalDevices) }}</h3>
                <p>Total Devices</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-green">
                <i class="feather icon-activity"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($mauCount) }}</h3>
                <p>Monthly Active (MAU)</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-blue">
                <i class="feather icon-check-circle"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $conversionRate }}%</h3>
                <p>Conversion Rate</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-orange">
                <i class="feather icon-user-plus"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($todayUsers) }}</h3>
                <p>Today New Users</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-blue">
                <i class="feather icon-calendar"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($thisWeekUsers) }}</h3>
                <p>This Week New Users</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-purple">
                <i class="feather icon-calendar"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($thisMonthUsers) }}</h3>
                <p>This Month New Users</p>
            </div>
        </div>
    </div>
</div>

<!-- Marketing & Growth Stats -->
<div class="row">
    <div class="col-md-4">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-green">
                <i class="feather icon-users"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($totalReferrals) }}</h3>
                <p>Total Referrals</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-blue">
                <i class="feather icon-bell"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($totalNotificationsSent) }}</h3>
                <p>Total Notifications Sent</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-purple">
                <i class="feather icon-percent"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $notificationCtr }}%</h3>
                <p>Notification CTR</p>
            </div>
        </div>
    </div>
</div>

<!-- Growth and Device distribution charts -->
<div class="row">
    <div class="col-lg-8">
        <div class="glass-card">
            <h5 class="mb-4"><i class="feather icon-trending-up text-primary mr-2"></i> User Growth & Activity Trend</h5>
            <div class="chart-container">
                <canvas id="growthTrendChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="glass-card">
            <h5 class="mb-4"><i class="feather icon-pie-chart text-success mr-2"></i> Device Analytics</h5>
            <div class="chart-container" style="height: 250px;">
                <canvas id="brandChart"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="glass-card">
            <h5 class="mb-4"><i class="feather icon-cpu text-info mr-2"></i> OS Version Distribution</h5>
            <div class="chart-container" style="height: 300px;">
                <canvas id="systemVersionChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Tables Row: Latest Users & Top App Versions -->
<div class="row">
    <div class="col-lg-8">
        <div class="glass-card" style="min-height: 380px;">
            <h5 class="mb-4"><i class="feather icon-users text-primary mr-2"></i> Latest Registered Users (Last 10 Only)</h5>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Registered</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($latestUsers as $user)
                        <tr>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->created_at->diffForHumans() }}</td>
                            <td>
                                @if($user->is_suspended)
                                    <span class="badge badge-danger text-white">Suspended</span>
                                @else
                                    <span class="badge badge-success text-white">Active</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">No users found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="glass-card" style="min-height: 380px;">
            <h5 class="mb-4"><i class="feather icon-server text-warning mr-2"></i> Top Active App Versions</h5>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>App Version</th>
                            <th>Installations</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($topAppVersions as $app)
                        <tr>
                            <td><span class="badge badge-light-warning">v{{ $app->appVersion }}</span></td>
                            <td><strong>{{ number_format($app->count) }}</strong> devices</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="2" class="text-center text-muted">No version data.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Activity, Referrers & Suspended Users Row -->
<div class="row">
    <!-- Activity Stream Timeline -->
    <div class="col-lg-4">
        <div class="glass-card" style="min-height: 440px;">
            <h5 class="mb-4"><i class="feather icon-activity text-info mr-2"></i> Recent Activity Stream</h5>
            <ul class="activity-timeline">
                @forelse($activityStream as $activity)
                <li class="activity-item">
                    <div class="activity-badge">
                        <i class="feather icon-{{ explode(' ', $activity['icon'])[0] }}"></i>
                    </div>
                    <div class="activity-content">
                        <h6>{{ $activity['title'] }}</h6>
                        <p>{{ $activity['description'] }}</p>
                        <small class="text-muted">{{ $activity['time']->diffForHumans() }}</small>
                    </div>
                </li>
                @empty
                <li class="text-center text-muted p-4">No recent activity logged.</li>
                @endforelse
            </ul>
        </div>
    </div>

    <!-- Top Referrers Log -->
    <div class="col-lg-4">
        <div class="glass-card" style="min-height: 440px;">
            <h5 class="mb-4"><i class="feather icon-users text-primary mr-2"></i> Top Referrers</h5>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th class="text-right">Referrals</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($topReferrers as $referrer)
                        <tr>
                            <td>
                                <span class="font-weight-bold text-dark">{{ $referrer->name }}</span>
                                <br><small class="text-muted">{{ $referrer->email }}</small>
                            </td>
                            <td class="text-right font-weight-bold text-success">{{ $referrer->count }} referrals</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="2" class="text-center text-muted">No referrals logged.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Suspended Users Log -->
    <div class="col-lg-4">
        <div class="glass-card" style="min-height: 440px;">
            <h5 class="mb-4"><i class="feather icon-slash text-danger mr-2"></i> Suspended Users Log</h5>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th class="text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($suspendedUsers as $user)
                        <tr>
                            <td>
                                <span class="font-weight-bold text-dark">{{ $user->name }}</span>
                                <br><small class="text-muted">{{ $user->email }}</small>
                            </td>
                            <td class="text-right">
                                <form action="{{ route('app-users.toggle-suspension', $user->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-light-success text-success font-weight-bold" style="border: none; border-radius: 8px;">
                                        Unsuspend
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="2" class="text-center text-muted">No suspended users.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Data sets
        const growthData = @json($monthlyRegistrationData);
        const reportTrend = @json($monthlyReportTrendData);
        const brandData = @json($brandData);
        const systemVersionData = @json($systemVersionData);

        // Colors
        const colors = {
            purple: '#6c5ce7',
            blue: '#0984e3',
            teal: '#00b894',
            orange: '#e17055',
            red: '#d63031'
        };

        // 1. Growth trend chart
        const ctxTrend = document.getElementById('growthTrendChart').getContext('2d');
        new Chart(ctxTrend, {
            type: 'line',
            data: {
                labels: growthData.labels,
                datasets: [
                    {
                        label: 'New Registrations',
                        data: growthData.data,
                        borderColor: colors.purple,
                        backgroundColor: 'rgba(108, 92, 231, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Reports Generated',
                        data: reportTrend.data,
                        borderColor: colors.teal,
                        backgroundColor: 'rgba(0, 184, 148, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 2. Brand Chart
        new Chart(document.getElementById('brandChart'), {
            type: 'doughnut',
            data: {
                labels: Object.keys(brandData),
                datasets: [{
                    data: Object.values(brandData),
                    backgroundColor: [colors.blue, colors.purple, colors.teal, colors.orange, colors.red, '#ffeaa7', '#fab1a0']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right'
                    }
                }
            }
        });

        // 3. OS System Chart
        new Chart(document.getElementById('systemVersionChart'), {
            type: 'bar',
            data: {
                labels: Object.keys(systemVersionData),
                datasets: [{
                    label: 'Devices count',
                    data: Object.values(systemVersionData),
                    backgroundColor: colors.blue
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>
@endsection