@extends('layouts.admin')

@section('content')
<!-- CDN Links - All in one place at the top -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    .dashboard-container {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        min-height: 100vh;
        padding: 1.5rem;
    }

    .main-page-content {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
    }

    .stats-card {
        background: white;
        border-radius: 0.8rem;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
        padding: 1.25rem;
        height: 100%;
        border-left: 4px solid #4e73df;
        transition: transform 0.2s ease;
    }

    .stats-card:hover {
        transform: translateY(-3px);
    }

    .chart-container {
        height: 250px;
        position: relative;
    }

    .tab-content {
        padding: 1.5rem 0;
    }

    .nav-tabs .nav-link {
        border-radius: 0.5rem 0.5rem 0 0;
        padding: 0.75rem 1.25rem;
        font-weight: 500;
    }

    .nav-tabs .nav-link.active {
        background-color: #f8f9fa;
        border-bottom-color: #f8f9fa;
    }

    .list-group-item {
        padding: 0.75rem 1rem;
    }

    .keyword-card {
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
        padding: 1rem;
        height: 100%;
        transition: all 0.2s ease;
    }

    .keyword-card:hover {
        border-color: #4e73df;
        box-shadow: 0 0.25rem 0.5rem rgba(78, 115, 223, 0.15);
    }

    .grid-item {
        margin-bottom: 1.25rem;
    }

    .scrollable-list {
        max-height: 300px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .scrollable-list::-webkit-scrollbar {
        width: 5px;
    }

    .scrollable-list::-webkit-scrollbar-thumb {
        background-color: #d1d1d1;
        border-radius: 10px;
    }
</style>

<div class="dashboard-container">
    <div class="container-fluid">
        <div class="main-page-content">
            <!-- Dashboard Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 text-primary fw-bold m-0">
                    <i class="fas fa-tachometer-alt me-2"></i>{{ $isAdmin ? 'Super Admin' : 'Admin' }} Dashboard
                </h1>
                <span class="badge bg-primary p-2">
                    <i class="fas fa-sync-alt me-1"></i>Last updated: {{ now()->format('M d, Y H:i') }}
                </span>
            </div>

            <!-- Stats Cards -->
            <div class="row g-3 mb-4">
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="text-muted">Total Users</h6>
                                <h2 class="h1 fw-bold">{{ $stats['totalUsers'] }}</h2>
                            </div>
                            <div class="display-6 text-primary">
                                <i class="fas fa-users"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card" style="border-left-color: #36b9cc;">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="text-muted">Total Monitors</h6>
                                <h2 class="h1 fw-bold">{{ $stats['totalMonitors'] }}</h2>
                            </div>
                            <div class="display-6 text-info">
                                <i class="fas fa-link"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card" style="border-left-color: #1cc88a;">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="text-muted">Active Monitors</h6>
                                <h2 class="h1 fw-bold">{{ $stats['activeMonitors'] }}</h2>
                            </div>
                            <div class="display-6 text-success">
                                <i class="fas fa-check-circle"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card" style="border-left-color: #f6c23e;">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="text-muted">Avg Response</h6>
                                <h2 class="h1 fw-bold">{{ number_format($stats['avgResponse'], 2) }}s</h2>
                            </div>
                            <div class="display-6 text-warning">
                                <i class="fas fa-stopwatch"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabbed Content -->
            <ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
                        <i class="fas fa-chart-line me-2"></i>Overview
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="ssl-tab" data-bs-toggle="tab" data-bs-target="#ssl" type="button" role="tab" aria-controls="ssl" aria-selected="false">
                        <i class="fas fa-lock me-2"></i>SSL Status
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="changes-tab" data-bs-toggle="tab" data-bs-target="#changes" type="button" role="tab" aria-controls="changes" aria-selected="false">
                        <i class="fas fa-history me-2"></i>Recent Changes
                    </button>
                </li>
                @if($isAdmin)
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab" aria-controls="users" aria-selected="false">
                        <i class="fas fa-users me-2"></i>Top Users
                    </button>
                </li>
                @endif
            </ul>

            <div class="tab-content" id="dashboardTabsContent">
                <!-- Overview Tab -->
                <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="card h-100 shadow-sm">
                                <div class="card-header bg-transparent">
                                    <h5 class="card-title mb-0"><i class="fas fa-chart-line me-2"></i>Response Times (Last 7 Days)</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container">
                                        <canvas id="responseTimeChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100 shadow-sm">
                                <div class="card-header bg-transparent">
                                    <h5 class="card-title mb-0"><i class="fas fa-percentage me-2"></i>Uptime Percentage</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container">
                                        <canvas id="uptimeChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SSL Status Tab -->
                <div class="tab-pane fade" id="ssl" role="tabpanel" aria-labelledby="ssl-tab">
                    <div class="card shadow-sm">
                        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0"><i class="fas fa-lock me-2"></i>Expiring SSL Certificates</h5>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-download me-1"></i>Export
                            </button>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Monitor</th>
                                            <th>Status</th>
                                            <th>Expiry</th>
                                            <th>Days Left</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($expiringSSL as $ssl)
                                            @php
                                                $expired = $ssl->ssl_expires_at->isPast();
                                                $daysLeft = $ssl->ssl_expires_at->diffInDays(now());
                                                $status = $expired ? 'danger' : ($daysLeft < 30 ? 'warning' : 'success');
                                                $statusText = $expired ? 'Expired' : ($daysLeft < 30 ? 'Warning' : 'Valid');
                                            @endphp
                                            <tr>
                                                <td>
                                                    <i class="fas fa-globe me-2 text-secondary"></i>{{ $ssl->name }}
                                                </td>
                                                <td>
                                                    <span class="badge bg-{{ $status }}">{{ $statusText }}</span>
                                                </td>
                                                <td>{{ $ssl->ssl_expires_at->format('M d, Y') }}</td>
                                                <td>
                                                    <span class="text-{{ $status }}">
                                                        {{ $expired ? 'Expired' : $daysLeft . ' days' }}
                                                    </span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="text-center text-muted py-4">No expiring SSL certificates</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Changes Tab -->
                <div class="tab-pane fade" id="changes" role="tabpanel" aria-labelledby="changes-tab">
                    <div class="card shadow-sm">
                        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0"><i class="fas fa-clock-rotate-left me-2"></i>Recent Changes</h5>
                            <a href="#" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-eye me-1"></i>View All
                            </a>
                        </div>
                        <div class="card-body p-0">
                            <div class="list-group list-group-flush scrollable-list">
                                @forelse($recentChanges as $change)
                                    <div class="list-group-item">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <div class="fw-bold">
                                                    <i class="fas fa-file-alt me-2 text-primary"></i>
                                                    {{ $change->monitor->name }}
                                                    @if($isAdmin)
                                                    <span class="text-muted small">by {{ $change->user->name }}</span>
                                                    @endif
                                                </div>
                                                <p class="mb-0 text-muted small mt-1">{{ $change->details }}</p>
                                            </div>
                                            <span class="badge bg-light text-dark">{{ $change->created_at->diffForHumans() }}</span>
                                        </div>
                                    </div>
                                @empty
                                    <div class="list-group-item text-center text-muted py-3">No recent changes</div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Top Users Tab (Admin Only) -->
                @if($isAdmin)
                <div class="tab-pane fade" id="users" role="tabpanel" aria-labelledby="users-tab">
                    <div class="card shadow-sm">
                        <div class="card-header bg-transparent">
                            <h5 class="card-title mb-0"><i class="fas fa-users me-2"></i>Top Active Users</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                @foreach($userActivity as $user)
                                    <div class="col-md-6 col-lg-4">
                                        <div class="keyword-card h-100">
                                            <h6 class="fw-bold mb-3 border-bottom pb-2">
                                                <i class="fas fa-user me-2 text-primary"></i>{{ $user->name }}
                                            </h6>
                                            <div class="list-group list-group-flush">
                                                <div class="list-group-item px-0 d-flex justify-content-between align-items-center border-0 py-1">
                                                    <span>Email</span>
                                                    <span class="badge bg-primary rounded-pill">{{ $user->email }}</span>
                                                </div>
                                                <div class="list-group-item px-0 d-flex justify-content-between align-items-center border-0 py-1">
                                                    <span>Monitors</span>
                                                    <span class="badge bg-primary rounded-pill">{{ $user->monitors_count }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Response Time Line Chart
        new Chart(document.getElementById('responseTimeChart'), {
            type: 'line',
            data: {
                labels: @json($responseTimes->keys()),
                datasets: [{
                    label: 'Response Time (seconds)',
                    data: @json($responseTimes->values()),
                    borderColor: '#4e73df',
                    backgroundColor: 'rgba(78, 115, 223, 0.1)',
                    tension: 0.3,
                    borderWidth: 2,
                    pointRadius: 3,
                    pointBackgroundColor: '#4e73df',
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        padding: 10,
                        cornerRadius: 6
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            drawBorder: false,
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // Uptime Bar Chart
        new Chart(document.getElementById('uptimeChart'), {
            type: 'bar',
            data: {
                labels: @json($uptimeData->keys()),
                datasets: [{
                    label: 'Uptime %',
                    data: @json($uptimeData->values()),
                    backgroundColor: 'rgba(28, 200, 138, 0.8)',
                    borderWidth: 0,
                    borderRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.7)',
                        padding: 10,
                        cornerRadius: 6
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        grid: {
                            drawBorder: false,
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    });
</script>
@endsection