@extends('layouts.app')

@section('title', 'Dashboard')

@section('breadcrumb')
    <span class="font-medium text-gray-900">Dashboard</span>
@endsection

@push('head')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
@endpush

@section('content')
<div class="space-y-6">

    <!-- Saudação -->
    <div>
        <h2 class="text-xl font-semibold text-gray-900">
            Olá, {{ explode(' ', $authUser->name)[0] }}! 👋
        </h2>
        <p class="text-sm text-gray-500 mt-0.5">
            {{ now()->translatedFormat('l, d \d\e F \d\e Y') }}
        </p>
    </div>

    <!-- Cards métricas -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Beneficiários ativos</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">{{ number_format($cards['beneficiarios_ativos']) }}</p>
            <a href="{{ route('beneficiarios.index') }}"
               class="text-xs text-primary hover:underline mt-2 inline-block">Ver todos →</a>
        </div>
        <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Projetos ativos</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">{{ $cards['projetos_em_andamento'] }}</p>
            <a href="{{ route('projetos.index') }}"
               class="text-xs text-primary hover:underline mt-2 inline-block">Ver projetos →</a>
        </div>
        <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Atendimentos no mês</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">{{ number_format($cards['atendimentos_mes']) }}</p>
        </div>
        <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
            <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Atividades esta semana</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">{{ $cards['atividades_semana'] }}</p>
            <a href="{{ route('atividades.index') }}"
               class="text-xs text-primary hover:underline mt-2 inline-block">Ver agenda →</a>
        </div>
    </div>

    @if($duplicatas_pendentes > 0)
    <div class="flex items-center gap-3 rounded-xl bg-amber-light border border-amber/20 px-4 py-3">
        <span class="text-amber text-lg">⚠️</span>
        <p class="text-sm text-amber-dark">
            <strong>{{ $duplicatas_pendentes }}</strong> beneficiário(s) com possível duplicata.
            <a href="{{ route('beneficiarios.index', ['duplicatas' => 1]) }}"
               class="underline font-medium">Verificar agora</a>
        </p>
    </div>
    @endif

    <div class="grid lg:grid-cols-3 gap-6">

        <!-- Gráfico: atendimentos 30 dias -->
        <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
            <h3 class="text-sm font-semibold text-gray-900 mb-4">Atendimentos — últimos 30 dias</h3>
            <canvas id="chartAtendimentos" height="100"></canvas>
        </div>

        <!-- Próximas atividades -->
        <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-sm font-semibold text-gray-900">Próximas atividades</h3>
                <a href="{{ route('atividades.index') }}" class="text-xs text-primary hover:underline">Ver todas</a>
            </div>
            @forelse($proximas_atividades as $atividade)
                <div class="flex items-start gap-3 py-3 border-b border-gray-50 last:border-0">
                    <div class="flex-shrink-0 h-9 w-9 rounded-lg flex items-center justify-center text-sm font-bold text-white"
                         style="background-color: {{ $atividade->projeto->cor ?? '#7F77DD' }}">
                        {{ $atividade->data_hora_inicio->format('d') }}
                    </div>
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-gray-900 truncate">{{ $atividade->nome }}</p>
                        <p class="text-xs text-gray-500">
                            {{ $atividade->data_hora_inicio->format('d/m H:i') }}
                            @if($atividade->local) · {{ $atividade->local }}@endif
                        </p>
                        <p class="text-xs text-primary mt-0.5">{{ $atividade->projeto->nome }}</p>
                    </div>
                </div>
            @empty
                <p class="text-sm text-gray-400 text-center py-6">Nenhuma atividade agendada.</p>
            @endforelse
        </div>
    </div>

    <!-- Últimos beneficiários -->
    <div class="bg-white rounded-2xl border border-gray-100 p-5 shadow-sm">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-semibold text-gray-900">Cadastros recentes</h3>
            <a href="{{ route('beneficiarios.index') }}" class="text-xs text-primary hover:underline">Ver todos</a>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @foreach($ultimos_beneficiarios as $b)
                <a href="{{ route('beneficiarios.show', $b) }}"
                   class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors">
                    <img src="{{ $b->foto_url }}" alt="{{ $b->nome_abreviado }}"
                         class="h-10 w-10 rounded-full object-cover flex-shrink-0">
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-gray-900 truncate">{{ $b->nome_abreviado }}</p>
                        <p class="text-xs text-gray-500">{{ $b->idade }} anos</p>
                    </div>
                    <span class="ml-auto badge-status-{{ $b->status }}">{{ ucfirst($b->status) }}</span>
                </a>
            @endforeach
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
const labels = [];
const data   = [];
const base   = new Date();
base.setDate(base.getDate() - 29);

const raw = @json($grafico_atendimentos);

for (let i = 0; i < 30; i++) {
    const d = new Date(base);
    d.setDate(base.getDate() + i);
    const key = d.toISOString().slice(0, 10);
    labels.push(d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' }));
    data.push(raw[key] ?? 0);
}

new Chart(document.getElementById('chartAtendimentos'), {
    type: 'line',
    data: {
        labels,
        datasets: [{
            label: 'Atendimentos',
            data,
            borderColor: '#7F77DD',
            backgroundColor: 'rgba(127,119,221,0.08)',
            borderWidth: 2,
            pointRadius: 3,
            fill: true,
            tension: 0.3,
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 11 } } },
            y: { beginAtZero: true, ticks: { precision: 0, font: { size: 11 } } },
        }
    }
});
</script>
@endpush