@section('title', __('Planejador de Lançamento'))
<div>
    <x-baseview title="{{ __('Planejador de Lançamento') }}">
        @if (empty($selectedCity))
            @if(!empty($setupMissing))
                <div class="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                    Estrutura de metas ainda nao criada no banco. Execute <code class="font-semibold">php artisan migrate --force</code>.
                </div>
            @else
                <div class="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                    Nenhuma cidade ativa configurada. Acesse <a class="underline font-semibold"
                        href="{{ route('launch.goal.settings') }}">Configurar Metas</a> para cadastrar o contexto operacional.
                </div>
            @endif
            <div class="h-20"></div>
        @else
        @php
            $portalLabel = trim((string) setting('websiteName', ''));
            if (empty($portalLabel)) {
                $portalLabel = strtoupper(str_replace('_', ' ', $profile->portal_key ?? 'portal'));
            }
        @endphp
        <div class="grid gap-4 mt-4 lg:grid-cols-3">
            <div class="p-4 bg-white border rounded-lg lg:col-span-2">
                <p class="text-xs font-bold tracking-widest text-gray-400 uppercase">
                    Plano de Lançamento · {{ $portalLabel }}
                </p>
                <h2 class="mt-1 text-2xl font-bold text-gray-900">{{ $selectedCity->city_name }}</h2>
                <p class="mt-2 text-sm text-gray-600">
                    Perfil: {{ $profile->name }} · Estratégia: {{ str_replace('_', ' ', ucfirst($profile->strategy)) }} ·
                    Janela de execução: {{ $horizonMonths }} meses
                </p>
                <p class="mt-1 text-xs text-gray-500">Cidades no plano: {{ implode(' · ', $launchAreas) }}</p>

                @php
                    $setup = $metrics['payment_setup'];
                @endphp
                <div class="flex flex-wrap gap-2 mt-3">
                    <x-km.chip tipo="{{ $setup['offline_wallet_enabled'] ? 'ok' : 'erro' }}">
                        Wallet offline: {{ $setup['offline_wallet_enabled'] ? 'ATIVO' : 'INATIVO' }}
                    </x-km.chip>
                    <x-km.chip tipo="{{ $setup['cash_enabled'] ? 'ok' : 'erro' }}">
                        Cash final: {{ $setup['cash_enabled'] ? 'ATIVO' : 'INATIVO' }}
                    </x-km.chip>
                    <x-km.chip tipo="{{ $setup['offline_taxi_enabled'] ? 'ok' : 'neutro' }}">
                        Offline no táxi: {{ $setup['offline_taxi_enabled'] ? 'ATIVO' : 'DESLIGADO' }}
                    </x-km.chip>
                </div>
                <p class="mt-3 text-xs text-gray-400">
                    Atualizado em {{ $metrics['generated_at']->format('d/m/Y H:i') }}
                </p>
            </div>

            <div class="p-4 bg-white border rounded-lg">
                <p class="text-sm font-bold text-gray-700">Cidade analisada</p>
                <div class="mt-2">
                    <livewire:select.address-search-select name="launch_city_search" :searchable="true"
                        placeholder="Busque cidade/bairro no Google" :key="'launch-city-search'" />
                </div>
                <p class="mt-2 text-xs text-gray-400">
                    Busca dinâmica: use Google para localizar e o sistema tenta vincular com uma cidade do plano.
                </p>
                @if (!empty($citySearchMessage))
                    <p class="mt-1 text-xs {{ $citySearchMessageClass }}">
                        {{ $citySearchMessage }}
                    </p>
                @endif

                <select class="w-full mt-3 text-sm border-gray-300 rounded-md" wire:model="cityId">
                    @foreach ($cities as $city)
                        <option value="{{ $city->id }}">{{ $city->city_name }}</option>
                    @endforeach
                </select>

                <div class="mx-auto mt-4"
                    style="width:9rem;height:9rem;border-radius:9999px;padding:8px;background:conic-gradient(#16a34a {{ $readiness['score'] }}%, #e5e7eb 0)">
                    <div class="flex flex-col items-center justify-center w-full h-full bg-white rounded-full">
                        <p class="text-3xl font-bold text-gray-900">{{ number_format($readiness['score'], 1) }}%</p>
                        <p class="text-[11px] text-gray-400 uppercase" style="letter-spacing:.05em">Prontidão</p>
                    </div>
                </div>
                <div class="px-3 py-2 mt-4 text-sm font-semibold text-center border rounded-lg {{ $readiness['tone'] }}">
                    {{ $readiness['label'] }}
                </div>
            </div>
        </div>

        <div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
            @foreach ($targetProgress as $item)
                @php
                    $progressWidth = max(4, min(100, (float) $item['progress']));
                    $progressClass = 'bg-rose-500';
                    if ($item['on_track']) {
                        $progressClass = 'bg-emerald-500';
                    } elseif ($item['progress'] >= 60) {
                        $progressClass = 'bg-amber-500';
                    }
                @endphp
                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $item['label'] }}</p>
                    <div class="mt-3 flex items-end justify-between">
                        <div>
                            <p class="text-2xl font-black text-slate-900">
                                @if ($item['unit'] === '%')
                                    {{ number_format($item['current'], 1) }}%
                                @else
                                    {{ number_format($item['current']) }}
                                @endif
                            </p>
                            <p class="text-xs text-slate-500">
                                Meta:
                                @if ($item['unit'] === '%')
                                    {{ number_format($item['target'], 1) }}%
                                @else
                                    {{ number_format($item['target']) }} {{ $item['unit'] }}
                                @endif
                            </p>
                        </div>
                        <p class="text-sm font-semibold {{ $item['on_track'] ? 'text-emerald-600' : 'text-slate-700' }}">
                            {{ number_format($item['progress'], 1) }}%
                        </p>
                    </div>
                    <div class="mt-3 h-2 w-full overflow-hidden rounded-full bg-slate-200">
                        <div class="h-full {{ $progressClass }}" style="width: {{ $progressWidth }}%;"></div>
                    </div>
                    <p class="mt-2 text-xs text-slate-600">
                        @if ($item['direction'] === 'up')
                            @if ($item['gap'] > 0)
                                Faltam {{ number_format($item['gap']) }} ({{ number_format($item['monthly_need']) }}/mes)
                            @else
                                Meta atingida.
                            @endif
                        @else
                            @if ($item['gap'] > 0)
                                Excesso de {{ number_format($item['gap'], 1) }} (reduzir {{ number_format($item['monthly_need'], 1) }}/mes)
                            @else
                                Dentro do limite.
                            @endif
                        @endif
                    </p>
                </div>
            @endforeach
        </div>

        <div class="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Situacao de pedidos (30 dias)</p>
                <p class="mt-2 text-3xl font-black text-slate-900">{{ number_format($metrics['orders_last_30']) }}</p>
                <p class="mt-1 text-xs text-slate-600">
                    Taxi: {{ number_format($metrics['taxi_orders_last_30']) }} · Entrega: {{ number_format($metrics['delivery_orders_last_30']) }}
                </p>
            </div>

            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Comprovantes pendentes</p>
                <p class="mt-2 text-3xl font-black text-slate-900">{{ number_format($metrics['total_reviews_pending']) }}</p>
                <p class="mt-1 text-xs text-slate-600">
                    Wallet: {{ number_format($metrics['wallet_offline_reviews_pending']) }} · Pedidos: {{ number_format($metrics['order_offline_reviews_pending']) }}
                </p>
            </div>

            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Mix cash no fechamento</p>
                <p class="mt-2 text-3xl font-black text-slate-900">{{ number_format($metrics['cash_mix_last_30'], 1) }}%</p>
                <p class="mt-1 text-xs text-slate-600">
                    {{ number_format($metrics['cash_orders_last_30']) }} pedidos cash em {{ number_format($metrics['orders_last_30']) }} pedidos
                </p>
            </div>

            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Remessa pendente</p>
                <p class="mt-2 text-3xl font-black text-slate-900">{{ currencyFormat($metrics['remittance_pending_amount']) }}</p>
                <p class="mt-1 text-xs text-slate-600">
                    {{ number_format($metrics['remittance_pending_count']) }} registros · {{ number_format($metrics['remittance_pending_vs_wallet'], 1) }}% do saldo da carteira
                </p>
            </div>

            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Saldo em carteiras de motoristas</p>
                <p class="mt-2 text-3xl font-black text-slate-900">{{ currencyFormat($metrics['driver_wallet_float']) }}</p>
                <p class="mt-1 text-xs text-slate-600">
                    Top-up aprovado 30d: {{ currencyFormat($metrics['topup_successful_30']) }}
                </p>
            </div>

            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Base ativa atual</p>
                <p class="mt-2 text-3xl font-black text-slate-900">{{ number_format($metrics['drivers_active']) }}</p>
                <p class="mt-1 text-xs text-slate-600">
                    Taxi: {{ number_format($metrics['taxi_drivers_active']) }} · Entrega: {{ number_format($metrics['couriers_active']) }} · Lojas: {{ number_format($metrics['vendors_active']) }}
                </p>
            </div>
        </div>

        <div class="mt-8 grid gap-6 xl:grid-cols-5">
            <div class="xl:col-span-3 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <h3 class="text-lg font-black text-slate-900">Situacao atual por zona de lancamento</h3>
                    <p class="text-xs text-slate-500">Pedidos detectados por endereco/cidade nos ultimos 30 dias</p>
                </div>
                <div class="mt-4 overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200 text-sm">
                        <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                            <tr>
                                <th class="px-3 py-2 text-left">Zona</th>
                                <th class="px-3 py-2 text-right">Lojas ativas</th>
                                <th class="px-3 py-2 text-right">Clientes mapeados</th>
                                <th class="px-3 py-2 text-right">Entregas 30d</th>
                                <th class="px-3 py-2 text-right">Taxi 30d</th>
                                <th class="px-3 py-2 text-right">Total 30d</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @php
                                $weakestZone = collect($zoneSnapshot)->sortBy('total_orders_last_30')->first()['name'] ?? null;
                            @endphp
                            @foreach ($zoneSnapshot as $zone)
                                <tr class="{{ $zone['name'] === $weakestZone ? 'bg-amber-50' : '' }} {{ (int) $zone['id'] === (int) $selectedCity->id ? 'bg-cyan-50' : '' }}">
                                    <td class="px-3 py-2 font-semibold text-slate-700">
                                        <a class="underline" href="{{ route('launch.mission.control', ['cityId' => $zone['id']]) }}">{{ $zone['name'] }}</a>
                                    </td>
                                    <td class="px-3 py-2 text-right text-slate-700">{{ number_format($zone['vendors_active']) }}</td>
                                    <td class="px-3 py-2 text-right text-slate-700">{{ number_format($zone['clients_detected']) }}</td>
                                    <td class="px-3 py-2 text-right text-slate-700">{{ number_format($zone['delivery_orders_last_30']) }}</td>
                                    <td class="px-3 py-2 text-right text-slate-700">{{ number_format($zone['taxi_orders_last_30']) }}</td>
                                    <td class="px-3 py-2 text-right font-bold text-slate-900">
                                        {{ number_format($zone['total_orders_last_30']) }}
                                        <span class="ml-1 rounded bg-slate-100 px-1 text-xs text-slate-700">{{ number_format($zone['readiness_score'], 1) }}%</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="xl:col-span-2 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="text-lg font-black text-slate-900">O que ajustar para atingir a meta</h3>
                <p class="mt-1 text-xs text-slate-500">Plano pratico para os proximos ciclos de operacao</p>
                <div class="mt-4 space-y-3">
                    @foreach ($actions as $action)
                        @php
                            $priority = strtolower($action['priority']);
                            $badgeClass = 'bg-emerald-100 text-emerald-700 border-emerald-200';
                            if ($priority === 'alta') {
                                $badgeClass = 'bg-rose-100 text-rose-700 border-rose-200';
                            } elseif ($priority === 'media') {
                                $badgeClass = 'bg-amber-100 text-amber-700 border-amber-200';
                            }
                        @endphp
                        <div class="rounded-lg border border-slate-200 p-3">
                            <div class="flex items-center justify-between gap-2">
                                <p class="text-sm font-semibold text-slate-900">{{ $action['title'] }}</p>
                                <span class="rounded-full border px-2 py-0.5 text-xs font-semibold {{ $badgeClass }}">
                                    {{ strtoupper($action['priority']) }}
                                </span>
                            </div>
                            <p class="mt-2 text-xs text-slate-600">{{ $action['detail'] }}</p>
                            <p class="mt-2 text-xs font-semibold text-slate-700">KPI: {{ $action['kpi'] }}</p>
                            <p class="mt-1 text-xs text-slate-500">Owner: {{ $action['owner'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="mt-8 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="flex flex-wrap items-center justify-between gap-2">
                <h3 class="text-lg font-black text-slate-900">Projecao de 6 meses</h3>
                <p class="text-xs text-slate-500">Comparativo entre ritmo atual e ritmo minimo necessario</p>
            </div>

            <div class="mt-4 grid gap-3 md:grid-cols-3">
                <div class="rounded-lg bg-slate-50 p-3">
                    <p class="text-xs text-slate-500">Motoristas/entregadores (mes)</p>
                    <p class="mt-1 text-sm font-semibold text-slate-800">
                        Atual: {{ number_format($projection['current_pace']['drivers']) }} · Necessario: {{ number_format($projection['required_pace']['drivers']) }}
                    </p>
                </div>
                <div class="rounded-lg bg-slate-50 p-3">
                    <p class="text-xs text-slate-500">Lojas ativas (mes)</p>
                    <p class="mt-1 text-sm font-semibold text-slate-800">
                        Atual: {{ number_format($projection['current_pace']['vendors']) }} · Necessario: {{ number_format($projection['required_pace']['vendors']) }}
                    </p>
                </div>
                <div class="rounded-lg bg-slate-50 p-3">
                    <p class="text-xs text-slate-500">Pedidos liquidos (mes)</p>
                    <p class="mt-1 text-sm font-semibold text-slate-800">
                        Atual: {{ number_format($projection['current_pace']['orders']) }} · Necessario: {{ number_format($projection['required_pace']['orders']) }}
                    </p>
                </div>
            </div>

            <div class="mt-4 overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200 text-sm">
                    <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                        <tr>
                            <th class="px-3 py-2 text-left">Mes</th>
                            <th class="px-3 py-2 text-right">Motoristas (Atual/Nec.)</th>
                            <th class="px-3 py-2 text-right">Lojas (Atual/Nec.)</th>
                            <th class="px-3 py-2 text-right">Pedidos (Atual/Nec.)</th>
                            <th class="px-3 py-2 text-center">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach ($projection['rows'] as $row)
                            <tr>
                                <td class="px-3 py-2 font-semibold text-slate-700">{{ $row['month'] }}</td>
                                <td class="px-3 py-2 text-right text-slate-700">
                                    {{ number_format($row['drivers_current']) }} / {{ number_format($row['drivers_required']) }}
                                </td>
                                <td class="px-3 py-2 text-right text-slate-700">
                                    {{ number_format($row['vendors_current']) }} / {{ number_format($row['vendors_required']) }}
                                </td>
                                <td class="px-3 py-2 text-right text-slate-700">
                                    {{ number_format($row['orders_current']) }} / {{ number_format($row['orders_required']) }}
                                </td>
                                <td class="px-3 py-2 text-center">
                                    @if ($row['status'] === 'on_track')
                                        <span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-semibold text-emerald-700">NO RITMO</span>
                                    @else
                                        <span class="rounded-full bg-rose-100 px-2 py-1 text-xs font-semibold text-rose-700">ABAIXO</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-8 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <h3 class="text-lg font-black text-slate-900">Fluxo operacional definido</h3>
            <div class="mt-3 grid gap-3 md:grid-cols-3">
                <div class="rounded-lg border border-slate-200 p-3">
                    <p class="text-xs uppercase tracking-wide text-slate-500">Carteira</p>
                    <p class="mt-1 text-sm font-semibold text-slate-800">Top-up somente offline com comprovante e revisao manual.</p>
                </div>
                <div class="rounded-lg border border-slate-200 p-3">
                    <p class="text-xs uppercase tracking-wide text-slate-500">Pagamento final</p>
                    <p class="mt-1 text-sm font-semibold text-slate-800">Fechamento em cash no pedido/corrida.</p>
                </div>
                <div class="rounded-lg border border-slate-200 p-3">
                    <p class="text-xs uppercase tracking-wide text-slate-500">Controles diarios</p>
                    <p class="mt-1 text-sm font-semibold text-slate-800">Conciliar comprovantes, remessas e saldo de carteira por turno.</p>
                </div>
            </div>
        </div>

        <div class="h-20"></div>
        @endif
    </x-baseview>
</div>