@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">Bem-vindo ao</p>
                <h1 class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">Painel Escolar</h1>
                <p class="mt-2 max-w-2xl text-sm text-gray-600 dark:text-gray-400">
                    Acompanhe matrículas, frequência e desempenho em um só lugar. Configure os dados do município e avance nas etapas de implantação.
                </p>
            </div>
            <div class="flex flex-wrap gap-3">
                <a href="{{ url('matriculas') }}" class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600">
                    <span class="h-2 w-2 rounded-full bg-white"></span>
                    Nova matrícula
                </a>
                <a href="{{ url('escolas') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-300 dark:border-gray-800 dark:text-gray-300">
                    Cadastrar escola
                </a>
                <a href="{{ url('calendario') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-300 dark:border-gray-800 dark:text-gray-300">
                    Calendário letivo
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Alunos ativos</p>
            <div class="mt-3 flex items-end justify-between">
                <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($metrics['students']) }}</h3>
                <span class="rounded-full bg-success-50 px-2 py-1 text-xs font-medium text-success-700">Atualizado</span>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Turmas ativas</p>
            <div class="mt-3 flex items-end justify-between">
                <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($metrics['classrooms']) }}</h3>
                <span class="rounded-full bg-blue-light-50 px-2 py-1 text-xs font-medium text-blue-light-700">Em operação</span>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Matrículas</p>
            <div class="mt-3 flex items-end justify-between">
                <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($metrics['enrollments']) }}</h3>
                <span class="rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 dark:bg-white/10 dark:text-gray-300">Atualizado hoje</span>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Professores</p>
            <div class="mt-3 flex items-end justify-between">
                <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($metrics['teachers']) }}</h3>
                <span class="rounded-full bg-blue-light-50 px-2 py-1 text-xs font-medium text-blue-light-700">Em atividade</span>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Alertas de estoque</p>
            <div class="mt-3 flex items-end justify-between">
                <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($alerts['low_stock'] ?? 0) }}</h3>
                <a href="{{ route('relatorios.alertas-estoque') }}" class="text-xs font-medium text-error-600">Ver detalhes</a>
            </div>
        </div>
        <div class="rounded-2xl border border-gray-200 bg-white p-5 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
            <p class="text-sm text-gray-500 dark:text-gray-400">Alertas de frequência</p>
            <div class="mt-3 flex items-end justify-between">
                <h3 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ number_format($alerts['low_frequency'] ?? 0) }}</h3>
                <a href="{{ route('relatorios.alertas-frequencia') }}" class="text-xs font-medium text-error-600">Ver detalhes</a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
        <x-common.component-card title="Etapas de implantação" desc="Siga o roteiro para colocar o sistema em operação.">
            <div class="space-y-3">
                <div class="flex items-start gap-3 rounded-lg border border-gray-100 p-3 dark:border-gray-800">
                    <div class="mt-1 h-2 w-2 rounded-full bg-brand-500"></div>
                    <div>
                        <p class="text-sm font-medium text-gray-800 dark:text-white/90">1. Cadastro institucional</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Dados da prefeitura, escolas, segmentos e calendários.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 rounded-lg border border-gray-100 p-3 dark:border-gray-800">
                    <div class="mt-1 h-2 w-2 rounded-full bg-brand-300"></div>
                    <div>
                        <p class="text-sm font-medium text-gray-800 dark:text-white/90">2. Pessoas e turmas</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Alunos, professores, turmas e matrículas iniciais.</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 rounded-lg border border-gray-100 p-3 dark:border-gray-800">
                    <div class="mt-1 h-2 w-2 rounded-full bg-gray-300"></div>
                    <div>
                        <p class="text-sm font-medium text-gray-800 dark:text-white/90">3. Diário e avaliações</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Frequência, avaliações, boletins e relatórios oficiais.</p>
                    </div>
                </div>
            </div>
        </x-common.component-card>

        <x-common.component-card title="Alertas do dia" desc="Foque nos pontos críticos do período.">
            <div class="space-y-3">
                <div class="flex items-center justify-between rounded-lg bg-warning-50 px-3 py-2 text-sm text-warning-700">
                    <span>8 alunos com baixa frequência</span>
                    <a class="font-medium" href="{{ url('frequencia') }}">Ver lista</a>
                </div>
                <div class="flex items-center justify-between rounded-lg bg-error-50 px-3 py-2 text-sm text-error-700">
                    <span>3 turmas sem professor definido</span>
                    <a class="font-medium" href="{{ url('turmas') }}">Ajustar</a>
                </div>
                <div class="flex items-center justify-between rounded-lg bg-blue-light-50 px-3 py-2 text-sm text-blue-light-700">
                    <span>Calendário letivo pendente</span>
                    <a class="font-medium" href="{{ url('calendario') }}">Configurar</a>
                </div>
            </div>
        </x-common.component-card>

        <x-common.component-card title="Atalhos" desc="Ações rápidas para o dia a dia.">
            <div class="grid grid-cols-2 gap-3 text-sm">
                <a href="{{ url('alunos') }}" class="rounded-lg border border-gray-100 px-3 py-2 text-gray-700 hover:border-gray-200 dark:border-gray-800 dark:text-gray-300">Cadastrar aluno</a>
                <a href="{{ url('professores') }}" class="rounded-lg border border-gray-100 px-3 py-2 text-gray-700 hover:border-gray-200 dark:border-gray-800 dark:text-gray-300">Cadastrar professor</a>
                <a href="{{ url('transporte') }}" class="rounded-lg border border-gray-100 px-3 py-2 text-gray-700 hover:border-gray-200 dark:border-gray-800 dark:text-gray-300">Transporte</a>
                <a href="{{ url('biblioteca') }}" class="rounded-lg border border-gray-100 px-3 py-2 text-gray-700 hover:border-gray-200 dark:border-gray-800 dark:text-gray-300">Biblioteca</a>
            </div>
        </x-common.component-card>
    </div>
</div>
@endsection