@php
    $moeda = fn ($v): string => number_format((float) $v, 2, ',', '.');
    $percentual = fn ($v): string => number_format((float) $v, 1, ',', '.');
    $caixa = 'h-[2.125rem] w-full rounded-md border bg-superficie px-3 text-sm text-tinta tabular-nums shadow-xs placeholder:text-suave focus-visible:outline-2 focus-visible:outline-offset-0';
    $caixaOk = 'border-fio focus-visible:outline-marca-600';
    $caixaErro = 'border-rose-300 focus-visible:outline-rose-500';
    $rotulo = 'text-[0.7rem] font-semibold uppercase tracking-[0.06em] text-suave';
@endphp

<div>
    @if ($veiculo)
        @php
            // "8,2% acima da FIPE": a FIPE é a referência de mercado de cada preço.
            $contraFipe = fn (float $preco): string => $percentual(abs(($preco / $fipe - 1) * 100)).'% '.($preco >= $fipe ? 'acima' : 'abaixo').' da FIPE';

            // A escada: os preços do carro do maior para o menor, com o mínimo no meio.
            // Nomes e cores iguais aos das referências do topo.
            $degraus = collect([
                'anuncio' => ['Anunciado', 'bg-tinta', $precoConfiavel ? $anunciado : null],
                'fipe' => ['FIPE atual', 'bg-amber-500', $fipe],
                'proposta' => ['Proposta', 'bg-sky-600', $propostaAtual],
                'minimo' => ['Preço mínimo', 'bg-marca-700', $precoMinimo],
                'custo' => ['Custo do carro', 'bg-debito', (float) $veiculo->custo_total],
            ])->filter(fn (array $d): bool => $d[2] !== null && $d[2] > 0)->sortByDesc(fn (array $d): float => $d[2]);
        @endphp

        <x-modal titulo="Simular preço" largura="max-w-2xl"
                 :descricao="$veiculo->modelo.' · '.($veiculo->placa ?? '0 km').' · '.number_format((int) $veiculo->dias, 0, ',', '.').' dias em estoque'">
            <div class="space-y-5 px-5 py-5">
                {{-- 1. As referências do carro --}}
                <dl class="grid divide-y divide-fio rounded-lg ring-1 ring-fio sm:grid-cols-3 sm:divide-x sm:divide-y-0">
                    <div class="flex items-baseline justify-between gap-3 px-4 py-3 sm:block">
                        <dt class="{{ $rotulo }}"><span class="mr-1.5 inline-block size-2 rounded-full bg-debito align-middle" aria-hidden="true"></span>Custo do carro</dt>
                        <dd class="text-right sm:mt-1 sm:text-left">
                            <span class="block text-lg font-semibold text-debito tabular-nums">R$ {{ $moeda($veiculo->custo_total) }}</span>
                            <span class="block text-xs text-suave tabular-nums">compra {{ $moeda($veiculo->valor_compra) }} + lançamentos {{ $moeda($veiculo->lancamentos) }}</span>
                        </dd>
                    </div>
                    <div class="flex items-baseline justify-between gap-3 px-4 py-3 sm:block">
                        <dt class="{{ $rotulo }}"><span class="mr-1.5 inline-block size-2 rounded-full bg-tinta align-middle" aria-hidden="true"></span>Anunciado</dt>
                        <dd class="text-right sm:mt-1 sm:text-left">
                            <span class="block text-lg font-semibold text-tinta tabular-nums">{{ $anunciado > 0 ? 'R$ '.$moeda($anunciado) : '—' }}</span>
                            @if ($margemDoAnuncio !== null)
                                <span @class(['block text-xs tabular-nums', 'text-debito' => $margemDoAnuncio < 0, 'text-suave' => $margemDoAnuncio >= 0])>margem de {{ $percentual($margemDoAnuncio) }}%</span>
                            @else
                                <span class="block text-xs text-amber-800">preço a conferir na Revenda Mais</span>
                            @endif
                        </dd>
                    </div>
                    <div class="flex items-baseline justify-between gap-3 px-4 py-3 sm:block">
                        <dt class="{{ $rotulo }}"><span class="mr-1.5 inline-block size-2 rounded-full bg-amber-500 align-middle" aria-hidden="true"></span>FIPE atual</dt>
                        <dd class="text-right sm:mt-1 sm:text-left">
                            @if ($fipe)
                                <span class="block text-lg font-semibold text-tinta tabular-nums">R$ {{ $moeda($fipe) }}</span>
                                @if ($variacaoFipe !== null && $variacaoFipe != 0)
                                    <span class="block text-xs text-suave tabular-nums" title="FIPE na compra: R$ {{ $moeda($fipeNaCompra) }}">
                                        {{ $variacaoFipe < 0 ? 'caiu' : 'subiu' }} {{ $percentual(abs($variacaoFipe)) }}% desde a compra
                                    </span>
                                @elseif ($variacaoFipe !== null)
                                    <span class="block text-xs text-suave">igual à da compra</span>
                                @endif
                            @else
                                <span class="block text-lg font-semibold text-suave">—</span>
                                <span class="block text-xs text-suave">{{ $veiculo->novo ? 'zero-km não tem FIPE no relatório' : 'sem FIPE no relatório' }}</span>
                            @endif
                        </dd>
                    </div>
                </dl>

                {{-- 2. O que o gerente decide: a margem abre com a do anúncio; comissão e
                     retorno são da negociação e ficam em branco até ele preencher. --}}
                <div class="grid gap-4 sm:grid-cols-3">
                    @foreach ([
                        'margem' => ['Margem mínima', 'do preço de venda', '%', 'ex.: 10'],
                        'comissao' => ['Comissão do vendedor', 'do preço de venda', '%', '0'],
                        'retorno' => ['Retorno do financiamento', 'abate do custo', 'R$', '0'],
                    ] as $campo => [$rotuloCampo, $nota, $unidade, $exemplo])
                        <div>
                            <label for="simulador-{{ $campo }}" class="block text-sm font-medium text-tinta">{{ $rotuloCampo }}</label>
                            <div class="relative mt-1">
                                @if ($unidade === 'R$')
                                    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-suave">R$</span>
                                @endif
                                <input id="simulador-{{ $campo }}" type="text" inputmode="decimal" autocomplete="off" placeholder="{{ $exemplo }}"
                                       wire:model.live.debounce.300ms="{{ $campo }}"
                                       @if ($campo === 'margem') x-init="$nextTick(() => { $el.focus(); $el.select() })" @endif
                                       @class([$caixa, 'pr-8' => $unidade === '%', 'pl-9' => $unidade === 'R$', $caixaErro => $errors->has($campo), $caixaOk => ! $errors->has($campo)])>
                                @if ($unidade === '%')
                                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-suave">%</span>
                                @endif
                            </div>
                            @error($campo)
                                <p class="mt-1 text-sm text-rose-700">{{ $message }}</p>
                            @else
                                <p class="mt-1 text-xs text-suave">{{ $nota }}</p>
                            @enderror
                        </div>
                    @endforeach
                </div>

                {{-- 3. A resposta --}}
                <section aria-live="polite" class="rounded-lg bg-chao/60 px-4 py-4 ring-1 ring-fio">
                    @if ($precoMinimo === null)
                        <p class="text-sm text-suave">Digite a margem mínima para ver até quanto este carro pode baixar.</p>
                    @else
                        <div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-1">
                            <div>
                                <p class="{{ $rotulo }}"><span class="mr-1.5 inline-block size-2 rounded-full bg-marca-700 align-middle" aria-hidden="true"></span>Preço mínimo com {{ $percentual($margemAtual) }}% de margem</p>
                                <p class="mt-1 font-display text-3xl font-semibold tracking-tight text-tinta tabular-nums">R$ {{ $moeda($precoMinimo) }}</p>
                            </div>
                            <p class="pb-1 text-xs text-suave tabular-nums sm:text-right">
                                lucro de R$ {{ $moeda($simulacao->lucro($precoMinimo)) }}
                                @if ($fipe)<br><span @class(['font-medium', 'text-amber-800' => $precoMinimo > $fipe, 'text-emerald-700' => $precoMinimo <= $fipe])>{{ $contraFipe($precoMinimo) }}</span>@endif
                            </p>
                        </div>

                        @if ($simulacao->comissao > 0 || $simulacao->retorno > 0)
                            <p class="mt-1 text-xs text-suave tabular-nums">
                                Neste preço: custo R$ {{ $moeda($veiculo->custo_total) }}
                                @if ($simulacao->comissao > 0) + comissão de {{ $percentual($simulacao->comissao) }}% (<span class="text-debito">R$ {{ $moeda($simulacao->comissaoEm($precoMinimo)) }}</span>) @endif
                                @if ($simulacao->retorno > 0) − retorno R$ {{ $moeda($simulacao->retorno) }} @endif
                            </p>
                        @endif

                        {{-- Escada de preços: uma lista, não um controle. Cada linha diz a
                             distância até o preço mínimo; anúncio e proposta acima dele são
                             espaço para negociar (verde), abaixo são o que falta (vermelho). --}}
                        <div class="mt-4">
                            <p class="{{ $rotulo }}">Do maior para o menor · diferença para o mínimo</p>
                            <ol class="mt-1.5 text-sm tabular-nums">
                                @foreach ($degraus as $chave => [$nomeDegrau, $cor, $valor])
                                    @php
                                        $diferenca = round($valor - $precoMinimo, 2);
                                        $negocia = in_array($chave, ['anuncio', 'proposta'], true);
                                    @endphp
                                    <li @class([
                                        'grid grid-cols-[1fr_auto_7.5rem] items-center gap-x-3 px-2 py-1.5',
                                        'rounded-md bg-marca-50 font-semibold text-tinta ring-1 ring-marca-200' => $chave === 'minimo',
                                        'text-tinta' => $chave !== 'minimo',
                                    ])>
                                        <span class="inline-flex items-center gap-2"><span class="size-2 shrink-0 rounded-full {{ $cor }}" aria-hidden="true"></span>{{ $nomeDegrau }}</span>
                                        <span class="text-right">R$ {{ $moeda($valor) }}</span>
                                        <span @class([
                                            'text-right text-xs',
                                            'text-emerald-700' => $negocia && $diferenca >= 0,
                                            'text-debito' => $negocia && $diferenca < 0,
                                            'text-suave' => ! $negocia,
                                        ])>
                                            @if ($chave === 'minimo')
                                                <span class="font-normal text-suave">referência</span>
                                            @else
                                                {{ $diferenca >= 0 ? '+' : '−' }} {{ $moeda(abs($diferenca)) }}
                                            @endif
                                        </span>
                                    </li>
                                @endforeach
                            </ol>
                        </div>

                        <div class="mt-4 border-t border-fio pt-3 text-sm">
                            @if (! $precoConfiavel)
                                <p class="text-amber-800">
                                    O preço anunciado está a conferir na Revenda Mais (zerado ou abaixo da metade do custo), então não dá para dizer quanto baixar dele.
                                </p>
                            @elseif ($folga >= 0)
                                <p class="text-tinta">
                                    Do anúncio, dá para baixar até <strong class="font-semibold text-emerald-700 tabular-nums">R$ {{ $moeda($folga) }}</strong>
                                    <span class="text-suave">({{ $percentual($folga / $anunciado * 100) }}%)</span>.
                                </p>
                            @else
                                <p class="text-debito">
                                    O anúncio já está <strong class="font-semibold tabular-nums">R$ {{ $moeda(-$folga) }}</strong> abaixo do mínimo: vendido por ele, a margem é de {{ $percentual($simulacao->margem($anunciado)) }}%.
                                </p>
                            @endif
                        </div>
                    @endif
                </section>

                {{-- 4. Uma proposta na mesa --}}
                <div>
                    <label for="simulador-proposta" class="block text-sm font-medium text-tinta">Testar uma proposta</label>
                    <div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-2">
                        <div class="relative w-44">
                            <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-suave">R$</span>
                            <input id="simulador-proposta" type="text" inputmode="decimal" autocomplete="off" placeholder="valor oferecido"
                                   wire:model.live.debounce.300ms="proposta"
                                   @class([$caixa, 'pl-9', $caixaErro => $errors->has('proposta'), $caixaOk => ! $errors->has('proposta')])>
                        </div>
                        @if ($propostaAtual !== null && $propostaAtual > 0)
                            @php
                                $lucroProposta = $simulacao->lucro($propostaAtual);
                                $atende = $precoMinimo === null ? null : $propostaAtual >= $precoMinimo;
                            @endphp
                            <p class="text-sm tabular-nums">
                                <span @class(['font-semibold', 'text-debito' => $lucroProposta < 0, 'text-tinta' => $lucroProposta >= 0])>Lucro de R$ {{ $moeda($lucroProposta) }}</span>
                                <span class="text-suave">· margem de {{ $percentual($simulacao->margem($propostaAtual)) }}%@if ($fipe) · {{ $contraFipe($propostaAtual) }}@endif</span>
                                @if ($atende === true)
                                    <span class="ml-1 whitespace-nowrap rounded-sm bg-emerald-50 px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.05em] text-emerald-800 ring-1 ring-emerald-200">atende o mínimo</span>
                                @elseif ($atende === false)
                                    <span class="ml-1 whitespace-nowrap rounded-sm bg-rose-50 px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.05em] text-rose-800 ring-1 ring-rose-200">abaixo do mínimo</span>
                                @endif
                            </p>
                        @endif
                    </div>
                    @error('proposta') <p class="mt-1 text-sm text-rose-700">{{ $message }}</p> @enderror
                </div>

                <p class="border-t border-fio pt-3 text-xs text-suave">
                    Preço mínimo = (custo − retorno) ÷ (1 − margem − comissão). O custo é compra + lançamentos; o custo do dinheiro parado não entra.
                    Nada aqui é gravado. Custos e FIPE são do relatório do estoque importado.
                </p>
            </div>
        </x-modal>
    @endif
</div>