@php
    /** @var \App\Models\Account $account */
    $account = app(\App\Support\CurrentAccount::class)->get();
    $user = auth()->user();
    $membership = $account->users()->where('users.id', $user->id)->first();
    $role = $membership?->pivot->role ?? '—';
    $storeCount = \App\Models\Store::count();
@endphp

<x-layouts::app :title="__('Dashboard')">
    <div class="flex h-full w-full flex-1 flex-col gap-6 rounded-xl">
        {{-- Header: workspace context + page heading --}}
        <div class="flex flex-col gap-2">
            <div class="flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400" data-test="tenant-context">
                <flux:icon.building-office-2 class="size-3.5" />
                <span>{{ __('Workspace') }}:</span>
                <flux:badge color="zinc" size="sm" data-test="tenant-context-name">{{ $account->name }}</flux:badge>
                <span class="text-zinc-400">·</span>
                <span class="font-mono text-zinc-500 dark:text-zinc-400" data-test="tenant-context-slug">{{ $account->slug }}</span>
            </div>
            <flux:heading size="xl" level="1">{{ __('Dashboard') }}</flux:heading>
            <flux:subheading>{{ __('Overview of your support workspace.') }}</flux:subheading>
        </div>

        {{-- Stat cards --}}
        <div class="grid auto-rows-min gap-4 md:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-xl border border-neutral-200 p-5 dark:border-neutral-700" data-test="stat-account-name">
                <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Account') }}</div>
                <div class="mt-2 truncate text-2xl font-semibold">{{ $account->name }}</div>
                <div class="mt-1 truncate font-mono text-xs text-zinc-500 dark:text-zinc-400">{{ $account->slug }}</div>
            </div>

            <div class="rounded-xl border border-neutral-200 p-5 dark:border-neutral-700" data-test="stat-role">
                <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Your role') }}</div>
                <div class="mt-2 text-2xl font-semibold capitalize">{{ $role }}</div>
                <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ __('within this account') }}</div>
            </div>

            <div class="rounded-xl border border-neutral-200 p-5 dark:border-neutral-700" data-test="stat-store-count">
                <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Stores') }}</div>
                <div class="mt-2 text-2xl font-semibold">{{ $storeCount }}</div>
                <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                    <flux:link :href="route('stores.index')" wire:navigate>{{ __('Manage stores') }}</flux:link>
                </div>
            </div>

            <div class="rounded-xl border border-neutral-200 p-5 dark:border-neutral-700" data-test="stat-created">
                <div class="text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ __('Account created') }}</div>
                <div class="mt-2 text-2xl font-semibold">{{ $account->created_at->format('M j, Y') }}</div>
                <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{{ $account->created_at->diffForHumans() }}</div>
            </div>
        </div>

        {{-- Empty-state pointing at the inbox. Email ingestion, AI
             drafts and integrations still land in later steps. --}}
        <div class="rounded-xl border border-dashed border-neutral-200 p-8 text-center dark:border-neutral-700">
            <flux:heading size="lg">{{ __('Jump into the inbox') }}</flux:heading>
            <flux:subheading>{{ __('Manage tickets in your workspace. Email ingestion, AI drafts and integrations arrive in later steps.') }}</flux:subheading>
            <div class="mt-4 flex justify-center gap-2">
                <flux:button :href="route('inbox.index')" variant="primary" size="sm" wire:navigate data-test="dashboard-cta-inbox">
                    {{ __('Open inbox') }}
                </flux:button>
                @can('manageAccountSettings', $account)
                    <flux:button :href="route('account.edit')" variant="ghost" size="sm" wire:navigate data-test="dashboard-cta-account">
                        {{ __('Account settings') }}
                    </flux:button>
                @endcan
            </div>
        </div>
    </div>
</x-layouts::app>