@props(['title' => null, 'subtitle' => null])

<!DOCTYPE html>
<html lang="pt-BR" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ? $title.' · ' : '' }}{{ $site->nome() }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <x-marca.head />
    @livewireStyles
</head>
{{-- O Alpine vem no bundle do Livewire. A injeção automática só acontece em
     páginas que renderizam algum componente — sem estas diretivas, telas como
     dashboard, monitor e certificado ficariam sem o menu mobile e sem os
     blocos x-data. --}}
<body class="h-full" x-data="{ menu: false }">
@php
    $user = auth()->user();
    $master = $user->isMaster();
    $impersonando = session()->has('impersonate.master_id');
@endphp

<div class="min-h-full lg:flex">

    {{-- Navegação lateral --}}
    <aside class="fixed inset-y-0 left-0 z-40 w-72 -translate-x-full bg-brand-950 transition-transform duration-200 lg:static lg:translate-x-0"
           :class="menu && '!translate-x-0'">
        <div class="flex h-full flex-col">
            <div class="flex items-center gap-3 px-6 py-6">
                <x-marca.logo variante="clara" classe="h-9 max-w-[9rem]" />
                <div class="min-w-0 leading-tight">
                    <p class="truncate text-sm font-semibold text-white">{{ $site->nome() }}</p>
                    @if ($site->get('site_descricao'))
                        <p class="truncate text-xs text-brand-300">{{ $site->get('site_descricao') }}</p>
                    @endif
                </div>
            </div>

            <nav class="flex-1 space-y-1 overflow-y-auto px-3">
                @if ($master)
                    <p class="px-3 pt-3 pb-2 text-[11px] font-semibold tracking-wider text-brand-400 uppercase">Master</p>
                    <x-nav-link :href="route('master.dashboard')" :active="request()->routeIs('master.dashboard')" icon="grid">Visão geral</x-nav-link>
                    <x-nav-link :href="route('master.empresas.index')" :active="request()->routeIs('master.empresas.*')" icon="building">Empresas</x-nav-link>
                    <x-nav-link :href="route('master.notas')" :active="request()->routeIs('master.notas')" icon="doc">Todos os XMLs</x-nav-link>
                    <x-nav-link :href="route('master.consulta')" :active="request()->routeIs('master.consulta')" icon="busca">Consultar NF-e</x-nav-link>
                    <x-nav-link :href="route('master.certificados')" :active="request()->routeIs('master.certificados')" icon="shield">Certificados</x-nav-link>
                    <x-nav-link :href="route('master.usuarios')" :active="request()->routeIs('master.usuarios')" icon="users">Usuários</x-nav-link>
                    <x-nav-link :href="route('master.logs')" :active="request()->routeIs('master.logs')" icon="pulse">Logs do monitor</x-nav-link>
                    <x-nav-link :href="route('master.configuracoes')" :active="request()->routeIs('master.configuracoes')" icon="ajustes">Configurações do site</x-nav-link>
                @endif

                {{-- O painel da empresa só existe com vínculo. O master sem empresa
                     chega até ele pela personificação, não pelo menu. --}}
                @if ($user->company)
                    <p class="px-3 pt-4 pb-2 text-[11px] font-semibold tracking-wider text-brand-400 uppercase">
                        {{ $user->company->nome_fantasia ?: $user->company->razao_social }}
                    </p>
                    <x-nav-link :href="route('painel.dashboard')" :active="request()->routeIs('painel.dashboard')" icon="grid">Painel</x-nav-link>
                    <x-nav-link :href="route('painel.notas')" :active="request()->routeIs('painel.notas*')" icon="doc">Notas de compra</x-nav-link>
                    <x-nav-link :href="route('painel.consulta')" :active="request()->routeIs('painel.consulta')" icon="busca">Consultar NF-e</x-nav-link>
                    <x-nav-link :href="route('painel.monitor')" :active="request()->routeIs('painel.monitor')" icon="pulse">Monitor</x-nav-link>
                    <x-nav-link :href="route('painel.certificado')" :active="request()->routeIs('painel.certificado')" icon="shield">Certificado A1</x-nav-link>
                    @if ($user->isAdmin() || $master)
                        <x-nav-link :href="route('painel.usuarios')" :active="request()->routeIs('painel.usuarios')" icon="users">Usuários</x-nav-link>
                    @endif
                @endif
            </nav>

            <div class="border-t border-white/10 p-3">
                <div class="flex items-center gap-3 rounded-lg px-3 py-2">
                    <span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-brand-500/25 text-sm font-semibold text-brand-100">
                        {{ $user->initials() }}
                    </span>
                    <div class="min-w-0 flex-1 leading-tight">
                        <p class="truncate text-sm font-medium text-white">{{ $user->name }}</p>
                        <p class="truncate text-xs text-brand-300">{{ $user->roleLabel() }}</p>
                    </div>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" title="Sair" class="cursor-pointer rounded-md p-2 text-brand-300 transition hover:bg-white/10 hover:text-white">
                            <svg class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15M18.75 15 21.75 12m0 0-3-3m3 3H9"/>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </aside>

    <div x-show="menu" x-cloak @click="menu = false" class="fixed inset-0 z-30 bg-slate-900/50 lg:hidden"></div>

    {{-- Conteúdo --}}
    <div class="min-w-0 flex-1">
        @if ($impersonando)
            <div class="flex flex-wrap items-center justify-between gap-3 bg-amber-400 px-4 py-2 text-sm font-medium text-amber-950 sm:px-6">
                <span>Você está acessando como <strong>{{ $user->name }}</strong> ({{ $user->company?->razao_social }}).</span>
                <form method="POST" action="{{ route('master.impersonate.stop') }}">
                    @csrf
                    <button class="cursor-pointer rounded-md bg-amber-950/10 px-3 py-1 font-semibold hover:bg-amber-950/20">
                        Voltar para o master
                    </button>
                </form>
            </div>
        @endif

        <header class="sticky top-0 z-20 border-b border-slate-200 bg-white/90 backdrop-blur">
            <div class="flex items-center gap-4 px-4 py-4 sm:px-6 lg:px-8">
                <button @click="menu = true" class="cursor-pointer rounded-md p-2 text-slate-500 hover:bg-slate-100 lg:hidden">
                    <svg class="size-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5"/>
                    </svg>
                </button>

                <div class="min-w-0 flex-1">
                    <h1 class="truncate text-lg font-semibold text-slate-900">{{ $title ?? 'Painel' }}</h1>
                    @if ($subtitle)
                        <p class="truncate text-sm text-slate-500">{{ $subtitle }}</p>
                    @endif
                </div>

                @isset($actions)
                    <div class="flex shrink-0 items-center gap-2">{{ $actions }}</div>
                @endisset
            </div>
        </header>

        <main class="px-4 py-6 sm:px-6 lg:px-8">
            <x-alerts />
            {{ $slot }}
        </main>

        <footer class="space-y-1 px-4 pb-8 text-xs text-slate-400 sm:px-6 lg:px-8">
            <p>{{ $site->nome() }} · Os XMLs são obtidos pelo serviço NFeDistribuicaoDFe com o certificado digital da própria empresa.</p>
            <x-marca.creditos />
        </footer>
    </div>
</div>

@livewireScripts
</body>
</html>
