@section('title', __('Configuracao de Metas'))
<div>
    <x-baseview title="{{ __('Configuracao de Metas por Cidade') }}">
        <div class="mt-6 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="text-xs uppercase tracking-wide text-slate-500">Portal</p>
                    <p class="text-lg font-black text-slate-900">{{ $portalKey }}</p>
                    <p class="text-xs text-slate-500">Profile ID: #{{ $profile->id }}</p>
                </div>
                <div class="text-right">
                    @if ($canEdit)
                        <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">MODO EDICAO (ADMIN)</span>
                    @else
                        <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">MODO LEITURA (ADMIN-LIMITED)</span>
                    @endif
                </div>
            </div>
        </div>

        @if(!$schemaReady)
            <div class="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                Estrutura de banco ausente para metas dinamicas. Execute:
                <code class="font-semibold">php artisan migrate --force</code>
                para criar as tabelas <code>launch_goal_profiles</code>, <code>launch_goal_cities</code> e
                <code>launch_goal_snapshots</code>.
            </div>
            <div class="h-20"></div>
        @else
        <form wire:submit.prevent="saveProfile" class="mt-6 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <h3 class="text-lg font-black text-slate-900">1) Perfil de estrategia</h3>
            <p class="mt-1 text-xs text-slate-500">Define horizonte, capacidade operacional e estrategia macro para geracao automatica de metas.</p>

            <div class="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                <x-input title="{{ __('Nome do perfil') }}" name="profileName" :disable="!$canEdit" />
                <div class="mt-4">
                    <x-label title="{{ __('Estrategia') }}" />
                    <select class="block w-full px-2 py-2 border rounded bg-white"
                        wire:model.defer="strategy" @if(!$canEdit) disabled @endif>
                        @foreach($strategyOptions as $option)
                            <option value="{{ $option['id'] }}">{{ $option['name'] }}</option>
                        @endforeach
                    </select>
                    @error('strategy') <span class="mt-1 text-xs text-red-700">{{ $message }}</span> @enderror
                </div>
                <x-input title="{{ __('Horizonte (meses)') }}" name="horizonMonths" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('SLA de revisao (horas)') }}" name="cityReviewHours" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Capacidade admin/dia') }}" name="adminCapacityPerDay" type="number" :disable="!$canEdit" />
            </div>

            <div class="mt-4">
                <x-label title="{{ __('Notas estrategicas') }}" />
                <textarea id="profileNotes" class="w-full h-24 p-2 mt-1 border rounded"
                    wire:model.defer="profileNotes" @if(!$canEdit) disabled @endif></textarea>
                @error('profileNotes') <span class="mt-1 text-xs text-red-700">{{ $message }}</span> @enderror
            </div>
            <div class="mt-2">
                <x-checkbox title="{{ __('Perfil ativo') }}" name="profileActive" :defer="true" />
            </div>

            @if($canEdit)
                <div class="mt-4 w-40">
                    <x-buttons.primary title="{{ __('Salvar perfil') }}" />
                </div>
            @endif
        </form>

        <form wire:submit.prevent="saveCity" class="mt-6 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <h3 class="text-lg font-black text-slate-900">2) Configuracao de cidade</h3>
            <p class="mt-1 text-xs text-slate-500">
                Cadastre cidade, modulos e contexto local. As metas sao geradas automaticamente e podem receber override.
            </p>

            <div class="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
                <x-input title="{{ __('Cidade') }}" name="cityName" :disable="!$canEdit" />
                <x-input title="{{ __('Provincia/Estado') }}" name="stateName" :disable="!$canEdit" />
                <x-input title="{{ __('Pais') }}" name="countryName" :disable="!$canEdit" />
                <x-input title="{{ __('Data de inicio') }}" name="launchDate" type="date" :disable="!$canEdit" />
                <x-input title="{{ __('Peso de prioridade') }}" name="priorityWeight" type="number" step="0.01" :disable="!$canEdit" />
                <x-input title="{{ __('Demanda (0-100)') }}" name="demandScore" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Oferta (0-100)') }}" name="supplyScore" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Competicao (0-100)') }}" name="competitionScore" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Budget de ativacao') }}" name="activationBudget" type="number" step="0.01" :disable="!$canEdit" />
            </div>

            <div class="mt-4 grid gap-4 md:grid-cols-2">
                <x-input title="{{ __('Palavras-chave de zona (CSV)') }}" name="keywordCsv" :disable="!$canEdit"
                    placeholder="Talatona, Benfica, Cidade Universitaria" />
                <div class="grid grid-cols-2 gap-2 md:grid-cols-4">
                    <x-checkbox title="{{ __('Taxi') }}" name="moduleTaxi" :defer="true" />
                    <x-checkbox title="{{ __('Delivery') }}" name="moduleDelivery" :defer="true" />
                    <x-checkbox title="{{ __('Parcel') }}" name="moduleParcel" :defer="true" />
                    <x-checkbox title="{{ __('Service') }}" name="moduleService" :defer="true" />
                </div>
            </div>

            <p class="mt-6 text-xs font-semibold uppercase tracking-wide text-slate-500">Overrides (opcional)</p>
            <div class="mt-2 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
                <x-input title="{{ __('Meta drivers') }}" name="targetDriversOverride" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Meta vendors') }}" name="targetVendorsOverride" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Meta pedidos 30d') }}" name="targetOrdersOverride" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Max reviews pendentes') }}" name="targetPendingReviewsOverride" type="number" :disable="!$canEdit" />
                <x-input title="{{ __('Max remittance (%)') }}" name="targetRemittanceRatioOverride" type="number" step="0.1" :disable="!$canEdit" />
            </div>

            <div class="mt-2">
                <x-checkbox title="{{ __('Cidade ativa') }}" name="cityActive" :defer="true" />
            </div>

            <div class="mt-4 flex flex-wrap gap-2">
                @if($canEdit)
                    <x-buttons.primary :title="$cityId ? __('Atualizar cidade') : __('Adicionar cidade')" />
                @endif
                <button type="button" wire:click="resetCityForm"
                    class="px-4 py-2 text-sm font-semibold text-slate-700 border border-slate-300 rounded-lg hover:bg-slate-50">
                    Limpar formulario
                </button>
            </div>
        </form>

        <div class="mt-6 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <h3 class="text-lg font-black text-slate-900">3) Cidades cadastradas e metas geradas</h3>
            <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">Cidade</th>
                            <th class="px-3 py-2 text-center">Ativa</th>
                            <th class="px-3 py-2 text-right">Drivers</th>
                            <th class="px-3 py-2 text-right">Vendors</th>
                            <th class="px-3 py-2 text-right">Pedidos 30d</th>
                            <th class="px-3 py-2 text-right">Max Reviews</th>
                            <th class="px-3 py-2 text-right">Max Remit %</th>
                            <th class="px-3 py-2 text-left">Modulos</th>
                            <th class="px-3 py-2 text-right">Acoes</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($cities as $row)
                            @php
                                $city = $row['city'];
                                $targets = $row['targets'];
                                $modules = $city->getModuleFlags();
                            @endphp
                            <tr>
                                <td class="px-3 py-2">
                                    <p class="font-semibold text-slate-900">{{ $city->city_name }}</p>
                                    <p class="text-xs text-slate-500">
                                        Peso {{ number_format($city->priority_weight, 2) }} |
                                        D{{ $city->demand_score }} S{{ $city->supply_score }} C{{ $city->competition_score }}
                                    </p>
                                </td>
                                <td class="px-3 py-2 text-center">
                                    @if($city->is_active)
                                        <span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-semibold text-emerald-700">SIM</span>
                                    @else
                                        <span class="rounded-full bg-slate-200 px-2 py-1 text-xs font-semibold text-slate-700">NAO</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2 text-right text-slate-700">{{ number_format($targets['drivers_active']) }}</td>
                                <td class="px-3 py-2 text-right text-slate-700">{{ number_format($targets['vendors_active']) }}</td>
                                <td class="px-3 py-2 text-right text-slate-700">{{ number_format($targets['orders_last_30']) }}</td>
                                <td class="px-3 py-2 text-right text-slate-700">{{ number_format($targets['max_pending_reviews']) }}</td>
                                <td class="px-3 py-2 text-right text-slate-700">{{ number_format($targets['max_remittance_ratio'], 1) }}%</td>
                                <td class="px-3 py-2 text-xs text-slate-600">
                                    {{ $modules['taxi'] ? 'Taxi ' : '' }}
                                    {{ $modules['delivery'] ? 'Delivery ' : '' }}
                                    {{ $modules['parcel'] ? 'Parcel ' : '' }}
                                    {{ $modules['service'] ? 'Service' : '' }}
                                </td>
                                <td class="px-3 py-2 text-right">
                                    <div class="flex justify-end gap-2">
                                        <button type="button" wire:click="editCity({{ $city->id }})"
                                            class="px-2 py-1 text-xs font-semibold text-primary-700 border border-primary-300 rounded hover:bg-primary-50">
                                            Editar
                                        </button>
                                        @if($canEdit)
                                            <button type="button" wire:click="toggleCityStatus({{ $city->id }})"
                                                class="px-2 py-1 text-xs font-semibold text-amber-700 border border-amber-300 rounded hover:bg-amber-50">
                                                {{ $city->is_active ? 'Desativar' : 'Ativar' }}
                                            </button>
                                            <button type="button" wire:click="removeCity({{ $city->id }})"
                                                class="px-2 py-1 text-xs font-semibold text-rose-700 border border-rose-300 rounded hover:bg-rose-50">
                                                Remover
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="px-3 py-6 text-center text-sm text-slate-500">
                                    Nenhuma cidade cadastrada.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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