@extends('admin.layout')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-subtitle', 'Overview of your system performance and module status')

@section('breadcrumb')
    <span class="breadcrumb-item active">Dashboard</span>
@endsection

@push('header-actions')
    <button class="btn btn-secondary" onclick="AdminUtils.refreshData('/api/admin/dashboard', updateDashboard)">
        <i class="fas fa-sync-alt"></i>
        Refresh
    </button>
    <button class="btn btn-primary" onclick="AdminUtils.exportData(dashboardData, 'dashboard-report.json')">
        <i class="fas fa-download"></i>
        Export
    </button>
@endpush

@section('content')
    <!-- Key Metrics -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">Total Tenants</div>
                <div class="stat-icon">
                    <i class="fas fa-building"></i>
                </div>
            </div>
            <div class="stat-value" data-value="{{ $stats['total_tenants'] }}">{{ $stats['total_tenants'] }}</div>
            <div class="stat-change {{ $stats['tenant_growth'] >= 0 ? 'positive' : 'negative' }}">
                <i class="fas fa-arrow-{{ $stats['tenant_growth'] >= 0 ? 'up' : 'down' }}"></i>
                <span>{{ abs($stats['tenant_growth']) }}% this month</span>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">Active Users</div>
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
            </div>
            <div class="stat-value" data-value="{{ $stats['active_users'] }}">{{ $stats['active_users'] }}</div>
            <div class="stat-change {{ $stats['user_growth'] >= 0 ? 'positive' : 'negative' }}">
                <i class="fas fa-arrow-{{ $stats['user_growth'] >= 0 ? 'up' : 'down' }}"></i>
                <span>{{ abs($stats['user_growth']) }}% this week</span>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">Modules Installed</div>
                <div class="stat-icon">
                    <i class="fas fa-puzzle-piece"></i>
                </div>
            </div>
            <div class="stat-value" data-value="{{ $stats['installed_modules'] }}">{{ $stats['installed_modules'] }}</div>
            <div class="stat-change">
                <i class="fas fa-info-circle"></i>
                <span>{{ $stats['total_modules'] }} available</span>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-title">System Health</div>
                <div class="stat-icon">
                    <i class="fas fa-heartbeat"></i>
                </div>
            </div>
            <div class="stat-value">{{ $stats['system_health'] }}%</div>
            <div class="stat-change {{ $stats['system_health'] >= 95 ? 'positive' : ($stats['system_health'] >= 80 ? '' : 'negative') }}">
                <i class="fas fa-{{ $stats['system_health'] >= 95 ? 'check' : ($stats['system_health'] >= 80 ? 'exclamation' : 'times') }}-circle"></i>
                <span>{{ $stats['system_health'] >= 95 ? 'Excellent' : ($stats['system_health'] >= 80 ? 'Good' : 'Needs Attention') }}</span>
            </div>
        </div>
    </div>

    <!-- Quick Actions & Recent Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Quick Actions -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">Quick Actions</div>
                <div class="card-description">Common administrative tasks</div>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2 gap-4">
                    <button class="btn btn-primary w-full" onclick="location.href='{{ route('admin.modules.index') }}'">
                        <i class="fas fa-puzzle-piece"></i>
                        Manage Modules
                    </button>
                    <button class="btn btn-success w-full" onclick="createNewTenant()">
                        <i class="fas fa-plus"></i>
                        Add Tenant
                    </button>
                    <button class="btn btn-warning w-full" onclick="location.href='{{ route('admin.features.index') }}'">
                        <i class="fas fa-toggle-on"></i>
                        Feature Toggles
                    </button>
                    <button class="btn btn-secondary w-full" onclick="location.href='{{ route('admin.settings') }}'">
                        <i class="fas fa-cog"></i>
                        System Settings
                    </button>
                </div>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">Recent Activity</div>
                <div class="card-description">Latest system events and changes</div>
            </div>
            <div class="card-body">
                <div class="activity-feed">
                    @forelse($recentActivity as $activity)
                        <div class="activity-item">
                            <div class="activity-icon">
                                <i class="fas fa-{{ $activity['icon'] }}"></i>
                            </div>
                            <div class="activity-content">
                                <div class="activity-title">{{ $activity['title'] }}</div>
                                <div class="activity-description">{{ $activity['description'] }}</div>
                                <div class="activity-time">{{ $activity['time'] }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="empty-state">
                            <i class="fas fa-clock"></i>
                            <p>No recent activity</p>
                        </div>
                    @endforelse
                </div>
            </div>
            <div class="card-footer">
                <a href="{{ route('admin.activity') }}" class="btn btn-ghost">
                    View All Activity
                    <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- System Status & Module Overview -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- System Status -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">System Status</div>
                <div class="card-description">Current system performance</div>
            </div>
            <div class="card-body">
                <div class="status-list">
                    @foreach($systemStatus as $component => $status)
                        <div class="status-item">
                            <div class="status-info">
                                <div class="status-name">{{ ucwords(str_replace('_', ' ', $component)) }}</div>
                                <div class="status-value">{{ $status['value'] }}</div>
                            </div>
                            <div class="status-indicator {{ $status['status'] }}">
                                <i class="fas fa-{{ $status['status'] === 'healthy' ? 'check' : ($status['status'] === 'warning' ? 'exclamation' : 'times') }}"></i>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Top Modules -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">Most Used Modules</div>
                <div class="card-description">Popular modules by usage</div>
            </div>
            <div class="card-body">
                <div class="module-usage-list">
                    @foreach($topModules as $module)
                        <div class="usage-item">
                            <div class="usage-info">
                                <div class="usage-name">{{ $module['name'] }}</div>
                                <div class="usage-stats">{{ $module['tenants'] }} tenants • {{ $module['usage'] }}% usage</div>
                            </div>
                            <div class="usage-chart">
                                <div class="progress-bar" data-width="{{ $module['usage'] }}%" style="width: {{ $module['usage'] }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Plan Distribution -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">Plan Distribution</div>
                <div class="card-description">Tenant subscription breakdown</div>
            </div>
            <div class="card-body">
                <div class="plan-distribution">
                    @foreach($planDistribution as $plan => $data)
                        <div class="plan-item">
                            <div class="plan-info">
                                <div class="plan-name">{{ ucfirst($plan) }}</div>
                                <div class="plan-count">{{ $data['count'] }} tenants</div>
                            </div>
                            <div class="plan-percentage">{{ $data['percentage'] }}%</div>
                        </div>
                        <div class="plan-bar">
                            <div class="plan-fill plan-{{ $plan }}" style="width: {{ $data['percentage'] }}%"></div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Charts -->
    <div class="card mt-6">
        <div class="card-header">
            <div class="card-title">Performance Trends</div>
            <div class="card-description">System metrics over time</div>
        </div>
        <div class="card-body">
            <div class="chart-container">
                <canvas id="performanceChart" width="800" height="300"></canvas>
            </div>
        </div>
    </div>

    <!-- Create Tenant Modal -->
    <div id="createTenantModal" class="modal" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Tenant</h5>
                    <button type="button" class="btn-close" onclick="AdminUtils.closeModal('createTenantModal')">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form id="createTenantForm" onsubmit="submitTenantForm(event)">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label">Company Name</label>
                            <input type="text" class="form-control" name="company_name" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Subdomain</label>
                            <input type="text" class="form-control" name="subdomain" required>
                            <div class="form-help">This will be used as: subdomain.yourdomain.com</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Plan</label>
                            <select class="form-control form-select" name="plan" required>
                                <option value="starter">Starter</option>
                                <option value="professional">Professional</option>
                                <option value="enterprise">Enterprise</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Admin Email</label>
                            <input type="email" class="form-control" name="admin_email" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="AdminUtils.closeModal('createTenantModal')">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create Tenant</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.mt-6 {
    margin-top: var(--space-6);
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    transition: background-color 0.2s ease;
}

.activity-item:hover {
    background-color: var(--neutral-50);
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-100), var(--primary-200));
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: var(--font-weight-medium);
    color: var(--neutral-900);
    margin-bottom: var(--space-1);
}

