{{--
    Live preview of the tenant's real UI: the admin shell and the login page.

    Everything is painted from $vars — the SAME custom properties the tenant
    panel resolves against at runtime (the shadcn tokens, Filament's --primary-*
    and --gray-* ramps, and the typography set). The preview cannot load the
    tenant panel's compiled stylesheet, so it restates the chrome in scoped CSS
    of its own; reading the same variables, with the same per-mode remaps, is
    what stops the two drifting.

    @see App\Support\Theme\TenantTheme::previewVariables()
    @see App\Support\Theme\TenantTheme::sidebarCss() — the sidebar rules below
         mirror these token-for-token, because those are the rules that paint
         the real navigation.
--}}
@php
    $inline = static fn (array $set): string => collect($set)
        ->map(fn (string $value, string $property): string => $property.':'.$value)
        ->implode(';');

    $lightStyle = $inline($vars['light'] ?? []);
    $darkStyle = $inline($vars['dark'] ?? []);

    // The tenant's real navigation, in resource order, with the same outline
    // icons. Trimmed per group on purpose: this previews the chrome, it is not
    // a second copy of the menu.
    $navigation = [
        'Sales' => [
            ['Invoices', 'heroicon-o-document-text'],
            ['Customers', 'heroicon-o-users'],
            ['Transactions', 'heroicon-o-banknotes'],
        ],
        'Catalog' => [
            ['Products', 'heroicon-o-cube'],
            ['Bundles', 'heroicon-o-squares-plus'],
        ],
        'Inventory' => [
            ['Stock Batches', 'heroicon-o-archive-box'],
            ['Stock Transfers', 'heroicon-o-arrows-right-left'],
        ],
        'Point of Sale' => [
            ['POS Terminal', 'heroicon-o-shopping-cart'],
            ['Tills', 'heroicon-o-calculator'],
        ],
    ];

    // Mirrors IsmsStatsOverview, the widget that actually heads the dashboard.
    $stats = [
        ['Sales today', 'Rs. 486,250.00'],
        ['Collected today', 'Rs. 402,100.00'],
        ['Outstanding', 'Rs. 84,150.00'],
    ];

    $brand = $appName ?: config('app.name');
    $year = now()->format('Y');
@endphp

<div
    class="fi-tp"
    x-data="{
        dark: false,
        styles: { light: @js($lightStyle), dark: @js($darkStyle) },
    }"
