{{--
    brafa Systems — Dashboard. Mirror of prototype/admin/app.jsx → DashboardView.
    All figures come from the read-only App\Http\Livewire\Dashboard\Overview
    component (local DB only). No wire:* state here beyond row navigation links.
--}}
@php
    $brafaTilePalette = ['#1A1A1A','#3A3A3A','#5A5A5A','#2D4A33','#3A4D6C','#4D3A6C','#6C3A53','#1E8A3E','#8C5F1B'];
@endphp

<div class="brafa-screen">
    {{-- Stats strip --}}
    <div class="prop-stats">
        <div class="stat-card">
            <span class="stat-card__label">Properties</span>
            <span class="stat-card__value">{{ $stats['properties'] }}</span>
        </div>
        <div class="stat-card stat-card--accent">
            <span class="stat-card__label">In-house guests</span>
            <span class="stat-card__value">{{ $stats['in_house'] }}</span>
        </div>
        <div class="stat-card">
            <span class="stat-card__label">Arrivals today</span>
            <span class="stat-card__value">{{ $stats['arrivals'] }}</span>
        </div>
        <div class="stat-card">
            <span class="stat-card__label">Assigned locks</span>
            <span class="stat-card__value">{{ $stats['assigned_locks'] }}</span>
        </div>
    </div>

    {{-- Door analytics control — superadmins generate fleet stats on demand --}}
    @if ($doorOnDemand)
        <div class="card card--pad-lg" style="margin-top: 24px;">
            <div class="spread" style="align-items: center; gap: 16px;">
                <div>
                    <h3 class="card-heading" style="margin: 0;">Fleet door analytics</h3>
                    <span class="subtle" style="font-size: 12.5px;">
                        @if ($doorReady && $doorGeneratedAt)
                            Generated {{ \Carbon\Carbon::parse($doorGeneratedAt)->diffForHumans() }} · spans every property's locks
                        @else
                            Computed across the whole fleet's lock history, so it runs on demand rather than on every page load.
                        @endif
                    </span>
                </div>
                <button type="button" wire:click="generateDoorStats" wire:loading.attr="disabled" wire:target="generateDoorStats"
                        style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:none;background:var(--brafa-green-deep,#1E8A3E);color:#fff;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;">
                    <span wire:loading.remove wire:target="generateDoorStats" style="display:inline-flex;align-items:center;gap:6px;">
                        <x-lucide name="zap" size="14" /> {{ $doorReady ? 'Refresh' : 'Generate' }}
                    </span>
                    <span wire:loading wire:target="generateDoorStats">Generating…</span>
                </button>
            </div>
        </div>
    @endif

    @if ($doorReady)
    {{-- Door activity (everyone) --}}
    <div class="prop-stats" style="margin-top: 16px;">
        <div class="stat-card">
            <div class="stat-card__top">
                <span class="stat-card__label">Door opens today</span>
                <x-lucide name="lock" size="14" />
            </div>
            <span class="stat-card__value">{{ number_format($door['today']) }}</span>
        </div>
        <div class="stat-card">
            <div class="stat-card__top">
                <span class="stat-card__label">Avg opens / day</span>
                <x-lucide name="zap" size="14" />
            </div>
            <span class="stat-card__value">{{ number_format($door['avg_per_day']) }}</span>
        </div>
        <div class="stat-card">
            <div class="stat-card__top">
                <span class="stat-card__label">Busiest hour</span>
                <x-lucide name="clock" size="14" />
            </div>
            <span class="stat-card__value">{{ $door['busiest_hour'] ?? '—' }}</span>
        </div>
        <div class="stat-card">
            <div class="stat-card__top">
                <span class="stat-card__label">Busiest day</span>
                <x-lucide name="calendar" size="14" />
            </div>
            <span class="stat-card__value" style="font-size: 20px;">{{ $door['busiestDay'] ?? '—' }}</span>
        </div>
        @if ($door['battery'])
            <div class="stat-card">
                <div class="stat-card__top">
                    <span class="stat-card__label">Locks low on battery</span>
                    <x-lucide name="zap" size="14" />
                </div>
                <span class="stat-card__value">{{ number_format($door['battery']['low']) }}</span>
                <span class="brafa-stat-cell__bar {{ $door['battery']['healthy_pct'] >= 90 ? 'is-high' : '' }}" style="position:static;height:3px;margin-top:8px;border-radius:999px;">
                    <span style="width: {{ max(0, min(100, $door['battery']['healthy_pct'])) }}%;"></span>
                </span>
            </div>
        @endif
    </div>

    {{-- Opening heatmap (everyone) — day-of-week × hour over the last 4 weeks --}}
    <div class="card card--pad-lg" style="margin-top: 24px;">
        <div class="spread" style="margin-bottom: 18px;">
            <h3 class="card-heading" style="margin: 0;">Opening heatmap</h3>
            <span class="eyebrow">last 4 weeks · {{ number_format($door['window_total']) }} opens</span>
        </div>
        @if (!empty($door['needs_index']))
            <span class="subtle" style="font-size: 13px;">
                Door analytics are paused until the database migration runs
                (<span class="mono">php artisan migrate</span>) — the lock-records index isn't in place yet.
            </span>
        @elseif ($door['window_total'] > 0)
            @php
                $hm = $door['heatmap'];
                $hmMax = max(1, $door['heatmap_max']);
                $days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
            @endphp
            <div style="overflow-x: auto;">
                <div style="min-width: 560px;">
                    {{-- hour axis --}}
                    <div style="display:flex; gap:3px; align-items:center; margin-bottom:6px;">
                        <span style="width:34px; flex:none;"></span>
                        @for ($h = 0; $h < 24; $h++)
                            <span style="width:14px; flex:none; font-size:9px; color:var(--fg-subtle); text-align:center;">{{ $h % 6 === 0 ? $h : '' }}</span>
                        @endfor
                    </div>
                    @foreach ($days as $di => $dl)
                        <div style="display:flex; gap:3px; align-items:center; margin-bottom:3px;">
                            <span style="width:34px; flex:none; font-size:11px; color:var(--fg-muted);">{{ $dl }}</span>
                            @for ($h = 0; $h < 24; $h++)
                                @php
                                    $c = $hm[$di][$h] ?? 0;
                                    $a = $c > 0 ? round(0.12 + 0.88 * ($c / $hmMax), 3) : 0;
                                @endphp
                                <span title="{{ $dl }} {{ sprintf('%02d:00', $h) }} · {{ $c }} {{ \Illuminate\Support\Str::plural('open', $c) }}"
                                      style="width:14px; height:14px; flex:none; border-radius:3px; background: {{ $c > 0 ? 'rgba(30,138,62,'.$a.')' : 'var(--bg-sunken)' }};"></span>
                            @endfor
                        </div>
                    @endforeach
                </div>
            </div>
        @else
            <span class="subtle" style="font-size: 13px;">No door openings recorded in the last 4 weeks.</span>
        @endif
    </div>

    {{-- Latest openings (everyone) --}}
    <div class="card" style="margin-top: 24px;">
        <div class="brafa-details-head" style="padding: 18px 24px; border-bottom: 1px solid var(--border); margin: 0;">
            <h3 class="card-heading" style="margin: 0;">Latest openings</h3>
            <span class="eyebrow">live · last {{ count($openings) }}</span>
        </div>
        <div style="overflow-x:auto;">
            <table class="table table--cards">
                <thead>
                    <tr>
                        <th style="width: 130px;">Time</th>
                        <th>Lock</th>
                        <th style="width: 150px;">Room</th>
                        <th style="width: 120px;">Type</th>
                        <th>Who</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($openings as $o)
                        <tr>
                            <td class="mono" style="font-size: 12px; color: var(--fg-muted);" data-label="Time">{{ $o['time'] }}</td>
                            <td class="cards-title"><span style="font-weight: 500;">{{ $o['alias'] }}</span></td>
                            <td data-label="Room">
                                @if ($o['is_room'])
                                    {{ $o['room'] }}
                                @else
                                    <span class="muted" style="font-size: 12.5px;">{{ $o['room'] }}</span>
                                @endif
                            </td>
                            <td data-label="Type">
                                @php
                                    $tIcon = $o['type'] === 'Card' ? 'credit-card' : ($o['type'] === 'Passcode' ? 'lock' : 'zap');
                                @endphp
                                <span style="display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:3px 9px; border-radius:999px; background:var(--bg-sunken); color:var(--fg-muted); white-space:nowrap;">
                                    <x-lucide name="{{ $tIcon }}" size="12" /> {{ $o['type'] }}
                                </span>
                            </td>
                            <td data-label="Who">{{ $o['who'] }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="padding:40px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">
                                No door openings recorded yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @endif {{-- $doorReady --}}

    {{-- Superadmin fleet stats --}}
    @if ($isAdmin && $superStats)
        <div class="prop-stats" style="margin-top: 16px;">
            <div class="stat-card">
                <div class="stat-card__top">
                    <span class="stat-card__label">Active codes</span>
                    <x-lucide name="key" size="14" />
                </div>
                <span class="stat-card__value">{{ number_format($superStats['active_codes']) }}</span>
            </div>
            <div class="stat-card">
                <div class="stat-card__top">
                    <span class="stat-card__label">Avg occupancy</span>
                    <x-lucide name="chart" size="14" />
                </div>
                <span class="stat-card__value">{{ $superStats['avg_occupancy'] }}%</span>
                <span class="brafa-stat-cell__bar {{ $superStats['avg_occupancy'] >= 90 ? 'is-high' : '' }}" style="position:static;height:3px;margin-top:8px;border-radius:999px;">
                    <span style="width: {{ max(0, min(100, $superStats['avg_occupancy'])) }}%;"></span>
                </span>
            </div>
            <div class="stat-card">
                <div class="stat-card__top">
                    <span class="stat-card__label">Departures today</span>
                    <x-lucide name="log-out" size="14" />
                </div>
                <span class="stat-card__value">{{ $superStats['departures'] }}</span>
            </div>
            <div class="stat-card">
                <div class="stat-card__top">
                    <span class="stat-card__label">Upcoming · 7 days</span>
                    <x-lucide name="calendar" size="14" />
                </div>
                <span class="stat-card__value">{{ $superStats['upcoming'] }}</span>
            </div>
        </div>
    @endif

    {{-- Door-code health (everyone) --}}
    @php
        $codeBarClass = fn ($status) => in_array(strtolower($status), ['success', 'sent', 'active'], true)
            ? 'is-high'
            : (in_array(strtolower($status), ['failed', 'unsent'], true) ? 'is-low' : 'is-mid');
        $codeMax = $codeHealth['by_status']->max() ?: 1;
    @endphp
    <div class="card card--pad-lg" style="margin-top: 24px;">
        <div class="spread" style="margin-bottom: 18px;">
            <h3 class="card-heading" style="margin: 0;">Door-code health</h3>
            <span class="eyebrow">
                {{ number_format($codeHealth['total']) }} {{ \Illuminate\Support\Str::plural('code', $codeHealth['total']) }}
                @if ($codeHealth['pending'] > 0) · {{ number_format($codeHealth['pending']) }} pending @endif
            </span>
        </div>
        @if ($codeHealth['total'] > 0)
            <div class="vstack" style="gap: 12px;">
                @foreach ($codeHealth['by_status'] as $status => $count)
                    <div>
                        <div class="spread" style="margin-bottom: 4px;">
                            <span style="font-size: 13px; font-weight: 500; text-transform: capitalize;">{{ $status }}</span>
                            <span class="mono muted" style="font-size: 12px;">{{ number_format($count) }}</span>
                        </div>
                        <div class="occupancy-bar">
                            <span class="occupancy-bar__fill {{ $codeBarClass($status) }}" style="width: {{ round(($count / $codeMax) * 100) }}%;"></span>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <span class="subtle" style="font-size: 13px;">No door codes issued yet.</span>
        @endif
    </div>

    <div class="brafa-dash-row" style="margin-top: 24px;">
        {{-- Most active today --}}
        <div class="card">
            <div class="brafa-details-head" style="padding: 18px 24px; border-bottom: 1px solid var(--border); margin: 0;">
                <h3 class="card-heading" style="margin: 0;">Most active today</h3>
                <a href="{{ route('set-api-key') }}" class="btn btn--ghost btn--sm">
                    View all <x-lucide name="chevron-right" size="12" />
                </a>
            </div>
            <div style="overflow-x:auto;">
                <table class="table table--clickable table--cards">
                    <thead>
                        <tr>
                            <th style="width: 56px;"></th>
                            <th>Property</th>
                            <th style="width: 110px;">Arrivals</th>
                            <th style="width: 170px;">Occupancy</th>
                            <th style="width: 44px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($mostActive as $p)
                            @php
                                $initials = collect(explode(' ', trim((string) $p->name)))
                                    ->filter()->take(2)->map(fn ($x) => strtoupper(mb_substr($x, 0, 1)))->implode('');
                                $tileBg = $brafaTilePalette[crc32((string) $p->id) % count($brafaTilePalette)];
                                $occClass = $p->occupancy >= 90 ? 'is-high' : ($p->occupancy >= 60 ? 'is-mid' : ($p->occupancy > 0 ? 'is-low' : 'is-empty'));
                            @endphp
                            <tr onclick="window.location='{{ route('show-property-details', ['PropertyID' => $p->id]) }}'">
                                <td class="cards-figure">
                                    <div class="prop-logo" style="background: {{ $tileBg }};">
                                        <span class="prop-logo__initials">{{ $initials ?: '?' }}</span>
                                    </div>
                                </td>
                                <td class="cards-title">
                                    <div class="prop-name__main">{{ $p->name }}</div>
                                    <div class="prop-name__sub mono">{{ $p->id }} · {{ $p->api }}</div>
                                </td>
                                <td data-label="Arrivals"><span style="font-family:var(--font-display);font-size:18px;font-weight:500;">{{ $p->arrivals }}</span></td>
                                <td data-label="Occupancy">
                                    <div class="occupancy">
                                        <div class="occupancy-bar">
                                            <span class="occupancy-bar__fill {{ $occClass }}" style="width: {{ max(0, min(100, $p->occupancy)) }}%;"></span>
                                        </div>
                                        <span class="occupancy__pct">{{ $p->occupancy }}%</span>
                                    </div>
                                </td>
                                <td class="cards-hide"><x-lucide name="chevron-right" size="14" /></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" style="padding:40px 24px;text-align:center;color:var(--fg-subtle);font-size:13px;">
                                    No arrivals or in-house guests today.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Needs attention --}}
        <div class="card">
            <div style="padding: 18px 24px; border-bottom: 1px solid var(--border);">
                <h3 class="card-heading" style="margin: 0;">Needs attention</h3>
            </div>
            <div class="brafa-alerts">
                @forelse ($alerts as $alert)
                    <div class="brafa-alert">
                        <div class="brafa-alert__icon brafa-alert__icon--{{ $alert['kind'] }}">
                            <x-lucide name="{{ $alert['icon'] }}" size="15" />
                        </div>
                        <div class="brafa-alert__body">
                            <span class="brafa-alert__title">{{ $alert['title'] }}</span>
                            <span class="brafa-alert__text">{{ $alert['body'] }}</span>
                        </div>
                    </div>
                @empty
                    <div class="brafa-alert">
                        <div class="brafa-alert__icon brafa-alert__icon--green">
                            <x-lucide name="check" size="15" />
                        </div>
                        <div class="brafa-alert__body">
                            <span class="brafa-alert__title">All clear</span>
                            <span class="brafa-alert__text">Nothing needs attention right now.</span>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    {{-- Superadmin: fleet composition --}}
    @if ($isAdmin && $fleet)
        <div class="brafa-dash-row" style="margin-top: 20px;">
            {{-- By integration --}}
            <div class="card card--pad-lg">
                <div class="spread" style="margin-bottom: 16px;">
                    <h3 class="card-heading" style="margin: 0;">By integration</h3>
                    <span class="eyebrow">{{ $fleet['apis'] }} {{ \Illuminate\Support\Str::plural('source', $fleet['apis']) }}</span>
                </div>
                @php $maxApi = $integrations->max() ?: 1; @endphp
                <div class="vstack" style="gap: 12px;">
                    @forelse ($integrations as $api => $count)
                        <div>
                            <div class="spread" style="margin-bottom: 4px;">
                                <span style="font-size: 13px; font-weight: 500; text-transform: capitalize;">{{ $api }}</span>
                                <span class="mono muted" style="font-size: 12px;">{{ $count }}</span>
                            </div>
                            <div class="occupancy-bar">
                                <span class="occupancy-bar__fill is-mid" style="width: {{ round(($count / $maxApi) * 100) }}%;"></span>
                            </div>
                        </div>
                    @empty
                        <span class="subtle" style="font-size: 13px;">No properties yet.</span>
                    @endforelse
                </div>
            </div>

            {{-- Fleet totals --}}
            <div class="card card--pad-lg">
                <h3 class="card-heading" style="margin: 0 0 16px;">Fleet</h3>
                <div class="brafa-kv-grid">
                    <div>
                        <span class="eyebrow">Rooms</span>
                        <span style="font-family:var(--font-display);font-size:24px;">{{ number_format($fleet['rooms']) }}</span>
                    </div>
                    <div>
                        <span class="eyebrow">Staff</span>
                        <span style="font-family:var(--font-display);font-size:24px;">{{ number_format($fleet['staff']) }}</span>
                    </div>
                    <div>
                        <span class="eyebrow">dkPlus customers</span>
                        <span style="font-family:var(--font-display);font-size:24px;">{{ number_format($fleet['customers']) }}</span>
                    </div>
                    @if ($fleetDoor && $doorReady)
                        <div>
                            <span class="eyebrow">Unlocks · 28 days</span>
                            <span style="font-family:var(--font-display);font-size:24px;">{{ number_format($fleetDoor['window_total']) }}</span>
                        </div>
                    @endif
                </div>
                @if ($fleetDoor && $doorReady && $fleetDoor['busiest'])
                    <div class="spread" style="margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);">
                        <span class="eyebrow" style="margin: 0;">Busiest today</span>
                        <span style="font-size: 13px; font-weight: 500;">
                            {{ $fleetDoor['busiest']['name'] }}
                            <span class="mono muted" style="font-size: 12px;">· {{ number_format($fleetDoor['busiest']['unlocks']) }}</span>
                        </span>
                    </div>
                @endif
                @if ($doorReady && $door['battery'])
                    <div style="margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);">
                        <div class="spread" style="margin-bottom: 4px;">
                            <span class="eyebrow" style="margin: 0;">Battery health</span>
                            <span class="mono muted" style="font-size: 12px;">
                                {{ $door['battery']['healthy_pct'] }}% ok · {{ $door['battery']['tracked'] }} tracked
                            </span>
                        </div>
                        <div class="occupancy-bar">
                            <span class="occupancy-bar__fill {{ $door['battery']['healthy_pct'] >= 90 ? 'is-high' : ($door['battery']['healthy_pct'] >= 60 ? 'is-mid' : 'is-low') }}"
                                  style="width: {{ max(0, min(100, $door['battery']['healthy_pct'])) }}%;"></span>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Invoicing (dkPlus) --}}
        @if ($invoicing)
            <div class="card card--pad-lg" style="margin-top: 20px;">
                <div class="spread" style="margin-bottom: 18px;">
                    <h3 class="card-heading" style="margin: 0;">Invoicing</h3>
                    <span class="eyebrow">dkPlus · {{ $invoicing['current_month'] }}</span>
                </div>
                <div class="brafa-dash-row" style="margin-top: 0;">
                    <div class="brafa-kv-grid" style="align-self: center;">
                        <div>
                            <span class="eyebrow">Total invoices</span>
                            <span style="font-family:var(--font-display);font-size:28px;">{{ number_format($invoicing['total']) }}</span>
                        </div>
                        <div>
                            <span class="eyebrow">This month</span>
                            <span style="font-family:var(--font-display);font-size:28px;">{{ number_format($invoicing['this_month']) }}</span>
                        </div>
                        <div>
                            <span class="eyebrow">Properties invoiced</span>
                            <span style="font-family:var(--font-display);font-size:28px;">{{ number_format($invoicing['properties']) }}</span>
                        </div>
                    </div>
                    <div>
                        <span class="eyebrow" style="display:block;margin-bottom:10px;">By status</span>
                        @php $invMax = $invoicing['by_status']->max() ?: 1; @endphp
                        <div class="vstack" style="gap: 10px;">
                            @forelse ($invoicing['by_status'] as $status => $count)
                                <div>
                                    <div class="spread" style="margin-bottom: 4px;">
                                        <span style="font-size: 12.5px; font-weight: 500; text-transform: capitalize;">{{ $status }}</span>
                                        <span class="mono muted" style="font-size: 12px;">{{ $count }}</span>
                                    </div>
                                    <div class="occupancy-bar">
                                        <span class="occupancy-bar__fill {{ in_array($status, ['synced','ready','paid','created']) ? 'is-high' : 'is-mid' }}"
                                              style="width: {{ round(($count / $invMax) * 100) }}%;"></span>
                                    </div>
                                </div>
                            @empty
                                <span class="subtle" style="font-size: 13px;">No invoices yet.</span>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endif
</div>