.activity-description {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    margin-bottom: var(--space-1);
}

.activity-time {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.empty-state {
    text-align: center;
    padding: var(--space-8);
    color: var(--neutral-500);
}

.empty-state i {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.status-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background-color: var(--neutral-50);
    border-radius: var(--radius-lg);
}

.status-info {
    flex: 1;
}

.status-name {
    font-weight: var(--font-weight-medium);
    color: var(--neutral-900);
}

.status-value {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.status-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.status-indicator.healthy {
    background-color: var(--success-500);
}

.status-indicator.warning {
    background-color: var(--warning-500);
}

.status-indicator.error {
    background-color: var(--error-500);
}

.module-usage-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.usage-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.usage-info {
    flex: 1;
}

.usage-name {
    font-weight: var(--font-weight-medium);
    color: var(--neutral-900);
}

.usage-stats {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.usage-chart {
    width: 60px;
    height: 4px;
    background-color: var(--neutral-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-400), var(--primary-500));
    transition: width 1s ease-in-out;
}

.plan-distribution {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.plan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.plan-info {
    flex: 1;
}

.plan-name {
    font-weight: var(--font-weight-medium);
    color: var(--neutral-900);
}

.plan-count {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.plan-percentage {
    font-weight: var(--font-weight-semibold);
    color: var(--neutral-700);
}

.plan-bar {
    height: 6px;
    background-color: var(--neutral-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.plan-fill {
    height: 100%;
    transition: width 1s ease-in-out;
}

.plan-starter {
    background: linear-gradient(90deg, var(--success-400), var(--success-500));
}

.plan-professional {
    background: linear-gradient(90deg, var(--primary-400), var(--primary-500));
}

.plan-enterprise {
    background: linear-gradient(90deg, var(--warning-400), var(--warning-500));
}

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

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Dashboard data for export
const dashboardData = @json([
    'stats' => $stats,
    'systemStatus' => $systemStatus,
    'topModules' => $topModules,
    'planDistribution' => $planDistribution,
    'timestamp' => now()->toISOString()
]);

// Initialize performance chart
document.addEventListener('DOMContentLoaded', function() {
    initializePerformanceChart();
});

function initializePerformanceChart() {
    const ctx = document.getElementById('performanceChart').getContext('2d');
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($chartData['labels']),
            datasets: [
                {
                    label: 'Active Users',
                    data: @json($chartData['users']),
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.4
                },
                {
                    label: 'Module Usage',
                    data: @json($chartData['modules']),
                    borderColor: 'rgb(16, 185, 129)',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    tension: 0.4
                },
                {
                    label: 'API Requests',
                    data: @json($chartData['requests']),
                    borderColor: 'rgb(245, 158, 11)',
                    backgroundColor: 'rgba(245, 158, 11, 0.1)',
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    }
                }
            }
        }
    });
}

function updateDashboard(data) {
    // Update statistics
    Object.entries(data.stats).forEach(([key, value]) => {
        const element = document.querySelector(`[data-value="${key}"]`);
        if (element) {
            AdminUtils.animateNumber(element, 0, value, 1000);
        }
    });
    
    AdminUtils.createNotification('success', 'Dashboard updated successfully');
}

function createNewTenant() {
    AdminUtils.openModal('createTenantModal');
}

async function submitTenantForm(event) {
    event.preventDefault();
    
    const form = event.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    if (!AdminUtils.validateForm(form)) {
        return;
    }
    
    AdminUtils.showLoadingState(submitBtn, 'Creating...');
    
    try {
        const formData = new FormData(form);
        const response = await fetch('/api/admin/tenants', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            AdminUtils.createNotification('success', 'Tenant created successfully');
            AdminUtils.closeModal('createTenantModal');
            form.reset();
            
            // Refresh dashboard data
            setTimeout(() => {
                AdminUtils.refreshData('/api/admin/dashboard', updateDashboard);
            }, 1000);
        } else {
            AdminUtils.createNotification('error', result.message || 'Failed to create tenant');
        }
    } catch (error) {
        AdminUtils.createNotification('error', 'An error occurred while creating tenant');
    } finally {
        AdminUtils.hideLoadingState(submitBtn);
    }
}

// Auto-refresh dashboard every 5 minutes
setInterval(() => {
    AdminUtils.refreshData('/api/admin/dashboard', updateDashboard);
}, 300000);
</script>
@endpush