@php
    $formatar = fn (?float $v, string $formato) => $v === null
        ? '—'
        : ($formato === 'inteiro' ? number_format($v, 0, ',', '.') : number_format($v, 2, ',', '.'));
    $rotuloAnterior = fn (int $indice) => $indice === 0
        ? 'dez/'.substr((string) ($ano - 1), 2)
        : strtolower($meses[$indice - 1]).'/'.substr((string) $ano, 2);
@endphp

<x-pagina titulo="Acompanhamento anual" grupo="Relatórios"
          descricao="Mês a mês, com a variação sobre o mês anterior. Total e média do ano, sempre visíveis à direita, comparados ao ano anterior.">
    <x-slot:filtros>
        <x-alternador legenda="Veículos" modelo="tipo" :valor="$tipoAtual"
                      :opcoes="[['', 'Todos'], ['novo', 'Novos'], ['usado', 'Usados']]"/>
        <x-seletor-ano :valor="$ano"/>
    </x-slot:filtros>

    @if ($abas === [])
        <p class="rounded-lg border border-dashed border-fio bg-superficie p-10 text-center text-sm text-suave">
            Nenhum dado em {{ $ano }}.
        </p>
    @else
        <x-abas :abas="$abas" :atual="$abaAtual" :rotulos="['TOTAL LOJAS' => 'Total das lojas']" aria-label="Unidade"/>

        <x-quadro :titulo="($abaAtual === 'TOTAL LOJAS' ? 'Total das lojas' : $abaAtual).' · '.$ano" :nota="$soVeiculos
                      ? 'Só os veículos '.($tipoAtual === 'novo' ? 'novos' : 'usados').': despesa, rateio e outras receitas não se separam por tipo'
                      : 'Valores em R$ · a variação mostra a base ao passar o mouse'" class="mt-4">
            <x-slot:acao>
                <x-atalho href="/despesas/anual?por=unidade">Despesas do ano, linha a linha</x-atalho>
            </x-slot:acao>
            <table class="min-w-full text-xs">
                <thead>
                    <tr class="border-b border-fio text-[0.68rem] font-semibold uppercase tracking-[0.06em] text-suave">
                        <th class="sticky left-0 z-10 min-w-52 bg-chao px-3 py-2.5 text-left">Indicador</th>
                        @foreach ($meses as $rotuloMes)
                            <th class="bg-chao/60 px-3 py-2.5 text-right">{{ $rotuloMes }}</th>
                        @endforeach
                        <th class="sticky right-28 z-10 w-32 min-w-32 border-l border-fio shadow-[-10px_0_12px_-10px_rgba(17,26,23,0.3)] bg-chao px-3 py-2.5 text-right text-tinta">Total</th>
                        <th class="sticky right-0 z-10 w-28 min-w-28 bg-chao px-3 py-2.5 text-right text-tinta">Média</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-fio">
                    @foreach ($linhas as $linha)
                        @php
                            $ehResultado = $linha['estilo'] === 'resultado';
                            $ehMedia = $linha['estilo'] === 'media';
                            // Despesa sai em vermelho; nas linhas por veículo, num tom mais leve.
                            $tomDoValor = $linha['despesa'] ? ($ehMedia ? 'text-debito/75' : 'text-debito') : null;
                        @endphp
                        <tr @class([
                            'group align-top transition-colors',
                            'bg-marca-50 hover:bg-marca-100' => $ehResultado,
                            'hover:bg-chao/50' => ! $ehResultado,
                        ])>
                            <th scope="row" @class([
                                'sticky left-0 z-10 whitespace-nowrap px-3 py-2 text-left',
                                'bg-marca-50 font-semibold text-tinta group-hover:bg-marca-100' => $ehResultado,
                                'bg-superficie font-normal text-suave group-hover:bg-chao/50' => $ehMedia,
                                'bg-superficie font-medium text-tinta group-hover:bg-chao/50' => ! $ehResultado && ! $ehMedia,
                            ])><span class="inline-flex items-center gap-1.5">{{ $linha['rotulo'] }} <x-explicacao :chave="$linha['explicacao']"/></span></th>

                            @foreach ($linha['meses'] as $indice => $celula)
                                <td class="whitespace-nowrap px-3 py-2 text-right">
                                    <span @class([
                                        'block tabular-nums',
                                        'text-suave' => $ehMedia && ! $linha['despesa'],
                                        'font-semibold' => $ehResultado,
                                        'text-rose-700' => $ehResultado && ($celula['valor'] ?? 0) < 0,
                                        $tomDoValor => $tomDoValor !== null,
                                    ])>{{ $formatar($celula['valor'], $linha['formato']) }}</span>
                                    @if ($celula['valor'] !== null)
                                        <x-variacao :atual="$celula['valor']" :anterior="$celula['anterior']" :alta-e-boa="$linha['altaEBoa']"
                                                    :rotulo="$rotuloAnterior($indice)" compacto class="justify-end text-[0.68rem]"/>
                                    @endif
                                </td>
                            @endforeach

                            @foreach (['total' => 'right-28 w-32 min-w-32 border-l border-fio shadow-[-10px_0_12px_-10px_rgba(17,26,23,0.3)]', 'media' => 'right-0 w-28 min-w-28'] as $coluna => $posicao)
                                <td class="sticky z-10 whitespace-nowrap px-3 py-2 text-right transition-colors {{ $posicao }} {{ $ehResultado ? 'bg-marca-50 group-hover:bg-marca-100' : 'bg-chao group-hover:bg-chao/50' }}">
                                    @if ($linha[$coluna] === null)
                                        <span class="text-suave/50">—</span>
                                    @else
                                        <span @class([
                                            'block font-semibold tabular-nums',
                                            'text-rose-700' => $ehResultado && ($linha[$coluna]['valor'] ?? 0) < 0,
                                            'text-debito' => $linha['despesa'],
                                        ])>{{ $formatar($linha[$coluna]['valor'], $linha['formato']) }}</span>
                                        @if ($linha[$coluna]['valor'] !== null)
                                            <x-variacao :atual="$linha[$coluna]['valor']" :anterior="$linha[$coluna]['anterior']"
                                                        :alta-e-boa="$linha['altaEBoa']" :rotulo="(string) ($ano - 1)"
                                                        compacto class="justify-end text-[0.68rem]"/>
                                        @endif
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </x-quadro>

        @if ($grafico && $grafico['series'] !== [])
            <x-quadro :titulo="$soVeiculos ? 'Lucro nos veículos mês a mês' : 'Resultado mês a mês'"
                      nota="últimos três anos, com o mesmo cálculo da tabela" class="mt-6">
                <div class="p-4">
                    <x-grafico :config="$grafico" altura="20rem"/>
                </div>
            </x-quadro>
        @endif
    @endif
</x-pagina>