>
    <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
        <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
            Live preview — the real app
        </p>

        <div class="flex items-center gap-0.5 rounded-lg bg-gray-100 p-0.5 dark:bg-white/5">
            @foreach ([false => 'Light', true => 'Dark'] as $mode => $label)
                <button
                    type="button"
                    x-on:click="dark = @js((bool) $mode)"
                    x-bind:class="dark === @js((bool) $mode)
                        ? 'bg-white text-gray-900 shadow-sm dark:bg-white/10 dark:text-white'
                        : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'"
                    class="rounded-md px-2.5 py-1 text-xs font-medium transition"
                >{{ $label }}</button>
            @endforeach
        </div>
    </div>

    {{--
        The light set is also written as a plain style attribute, so the preview
        is correct on first paint and stays correct if Alpine never boots — the
        lesson from the login page that shipped blank behind a broken x-data.
    --}}
    <div
        class="fi-tp-vars space-y-4"
        style="{{ $lightStyle }}"
        x-bind:style="dark ? styles.dark : styles.light"
        x-bind:class="dark ? 'fi-tp--dark' : ''"
    >
        <div>
            <p class="mb-1.5 text-[11px] font-medium text-gray-500 dark:text-gray-400">Admin panel</p>
            <div class="fi-tp-frame">
                <div class="fi-tp-shell">
                    {{-- Topbar. The brand sits here rather than in the sidebar
                         header because the panel is sidebarCollapsibleOnDesktop. --}}
                    <div class="fi-tp-topbar">
                        <div class="fi-tp-topbar-start">
                            <x-filament::icon icon="heroicon-m-chevron-left" class="fi-tp-icon-btn" />
                            @include('filament.central.tenant.partials.preview-logo', ['size' => 'topbar'])
                        </div>

                        <div class="fi-tp-topbar-end">
                            {{-- The branch switcher only renders for multi-branch
                                 tenants, which is also why it is drawn muted. --}}
                            <div class="fi-tp-branch">
                                <x-filament::icon icon="heroicon-m-building-office-2" class="fi-tp-branch-icon" />
                                <span>All Branches</span>
                                <x-filament::icon icon="heroicon-m-chevron-down" class="fi-tp-branch-icon" />
                            </div>
                            <div class="fi-tp-avatar" data-tp-avatar>{{ mb_strtoupper(mb_substr($brand ?: 'A', 0, 1)) }}</div>
                        </div>
                    </div>

                    <div class="fi-tp-body">
                        <nav class="fi-tp-sidebar">
                            <div class="fi-tp-nav">
                                <div class="fi-tp-group">
                                    <div class="fi-tp-item fi-tp-item--active">
                                        <x-filament::icon icon="heroicon-o-home" class="fi-tp-item-icon" />
                                        <span class="fi-tp-item-label">Dashboard</span>
                                    </div>
                                </div>

                                @foreach ($navigation as $group => $items)
                                    <div class="fi-tp-group">
                                        <p class="fi-tp-group-label">{{ $group }}</p>
                                        @foreach ($items as [$label, $icon])
                                            <div class="fi-tp-item">
                                                <x-filament::icon :icon="$icon" class="fi-tp-item-icon" />
                                                <span class="fi-tp-item-label">{{ $label }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </nav>

                        <main class="fi-tp-main">
                            <h1 class="fi-tp-heading">Dashboard</h1>

                            <div class="fi-tp-stats">
                                @foreach ($stats as [$label, $value])
                                    <div class="fi-tp-card fi-tp-stat">
                                        <p class="fi-tp-stat-label">{{ $label }}</p>
                                        <p class="fi-tp-stat-value">{{ $value }}</p>
                                    </div>
                                @endforeach
                            </div>

                            {{-- AccountWidget: the one widget every tenant sees. --}}
                            <div class="fi-tp-card fi-tp-account">
                                <div class="fi-tp-avatar fi-tp-avatar--lg" data-tp-avatar>A</div>
                                <div class="fi-tp-account-main">
                                    <p class="fi-tp-account-heading">Welcome</p>
                                    <p class="fi-tp-account-name">Anura Perera</p>
                                </div>
                                <span class="fi-tp-btn fi-tp-btn--gray">
                                    <x-filament::icon icon="heroicon-m-arrow-left-end-on-rectangle" class="fi-tp-btn-icon" />
                                    Sign out
                                </span>
                            </div>

                            <p class="fi-tp-copyright">&copy; {{ $year }} Vellix Global. All rights reserved.</p>
                        </main>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <p class="mb-1.5 text-[11px] font-medium text-gray-500 dark:text-gray-400">Login page</p>

            {{-- A SimplePage: one centred card on the branded backdrop. There is
                 no second column — Filament's auth layout does not have one, so
                 neither does this. --}}
            <div class="fi-tp-frame">
                <div class="fi-tp-simple">
                    <div class="fi-tp-simple-main">
                        <div class="fi-tp-simple-header">
                            @include('filament.central.tenant.partials.preview-logo', ['size' => 'auth'])
                            <p class="fi-tp-simple-heading">{{ $loginHeading }}</p>
                            @if (filled($loginSubtitle))
                                <p class="fi-tp-simple-subheading">{{ $loginSubtitle }}</p>
                            @endif
                        </div>

                        <div class="fi-tp-form">
                            <div class="fi-tp-field">
                                <p class="fi-tp-label">Email address</p>
                                <div class="fi-tp-input">name@company.com</div>
                            </div>

                            <div class="fi-tp-field">
                                <div class="fi-tp-label-row">
                                    <p class="fi-tp-label">Password</p>
                                    <span class="fi-tp-link">Forgot password?</span>
                                </div>
                                <div class="fi-tp-input">••••••••</div>
                            </div>

                            <div class="fi-tp-remember">
                                <span class="fi-tp-checkbox"></span>
                                <span class="fi-tp-label">Remember me</span>
                            </div>

                            <div class="fi-tp-btn fi-tp-btn--primary">Sign in</div>

                            <p class="fi-tp-pin-link">Use quick PIN instead</p>
                        </div>
                    </div>

                    <p class="fi-tp-simple-copyright">&copy; {{ $year }} Vellix Global. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</div>
