@extends('layouts.app')

@section('content')

<div class="space-y-8">
    <!-- Cabeçalho -->
    <div>
        <h1 class="text-3xl font-bold text-gray-800">Dashboard</h1>
        <p class="text-gray-500">Bem-vindo de volta!</p>
    </div>

    <!-- GRID DE 9 BOXES (INDICADORES) -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6" style="padding-bottom: 10%">
        
        <div class="bg-gray-50 p-6 rounded-[32px] shadow-sm border border-gray-100 flex flex-col gap-4">
            <div class="flex items-center gap-4">
                <!-- Ícone Roxo -->
                <div class="bg-purple-100 p-4 rounded-2xl text-nubank">
                    <i data-lucide="briefcase" class="w-8 h-8"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 font-medium">Projetos</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $totalProjetos }}</p>
                </div>
            </div>

            <!-- Barra de Progresso Estilo Nubank (Roxa) -->
            <div class="space-y-2">
                <div class="flex justify-between items-center text-xs font-bold uppercase tracking-wider text-gray-400">
                    <span>Progresso das Tarefas</span>
                    <span class="text-nubank">{{ $porcentagemGlobal }}%</span>
                </div>
                <div class="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
                    <div 
                        class="bg-nubank h-full rounded-full transition-all duration-1000 ease-out shadow-[0_0_8px_rgba(130,10,209,0.3)]" 
                        style="width: {{ $porcentagemGlobal }}%"
                    ></div>
                </div>
                <p class="text-[10px] text-gray-400 italic">
                    *Considerando tarefas com data de encerramento preenchida.
                </p>
            </div>
        </div>

        <div class="bg-gray-50 p-6 rounded-[32px] shadow-sm border border-gray-100 flex flex-col gap-4">
            <div class="flex items-center gap-4">
                <div class="bg-red-100 p-4 rounded-2xl text-red-600">
                    <i data-lucide="alert-circle" class="w-8 h-8"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 font-medium">Projetos em Atraso</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $projetosAtrasados }}</p>
                </div>
            </div>

            <!-- Barra de Alerta de Atraso -->
            <div class="space-y-2">
                <div class="flex justify-between items-center text-xs font-bold uppercase tracking-wider text-gray-400">
                    <span>Índice de Atraso</span>
                    <span class="text-red-600">{{ $porcentagemAtraso }}%</span>
                </div>
                <div class="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
                    <div 
                        class="bg-red-500 h-full rounded-full transition-all duration-1000 ease-out shadow-[0_0_8px_rgba(239,68,68,0.4)]" 
                        style="width: {{ $porcentagemAtraso }}%"
                    ></div>
                </div>
                <p class="text-[10px] text-gray-400 italic">
                    *Projetos com data vencida e tarefas pendentes.
                </p>
            </div>
        </div>

        <div class="bg-gray-50 p-6 rounded-[32px] shadow-sm border border-gray-100 flex flex-col gap-4">
            <div class="flex items-center gap-4">
                <!-- Ícone Verde -->
                <div class="bg-green-100 p-4 rounded-2xl text-green-600">
                    <i data-lucide="check-circle" class="w-8 h-8"></i>
                </div>
                <div>
                    <p class="text-sm text-gray-500 font-medium">Projetos Concluídos</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $projetosConcluidos }}</p>
                </div>
            </div>

            <!-- Barra de Progresso Verde -->
            <div class="space-y-2">
                <div class="flex justify-between items-center text-xs font-bold uppercase tracking-wider text-gray-400">
                    <span>Taxa de Entrega</span>
                    <span class="text-green-600 font-bold">{{ $porcentagemConcluidos }}%</span>
                </div>
                <div class="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
                    <div 
                        class="bg-green-500 h-full rounded-full transition-all duration-1000 ease-out shadow-[0_0_8px_rgba(34,197,94,0.3)]" 
                        style="width: {{ $porcentagemConcluidos }}%"
                    ></div>
                </div>
                <p class="text-[10px] text-gray-400 italic">
                    *Projetos com todas as tarefas finalizadas.
                </p>
            </div>
        </div>

        <div class="bg-gray-50 p-6 rounded-[32px] shadow-sm border border-gray-100 flex flex-col h-full">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-4">
                    <div class="bg-purple-100 p-3 rounded-2xl text-nubank">
                        <i data-lucide="calendar-clock" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Tarefas da Semana</p>
                        <p class="text-xl font-bold text-gray-800">{{ $totalAbertasSemana }} abertas</p>
                    </div>
                </div>
            </div>

            <!-- Lista de Tarefas -->
            <div class="space-y-4 flex-1">
                @forelse($tarefasSemana as $tarefa)
                    <div class="flex items-center justify-between group">
                        <div class="flex flex-col">
                            <!-- Título da Tarefa em Roxo -->
                            <a href="{{ route('tarefas.edit', $tarefa->id) }}" class="text-sm font-bold text-nubank hover:underline decoration-2 underline-offset-4 transition">
                                {{ $tarefa->nome }}
                            </a>
                            <!-- Data em cinza menor -->
                            <span class="text-[11px] text-gray-400 font-medium lowercase tracking-wider">
                                {{ \Carbon\Carbon::parse($tarefa->data)->translatedFormat('d \d\e M') }} 
                                • {{ $tarefa->projeto->nome }}
                            </span>
                        </div>
                        <div class="text-gray-300 group-hover:text-nubank transition">
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </div>
                    </div>
                @empty
                    <div class="flex flex-col items-center justify-center py-6 text-center">
                        <i data-lucide="check-circle-2" class="w-10 h-10 text-green-200 mb-2"></i>
                        <p class="text-xs text-gray-400">Tudo em dia para esta semana!</p>
                    </div>
                @endforelse
            </div>
            
            @if($totalAbertasSemana > 0)
                <div class="mt-4 pt-4 border-t border-gray-50 text-center">
                    <a href="{{ route('tarefas.index') }}" class="text-xs font-bold text-gray-400 hover:text-nubank transition uppercase tracking-widest">
                        Ver todas as tarefas
                    </a>
                </div>
            @endif
        </div>

        <div class="bg-gray-50 p-6 rounded-[32px] shadow-sm border border-gray-100 flex flex-col h-full">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-4">
                    <div class="bg-purple-100 p-3 rounded-2xl text-nubank">
                        <i data-lucide="activity" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Projetos em Andamento</p>
                        <p class="text-xl font-bold text-gray-800">{{ $projetosMonitoramento->count() }} ativos</p>
                    </div>
                </div>
            </div>

            <!-- Lista de Projetos e Tarefas -->
            <div class="space-y-4 flex-1">
                @forelse($projetosMonitoramento as $projeto)
                    <div class="p-4 rounded-2xl border border-gray-50 bg-gray-50/50 group hover:border-purple-100 transition-all">
                        <div class="flex justify-between items-start mb-3">
                            <a href="{{ route('projetos.edit', $projeto->id) }}" class="text-sm font-bold text-gray-800 hover:text-nubank transition">
                                {{ $projeto->nome }}
                            </a>
                            <i data-lucide="arrow-up-right" class="w-4 h-4 text-gray-300 group-hover:text-nubank"></i>
                        </div>
                        
                        <div class="flex gap-4">
                            <!-- Feitas -->
                            <div class="flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-green-500"></span>
                                <span class="text-[11px] font-bold text-gray-500 uppercase">
                                    {{ $projeto->total_feitas }} Feitas
                                </span>
                            </div>
                            <!-- Pendentes -->
                            <div class="flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-orange-400"></span>
                                <span class="text-[11px] font-bold text-gray-500 uppercase">
                                    {{ $projeto->total_pendentes }} Pendentes
                                </span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="flex flex-col items-center justify-center py-10 text-center">
                        <i data-lucide="coffee" class="w-10 h-10 text-gray-200 mb-2"></i>
                        <p class="text-xs text-gray-400">Nenhum projeto em andamento no momento.</p>
                    </div>
                @endforelse
            </div>
        </div>

        <div class="bg-nubank p-6 rounded-[32px] shadow-lg border border-purple-400/20 flex flex-col h-full text-white" 
            x-data="{ mostrarSaldo: true }">
            
            <!-- Topo do Card: Ícone e Olho -->
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-4">
                    <div class="bg-white/20 p-3 rounded-2xl text-white">
                        <i data-lucide="wallet" class="w-6 h-6"></i>
                    </div>
                    <div>
                        <p class="text-sm text-purple-100 font-medium opacity-80">Saldo do mês</p>
                        <div>
                            <!-- Saldo Real -->
                            <p x-show="mostrarSaldo" class="text-xl font-bold text-white tracking-tight">
                                R$ {{ number_format($saldoMes, 2, ',', '.') }}
                            </p>
                            <!-- Blur quando oculto -->
                            <div x-show="!mostrarSaldo" x-cloak class="h-6 w-32 bg-white/20 rounded-lg animate-pulse mt-1"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Botão de Toggle (Olho) -->
                <button @click="mostrarSaldo = !mostrarSaldo" class="p-2 hover:bg-white/10 rounded-full transition-colors outline-none">
                    <i :data-lucide="mostrarSaldo ? 'eye' : 'eye-off'" class="w-5 h-5 text-white"></i>
                </button>
            </div>

            <!-- Conteúdo Extra: Extrato de Tarefas -->
            <div class="space-y-3 flex-1">
                @forelse($ultimosRecebimentos as $recebimento)
                    <div class="p-4 rounded-2xl border border-white/10 bg-white/5 group hover:bg-white/10 transition-all cursor-pointer">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-[10px] font-bold text-purple-200 uppercase tracking-wider opacity-70">
                                    Finalizada em {{ \Carbon\Carbon::parse($recebimento->dataFim)->format('d/m/y') }}
                                </p>
                                <p class="text-sm font-bold text-white mt-1">
                                    {{ $recebimento->nome }}: 
                                    <span class="font-normal opacity-90" x-show="mostrarSaldo">R$ {{ number_format($recebimento->valor, 2, ',', '.') }}</span>
                                    <span class="font-normal opacity-90" x-show="!mostrarSaldo">••••</span>
                                </p>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-white/40 group-hover:text-white"></i>
                        </div>
                    </div>
                @empty
                    <div class="py-10 text-center opacity-40">
                        <p class="text-xs">Nenhum recebimento este mês.</p>
                    </div>
                @endforelse
            </div>
        </div>


        <script>
            function toggleSaldoBox() {
                const valor = document.getElementById('box-saldo-valor');
                const oculto = document.getElementById('box-saldo-oculto');
                const iconContainer = document.getElementById('box-eye-icon');
                
                const isHidden = valor.classList.toggle('hidden');
                oculto.classList.toggle('hidden');

                const iconName = isHidden ? 'eye-off' : 'eye';
                iconContainer.innerHTML = `<i data-lucide="${iconName}" class="w-5 h-5 text-white"></i>`;
                
                if (window.lucide) {
                    lucide.createIcons();
                }
            }
        </script>

    </div>
</div>
@endsection