@extends('layouts.admin', ['title' => 'Dashboard administrativo', 'subtitle' => 'Visão geral da loja '.$store->name])

@section('content')
@php
    $money = fn (float|int|null $value): string => 'R$ '.number_format((float) $value, 2, ',', '.');
    $latestOrders = collect($latestOrders ?? []);
    $paidCount = $latestOrders->filter(fn ($order): bool => (string) data_get($order, 'status.value', data_get($order, 'status')) === 'paid')->count();
    $ordersWithInfluencer = $latestOrders->filter(fn ($order): bool => filled(data_get($order, 'influencer.name')))->count();
@endphp

<div class="space-y-6 lg:space-y-8">
    <section class="orvox-admin-slide-up overflow-hidden rounded-[2rem] bg-slate-950 text-white shadow-2xl shadow-slate-950/20">
        <div class="relative grid gap-8 p-6 sm:p-8 lg:grid-cols-[1.15fr_.85fr] lg:p-10">
            <div class="absolute inset-0 bg-[radial-gradient(circle_at_18%_18%,rgba(251,191,36,.28),transparent_30%),radial-gradient(circle_at_85%_12%,rgba(255,255,255,.12),transparent_30%),linear-gradient(135deg,rgba(255,255,255,.08),transparent_46%)]"></div>

            <div class="relative z-10">
                <div class="mb-5 flex flex-wrap items-center gap-3">
                    <span class="rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-black uppercase tracking-[0.2em] text-amber-100">
                        {{ now()->format('m/Y') }}
                    </span>
                    <span class="rounded-full border border-amber-300/30 bg-amber-300/15 px-4 py-2 text-xs font-black uppercase tracking-[0.2em] text-amber-100">
                        Loja {{ $store->name }}
                    </span>
                </div>

                <p class="text-sm font-semibold text-amber-100/90">Olá, {{ auth()->user()?->name ?? 'Admin' }} 👋</p>
                <h1 class="mt-2 max-w-3xl text-3xl font-black tracking-tight sm:text-5xl">
                    Controle a operação com mais clareza e menos cara de sistema antigo.
                </h1>
                <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-300 sm:text-base">
                    Acompanhe influenciadores, pedidos, comissões, fechamentos e conciliações em um painel mais visual, rápido e gostoso de usar.
                </p>

                <div class="mt-8 grid gap-3 sm:grid-cols-3">
                    <div class="rounded-3xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                        <p class="text-xs font-bold uppercase tracking-wide text-slate-300">Últimos pedidos</p>
                        <p class="mt-2 text-2xl font-black">{{ $latestOrders->count() }}</p>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                        <p class="text-xs font-bold uppercase tracking-wide text-slate-300">Com influencer</p>
                        <p class="mt-2 text-2xl font-black">{{ $ordersWithInfluencer }}</p>
                    </div>
                    <div class="rounded-3xl border border-white/10 bg-white/10 p-4 backdrop-blur">
                        <p class="text-xs font-bold uppercase tracking-wide text-slate-300">Pagos recentes</p>
                        <p class="mt-2 text-2xl font-black">{{ $paidCount }}</p>
                    </div>
                </div>
            </div>

            <div class="relative z-10 flex items-center justify-center">
                <div class="orvox-admin-float relative h-64 w-full max-w-sm">
                    <div class="orvox-admin-glow absolute inset-8 rounded-full bg-amber-300/30 blur-3xl"></div>
                    <svg viewBox="0 0 420 320" class="relative h-full w-full drop-shadow-2xl" role="img" aria-label="Ilustração administrativa de performance">
                        <defs>
                            <linearGradient id="adminGold" x1="0" x2="1" y1="0" y2="1">
                                <stop offset="0%" stop-color="#fde68a" />
                                <stop offset="55%" stop-color="#f59e0b" />
                                <stop offset="100%" stop-color="#fb923c" />
                            </linearGradient>
                            <linearGradient id="adminDark" x1="0" x2="1" y1="0" y2="1">
                                <stop offset="0%" stop-color="#334155" />
                                <stop offset="100%" stop-color="#020617" />
                            </linearGradient>
                        </defs>
                        <circle cx="210" cy="160" r="118" fill="rgba(255,255,255,.08)" />
                        <rect x="108" y="78" width="204" height="154" rx="28" fill="url(#adminDark)" opacity=".98" />
                        <rect x="132" y="108" width="46" height="88" rx="12" fill="url(#adminGold)" />
                        <rect x="190" y="132" width="46" height="64" rx="12" fill="#f97316" />
                        <rect x="248" y="96" width="46" height="100" rx="12" fill="#f8fafc" />
                        <path d="M132 214h162" stroke="#f8fafc" stroke-width="10" stroke-linecap="round" opacity=".9" />
                        <circle cx="92" cy="102" r="14" fill="#fde68a" />
                        <circle cx="326" cy="88" r="10" fill="#fdba74" />
                        <circle cx="318" cy="238" r="16" fill="#fbbf24" opacity=".9" />
                        <path d="M78 224c22-10 42-10 64 0" stroke="#fef3c7" stroke-width="8" stroke-linecap="round" opacity=".85" />
                        <path d="M282 220c20-18 42-26 64-24" stroke="#fed7aa" stroke-width="8" stroke-linecap="round" opacity=".82" />
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <livewire:admin.dashboard-stats />

    <section class="grid gap-6 lg:grid-cols-[.9fr_1.1fr]">
        <div class="orvox-admin-slide-up rounded-[2rem] border border-white/70 bg-white/80 p-6 shadow-xl shadow-slate-950/5 backdrop-blur">
            <div class="mb-6 flex items-start justify-between gap-4">
                <div>
                    <p class="text-xs font-black uppercase tracking-[0.22em] text-amber-700">Ações rápidas</p>
                    <h2 class="mt-2 text-xl font-black text-slate-950">Rotina da operação</h2>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Atalhos para as telas que você mais vai usar no dia a dia.</p>
                </div>
                <span class="rounded-full bg-slate-950 px-4 py-2 text-xs font-black text-white">admin</span>
            </div>

            <div class="grid gap-3 sm:grid-cols-2">
                @if (\Illuminate\Support\Facades\Route::has('admin.influencers.index'))
                    <a href="{{ route('admin.influencers.index') }}" class="group rounded-3xl border border-slate-200 bg-slate-50 p-5 transition hover:-translate-y-1 hover:bg-white hover:shadow-xl hover:shadow-slate-950/5">
                        <span class="text-2xl">✨</span>
                        <p class="mt-3 font-black text-slate-950">Influenciadores</p>
                        <p class="mt-1 text-sm text-slate-500">Cadastrar, editar e acompanhar creators.</p>
                    </a>
                @endif

                @if (\Illuminate\Support\Facades\Route::has('admin.settlements.index'))
                    <a href="{{ route('admin.settlements.index') }}" class="group rounded-3xl border border-slate-200 bg-slate-50 p-5 transition hover:-translate-y-1 hover:bg-white hover:shadow-xl hover:shadow-slate-950/5">
                        <span class="text-2xl">📦</span>
                        <p class="mt-3 font-black text-slate-950">Fechamentos</p>
                        <p class="mt-1 text-sm text-slate-500">Gerar período, validar e pagar comissões.</p>
                    </a>
                @endif

                @if (\Illuminate\Support\Facades\Route::has('admin.reports.external-sales-reconciliation.index'))
                    <a href="{{ route('admin.reports.external-sales-reconciliation.index') }}" class="group rounded-3xl border border-slate-200 bg-slate-50 p-5 transition hover:-translate-y-1 hover:bg-white hover:shadow-xl hover:shadow-slate-950/5">
                        <span class="text-2xl">🧾</span>
                        <p class="mt-3 font-black text-slate-950">Conciliação</p>
                        <p class="mt-1 text-sm text-slate-500">Comparar player externo com Orvox.</p>
                    </a>
                @endif

                @if (\Illuminate\Support\Facades\Route::has('admin.integrations.index'))
                    <a href="{{ route('admin.integrations.index') }}" class="group rounded-3xl border border-slate-200 bg-slate-50 p-5 transition hover:-translate-y-1 hover:bg-white hover:shadow-xl hover:shadow-slate-950/5">
                        <span class="text-2xl">🔌</span>
                        <p class="mt-3 font-black text-slate-950">Integrações</p>
                        <p class="mt-1 text-sm text-slate-500">Conferir conexão com o player.</p>
                    </a>
                @endif
            </div>
        </div>

        <div class="orvox-admin-slide-up rounded-[2rem] border border-white/70 bg-white/80 p-6 shadow-xl shadow-slate-950/5 backdrop-blur">
            <div class="mb-6 flex items-start justify-between gap-4">
                <div>
                    <p class="text-xs font-black uppercase tracking-[0.22em] text-orange-700">Operação</p>
                    <h2 class="mt-2 text-xl font-black text-slate-950">Checklist saudável</h2>
                    <p class="mt-2 text-sm leading-6 text-slate-500">Uma visão simples do que precisa estar sempre em dia.</p>
                </div>
                <span class="rounded-full bg-orange-100 px-4 py-2 text-xs font-black text-orange-800">MVP</span>
            </div>

            <div class="space-y-3">
                @foreach ([
                    ['Conferir webhooks/importações', 'Garanta que pedidos pagos, cancelados e reembolsados estão sincronizando.'],
                    ['Rodar conciliação externa', 'Compare Nuvemshop ou outro player futuro com o banco local.'],
                    ['Validar fechamentos', 'Antes de pagar, revise estornos, cancelamentos e ajustes manuais.'],
                    ['Acompanhar creators', 'Olhe quem vende mais, quem está parado e quem precisa de campanha.'],
                ] as [$title, $description])
                    <div class="flex gap-4 rounded-3xl border border-slate-200 bg-slate-50 p-4">
                        <span class="mt-1 grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-emerald-100 text-sm font-black text-emerald-700">✓</span>
                        <div>
                            <p class="font-black text-slate-950">{{ $title }}</p>
                            <p class="mt-1 text-sm leading-6 text-slate-500">{{ $description }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="orvox-admin-slide-up rounded-[2rem] border border-white/70 bg-white/80 p-6 shadow-xl shadow-slate-950/5 backdrop-blur">
        <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.22em] text-slate-500">Pedidos</p>
                <h2 class="mt-2 text-xl font-black text-slate-950">Últimos pedidos</h2>
            </div>

            @if (\Illuminate\Support\Facades\Route::has('admin.orders.index'))
                <a href="{{ route('admin.orders.index') }}" class="inline-flex items-center justify-center rounded-2xl bg-slate-950 px-4 py-2 text-sm font-black text-white shadow-lg shadow-slate-950/10 transition hover:-translate-y-0.5 hover:bg-slate-800">
                    Ver todos
                </a>
            @endif
        </div>

        <div class="overflow-hidden rounded-[1.5rem] border border-slate-200 bg-white">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-5 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Pedido</th>
                            <th class="px-5 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Influencer</th>
                            <th class="px-5 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Status</th>
                            <th class="px-5 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Base</th>
                            <th class="px-5 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Comissão</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($latestOrders as $order)
                            <tr class="transition hover:bg-amber-50/50">
                                <td class="whitespace-nowrap px-5 py-4 text-sm font-black text-slate-950">#{{ $order->order_number }}</td>
                                <td class="whitespace-nowrap px-5 py-4 text-sm font-semibold text-slate-700">{{ $order->influencer?->name ?? '—' }}</td>
                                <td class="whitespace-nowrap px-5 py-4">
                                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-black text-slate-700">
                                        {{ $order->status->label() }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-5 py-4 text-sm font-semibold text-slate-700">{{ $money($order->commission_base_amount) }}</td>
                                <td class="whitespace-nowrap px-5 py-4 text-sm font-black text-slate-950">{{ $money($order->commission?->commission_amount ?? 0) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-5 py-10 text-center text-sm text-slate-500">
                                    Nenhum pedido recente encontrado. Assim que a integração sincronizar pedidos, eles aparecem aqui.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</div>
@endsection