@extends('layouts.influencer', ['title' => 'Dashboard'])

@section('content')
@php
    $money = fn (float|int|null $value): string => 'R$ '.number_format((float) $value, 2, ',', '.');
    $number = fn (float|int|null $value): string => number_format((float) $value, 0, ',', '.');
    $dailySales = collect($metrics['daily_sales'] ?? []);
    $hourlyUses = collect($metrics['hourly_uses'] ?? []);
    $maxDailySale = max(1, (float) $dailySales->max());
    $maxHourlyUse = max(1, (float) $hourlyUses->max());
    $couponCode = $influencer->activeCoupon?->coupon_code_original ?? 'sem cupom ativo';
    $progressPercent = (int) data_get($progress ?? [], 'percent_to_next', 0);
    $nextRule = data_get($progress ?? [], 'next_rule');
    $currentRule = data_get($progress ?? [], 'current_rule');
@endphp

<div class="space-y-6 lg:space-y-8">
    <section class="orvox-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.25fr_.75fr] lg:p-10">
            <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(251,191,36,.26),transparent_32%),radial-gradient(circle_at_82%_10%,rgba(255,255,255,.15),transparent_28%),linear-gradient(135deg,rgba(255,255,255,.08),transparent_45%)]"></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">
                        Cupom {{ $couponCode }}
                    </span>
                </div>

                <p class="text-sm font-semibold text-amber-100/90">Olá, {{ $influencer->name }} 👋</p>
                <h1 class="mt-2 max-w-3xl text-3xl font-black tracking-tight sm:text-5xl">
                    Seu painel de resultados ficou mais vivo.
                </h1>
                <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-300 sm:text-base">
                    Acompanhe vendas, comissão, cupons e metas em uma experiência mais visual, leve e com foco em performance.
                </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">A receber</p>
                        <p class="mt-2 text-2xl font-black">{{ $money($metrics['commission_approved'] ?? 0) }}</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">Vendido no mês</p>
                        <p class="mt-2 text-2xl font-black">{{ $money($metrics['sales_paid'] ?? 0) }}</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">Usos do cupom</p>
                        <p class="mt-2 text-2xl font-black">{{ $number($metrics['coupon_uses'] ?? 0) }}</p>
                    </div>
                </div>
            </div>

            <div class="relative z-10 flex items-center justify-center">
                <div class="orvox-float relative h-64 w-full max-w-sm">
                    <div class="orvox-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 de conquista">
                        <defs>
                            <linearGradient id="creatorGold" 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="creatorDark" 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="116" fill="rgba(255,255,255,.08)" />
                        <circle cx="210" cy="160" r="84" fill="url(#creatorDark)" opacity=".95" />
                        <path d="M178 98h64v26c0 18-14 32-32 32s-32-14-32-32V98Z" fill="url(#creatorGold)" />
                        <path d="M146 112h32v20c-22-1-36-9-44-22-7-12-6-26 2-35h42v18h-29c-5 7-5 13-3 19Zm96-37h42c8 9 9 23 2 35-8 13-22 21-44 22v-20c8-1 21-4 28-13 3-4 3-11 0-24h-28V75Z" fill="#f59e0b" />
                        <path d="M188 156h44v34h-44z" fill="#f97316" />
                        <path d="M160 190h100l18 60H142l18-60Z" fill="url(#creatorGold)" />
                        <path d="M168 250h84v28h-84z" fill="#f8fafc" />
                        <path d="M136 278h148v22H136z" fill="#f8fafc" opacity=".95" />
                        <circle cx="98" cy="93" r="14" fill="#fde68a" />
                        <circle cx="324" cy="91" r="10" fill="#fdba74" />
                        <circle cx="320" cy="236" r="16" fill="#fbbf24" opacity=".9" />
                        <path d="M82 214c22-10 41-10 62 0" stroke="#fef3c7" stroke-width="8" stroke-linecap="round" opacity=".9" />
                        <path d="M282 198c20-18 42-26 64-24" stroke="#fed7aa" stroke-width="8" stroke-linecap="round" opacity=".85" />
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <livewire:influencer.dashboard-stats />

    <section class="grid gap-6 lg:grid-cols-[.95fr_1.05fr]">
        <livewire:influencer.goal-progress />

        <div class="orvox-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">Performance</p>
                    <h2 class="mt-2 text-xl font-black text-slate-950">Vendas por dia</h2>
                </div>
                <span class="rounded-full bg-slate-950 px-4 py-2 text-xs font-black text-white">{{ $dailySales->count() }} dia(s)</span>
            </div>

            <div class="space-y-3">
                @forelse ($dailySales as $day => $total)
                    @php($width = min(100, ((float) $total / $maxDailySale) * 100))
                    <div>
                        <div class="mb-1 flex justify-between text-xs font-bold text-slate-500">
                            <span>{{ \Carbon\Carbon::parse($day)->format('d/m') }}</span>
                            <span>{{ $money((float) $total) }}</span>
                        </div>
                        <div class="h-3 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-3 rounded-full bg-gradient-to-r from-slate-950 via-amber-600 to-orange-400 transition-all duration-700" style="width: {{ $width }}%"></div>
                        </div>
                    </div>
                @empty
                    <div class="rounded-3xl border border-dashed border-slate-200 bg-slate-50 p-6 text-sm text-slate-500">
                        Ainda não há vendas pagas neste mês. Quando o primeiro pedido pago chegar, ele aparece aqui.
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <section class="grid gap-6 lg:grid-cols-2">
        <div class="orvox-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">Cupom</p>
                    <h2 class="mt-2 text-xl font-black text-slate-950">Horários de maior uso</h2>
                </div>
                <span class="rounded-full bg-orange-100 px-4 py-2 text-xs font-black text-orange-800">tempo real</span>
            </div>

            <div class="space-y-3">
                @forelse ($hourlyUses as $hour => $total)
                    @php($width = min(100, ((float) $total / $maxHourlyUse) * 100))
                    <div>
                        <div class="mb-1 flex justify-between text-xs font-bold text-slate-500">
                            <span>{{ str_pad((string) $hour, 2, '0', STR_PAD_LEFT) }}h</span>
                            <span>{{ $total }} uso(s)</span>
                        </div>
                        <div class="h-3 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-3 rounded-full bg-gradient-to-r from-orange-300 via-amber-500 to-slate-950 transition-all duration-700" style="width: {{ $width }}%"></div>
                        </div>
                    </div>
                @empty
                    <div class="rounded-3xl border border-dashed border-slate-200 bg-slate-50 p-6 text-sm text-slate-500">
                        Ainda não existem usos do cupom neste mês.
                    </div>
                @endforelse
            </div>
        </div>

        <div class="orvox-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-emerald-700">Atalhos</p>
                    <h2 class="mt-2 text-xl font-black text-slate-950">Próximas ações</h2>
                </div>
            </div>

            <div class="grid gap-3 sm:grid-cols-2">
                <a href="{{ route('influencer.orders.index') }}" class="group rounded-3xl border border-slate-100 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">Ver pedidos</p>
                    <p class="mt-1 text-sm text-slate-500">Acompanhe pedidos gerados pelo seu cupom.</p>
                </a>
                <a href="{{ route('influencer.commissions.index') }}" class="group rounded-3xl border border-slate-100 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">Comissões</p>
                    <p class="mt-1 text-sm text-slate-500">Veja valores previstos, aprovados e pagos.</p>
                </a>
                <a href="{{ route('influencer.gamification.index') }}" class="group rounded-3xl border border-slate-100 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">Metas</p>
                    <p class="mt-1 text-sm text-slate-500">Confira sua jornada de conquistas.</p>
                </a>
                <a href="{{ route('influencer.payments.index') }}" class="group rounded-3xl border border-slate-100 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">Pagamentos</p>
                    <p class="mt-1 text-sm text-slate-500">Histórico e confirmações de pagamento.</p>
                </a>
            </div>
        </div>
    </section>

    <section class="orvox-slide-up overflow-hidden rounded-[2rem] border border-white/70 bg-white/90 shadow-xl shadow-slate-950/5 backdrop-blur">
        <div class="flex flex-wrap items-center justify-between gap-4 border-b border-slate-100 p-6">
            <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>
            <a class="rounded-full bg-slate-950 px-5 py-2 text-sm font-black text-white transition hover:-translate-y-0.5 hover:bg-slate-800" href="{{ route('influencer.orders.index') }}">
                Ver todos
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50/80">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Pedido</th>
                        <th class="px-6 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Data</th>
                        <th class="px-6 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Status</th>
                        <th class="px-6 py-4 text-left text-xs font-black uppercase tracking-wide text-slate-500">Base</th>
                        <th class="px-6 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 bg-white">
                    @forelse ($latestOrders as $order)
                        @php
                            $status = $order->status;
                            $statusLabel = $status instanceof \UnitEnum && method_exists($status, 'label') ? $status->label() : (string) $status;
                        @endphp
                        <tr class="transition hover:bg-amber-50/60">
                            <td class="px-6 py-4 text-sm font-black text-slate-950">#{{ $order->order_number }}</td>
                            <td class="px-6 py-4 text-sm text-slate-500">{{ $order->placed_at?->format('d/m/Y H:i') ?? '-' }}</td>
                            <td class="px-6 py-4 text-sm">
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-black text-slate-700">{{ $statusLabel }}</span>
                            </td>
                            <td class="px-6 py-4 text-sm font-bold text-slate-700">{{ $money($order->commission_base_amount) }}</td>
                            <td class="px-6 py-4 text-sm font-black text-emerald-700">{{ $money($order->commission?->commission_amount ?? 0) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-sm text-slate-500">
                                Nenhum pedido encontrado ainda. Assim que seu cupom for usado, os pedidos aparecem aqui.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection