@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid" style="max-width: 1400px; margin: 0 auto;">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 style="color: rgb(1, 15, 27); font-weight: 600; margin-bottom: 4px;">
                <i class="fas fa-tachometer-alt me-2" style="color: rgb(243, 158, 11);"></i>Dashboard
            </h2>
            <p style="color: #64748b; margin-bottom: 0;">Visão geral do sistema e métricas principais</p>
        </div>
        <div class="text-end">
            <small style="color: #6b7280;">Última atualização: {{ now()->format('d/m/Y H:i') }}</small>
        </div>
    </div>

    <!-- Cards Principais -->
    <div class="row g-4 mb-5">
        <!-- Receita Mensal -->
        <div class="col-xl-3 col-md-6">
            <div class="rounded-lg shadow-sm h-100" style="background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);">
                <div class="p-4">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div style="opacity: 0.9; font-size: 14px;">Receita Mensal</div>
                            <div style="font-size: 28px; font-weight: 700; margin: 8px 0;">
                                R$ {{ number_format($monthlyRevenue, 2, ',', '.') }}
                            </div>
                            <div style="font-size: 12px; opacity: 0.8;">
                                <i class="fas fa-{{ $monthlyGrowth >= 0 ? 'arrow-up' : 'arrow-down' }} me-1"></i>
                                {{ abs($monthlyGrowth) }}% vs mês anterior
                            </div>
                        </div>
                        <div style="opacity: 0.3;">
                            <i class="fas fa-dollar-sign" style="font-size: 48px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total de Usuários -->
        <div class="col-xl-3 col-md-6">
            <div class="rounded-lg shadow-sm h-100" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);">
                <div class="p-4">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div style="opacity: 0.9; font-size: 14px;">Total de Usuários</div>
                            <div style="font-size: 28px; font-weight: 700; margin: 8px 0;">
                                {{ number_format($totalUsers) }}
                            </div>
                            <div style="font-size: 12px; opacity: 0.8;">
                                +{{ $newUsersThisMonth }} este mês
                            </div>
                        </div>
                        <div style="opacity: 0.3;">
                            <i class="fas fa-users" style="font-size: 48px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Taxa de Conversão -->
        <div class="col-xl-3 col-md-6">
            <div class="rounded-lg shadow-sm h-100" style="background: linear-gradient(135deg, rgb(243, 158, 11), #d97706); color: white; box-shadow: 0 4px 20px rgba(243, 158, 11, 0.3);">
                <div class="p-4">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div style="opacity: 0.9; font-size: 14px;">Taxa de Conversão</div>
                            <div style="font-size: 28px; font-weight: 700; margin: 8px 0;">
                                {{ $subscriptionRate }}%
                            </div>
                            <div style="font-size: 12px; opacity: 0.8;">
                                {{ $activeSubscriptions }} de {{ $totalUsers }} usuários
                            </div>
                        </div>
                        <div style="opacity: 0.3;">
                            <i class="fas fa-chart-line" style="font-size: 48px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Receita Média por Usuário -->
        <div class="col-xl-3 col-md-6">
            <div class="rounded-lg shadow-sm h-100" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);">
                <div class="p-4">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div style="opacity: 0.9; font-size: 14px;">ARPU Mensal</div>
                            <div style="font-size: 28px; font-weight: 700; margin: 8px 0;">
                                R$ {{ number_format($avgRevenuePerUser, 2, ',', '.') }}
                            </div>
                            <div style="font-size: 12px; opacity: 0.8;">
                                Receita média por usuário
                            </div>
                        </div>
                        <div style="opacity: 0.3;">
                            <i class="fas fa-user-tie" style="font-size: 48px;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <!-- Distribuição de Usuários -->
        <div class="col-lg-4">
            <div class="rounded-lg shadow-sm h-100" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="p-4" style="border-bottom: 1px solid #e2e8f0;">
                    <h6 style="color: #334155; font-weight: 600; margin: 0;">
                        <i class="fas fa-chart-pie me-2"></i>Distribuição de Usuários
                    </h6>
                </div>
                <div class="p-4">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span style="color: #6b7280;">Advogados Individuais</span>
                            <span style="color: #334155; font-weight: 600;">{{ $lawyerUsers }}</span>
                        </div>
                        <div class="progress" style="height: 8px; background-color: #f1f5f9;">
                            <div class="progress-bar" style="background-color: #10b981; width: {{ $totalUsers > 0 ? ($lawyerUsers / $totalUsers) * 100 : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span style="color: #6b7280;">Escritórios/Empresas</span>
                            <span style="color: #334155; font-weight: 600;">{{ $firmUsers }}</span>
                        </div>
                        <div class="progress" style="height: 8px; background-color: #f1f5f9;">
                            <div class="progress-bar" style="background-color: #3b82f6; width: {{ $totalUsers > 0 ? ($firmUsers / $totalUsers) * 100 : 0 }}%;"></div>
                        </div>
                    </div>
                    <div class="mt-4 pt-3" style="border-top: 1px solid #e2e8f0;">
                        <div class="text-center">
                            <span style="color: #6b7280; font-size: 14px;">Total: {{ $totalUsers }} usuários</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Métricas de Cartões -->
        <div class="col-lg-4">
            <div class="rounded-lg shadow-sm h-100" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="p-4" style="border-bottom: 1px solid #e2e8f0;">
                    <h6 style="color: #334155; font-weight: 600; margin: 0;">
                        <i class="fas fa-address-card me-2"></i>Estatísticas de Cartões
                    </h6>
                </div>
                <div class="p-4">
                    <div class="row g-3 text-center">
                        <div class="col-6">
                            <div style="color: #334155; font-size: 24px; font-weight: 700;">{{ $totalCards }}</div>
                            <div style="color: #6b7280; font-size: 14px;">Total de Cartões</div>
                        </div>
                        <div class="col-6">
                            <div style="color: #10b981; font-size: 24px; font-weight: 700;">{{ $cardsWithLinks }}</div>
                            <div style="color: #6b7280; font-size: 14px;">Com Links Ativos</div>
                        </div>
                        <div class="col-12">
                            <div class="mt-3 pt-3" style="border-top: 1px solid #e2e8f0;">
                                <div style="color: #334155; font-size: 20px; font-weight: 600;">{{ $avgLinksPerCard }}</div>
                                <div style="color: #6b7280; font-size: 14px;">Média de Links por Cartão</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alertas -->
        <div class="col-lg-4">
            <div class="rounded-lg shadow-sm h-100" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="p-4" style="border-bottom: 1px solid #e2e8f0;">
                    <h6 style="color: #334155; font-weight: 600; margin: 0;">
                        <i class="fas fa-exclamation-triangle me-2"></i>Alertas & Atenção
                    </h6>
                </div>
                <div class="p-4">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span style="color: #ef4444; font-size: 14px;">
                                <i class="fas fa-credit-card me-1"></i>Pagamentos Falharam (7d)
                            </span>
                            <span class="badge" style="background-color: #fef2f2; color: #dc2626;">{{ $failedPaymentsWeek }}</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span style="color: #f59e0b; font-size: 14px;">
                                <i class="fas fa-clock me-1"></i>Assinaturas Expirando (7d)
                            </span>
                            <span class="badge" style="background-color: #fffbeb; color: #d97706;">{{ $expiredSubscriptions }}</span>
                        </div>
                    </div>
                    <div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span style="color: #6b7280; font-size: 14px;">
                                <i class="fas fa-user-slash me-1"></i>Usuários Inativos (30d)
                            </span>
                            <span class="badge" style="background-color: #f8fafc; color: #64748b;">{{ $inactiveUsersMonth }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Planos e Cartões Populares -->
    <div class="row g-4 mb-5">
        <!-- Top Planos -->
        <div class="col-lg-6">
            <div class="rounded-lg shadow-sm" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="p-4" style="border-bottom: 1px solid #e2e8f0;">
                    <h6 style="color: #334155; font-weight: 600; margin: 0;">
                        <i class="fas fa-star me-2"></i>Planos Mais Populares
                    </h6>
                </div>
                <div class="p-4">
                    @if($topPlans->count() > 0)
                        @foreach($topPlans as $plan)
                        <div class="d-flex justify-content-between align-items-center {{ !$loop->last ? 'mb-3 pb-3' : '' }}" @if(!$loop->last) style="border-bottom: 1px solid #f1f5f9;" @endif>
                            <div>
                                <div style="color: #334155; font-weight: 600;">{{ $plan->name }}</div>
                                <div style="color: #6b7280; font-size: 14px;">
                                    <span class="badge px-2 py-1" style="background-color: {{ $plan->user_type == 'Lawyer' ? '#dcfce7' : '#dbeafe' }}; color: {{ $plan->user_type == 'Lawyer' ? '#166534' : '#1e40af' }}; font-size: 12px;">
                                        {{ $plan->user_type == 'Lawyer' ? 'Individual' : 'Empresa' }}
                                    </span>
                                </div>
                            </div>
                            <div class="text-end">
                                <div style="color: #334155; font-weight: 700; font-size: 18px;">{{ $plan->total_subscriptions }}</div>
                                <div style="color: #6b7280; font-size: 12px;">assinaturas</div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-3">
                            <i class="fas fa-inbox fa-2x mb-3" style="color: #d1d5db;"></i>
                            <p style="color: #6b7280; margin: 0;">Nenhuma assinatura registrada ainda</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Cartões Mais Visualizados -->
        <div class="col-lg-6">
            <div class="rounded-lg shadow-sm" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="p-4" style="border-bottom: 1px solid #e2e8f0;">
                    <h6 style="color: #334155; font-weight: 600; margin: 0;">
                        <i class="fas fa-eye me-2"></i>Cartões Mais Visualizados (Este Mês)
                    </h6>
                </div>
                <div class="p-4">
                    @if($topCards->count() > 0)
                        @foreach($topCards as $card)
                        <div class="d-flex justify-content-between align-items-center {{ !$loop->last ? 'mb-3 pb-3' : '' }}" @if(!$loop->last) style="border-bottom: 1px solid #f1f5f9;" @endif>
                            <div>
                                <div style="color: #334155; font-weight: 600;">{{ Str::limit($card->title, 20) }}</div>
                                <div style="color: #6b7280; font-size: 14px;">{{ $card->user_name }}</div>
                            </div>
                            <div class="text-end">
                                <div style="color: #334155; font-weight: 700; font-size: 18px;">{{ $card->views }}</div>
                                <div style="color: #6b7280; font-size: 12px;">visualizações</div>
                            </div>
                        </div>
                        @endforeach
                    @else
                        <div class="text-center py-3">
                            <i class="fas fa-chart-line fa-2x mb-3" style="color: #d1d5db;"></i>
                            <p style="color: #6b7280; margin: 0;">Nenhuma visualização registrada este mês</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Sistema Info -->
    <div class="row g-4">
        <div class="col-12">
            <div class="rounded-lg shadow-sm" style="background-color: white; border: 1px solid #e2e8f0;">
                <div class="p-4" style="border-bottom: 1px solid #e2e8f0;">
                    <h6 style="color: #334155; font-weight: 600; margin: 0;">
                        <i class="fas fa-cogs me-2"></i>Informações do Sistema
                    </h6>
                </div>
                <div class="p-4">
                    <div class="row g-4 text-center">
                        <div class="col-md-3">
                            <div style="color: #334155; font-size: 24px; font-weight: 700;">{{ $plansCount }}</div>
                            <div style="color: #6b7280; font-size: 14px;">Planos Cadastrados</div>
                        </div>
                        <div class="col-md-3">
                            <div style="color: #334155; font-size: 24px; font-weight: 700;">{{ $activeColors }}</div>
                            <div style="color: #6b7280; font-size: 14px;">Cores Ativas</div>
                        </div>
                        <div class="col-md-3">
                            <div style="color: #334155; font-size: 24px; font-weight: 700;">{{ $totalColors }}</div>
                            <div style="color: #6b7280; font-size: 14px;">Total de Cores</div>
                        </div>
                        <div class="col-md-3">
                            <div style="color: #334155; font-size: 24px; font-weight: 700;">{{ now()->format('d/m/Y') }}</div>
                            <div style="color: #6b7280; font-size: 14px;">Data Atual</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection