{{--
    Account dashboard — modular widget grid with shared frame chrome.

    Per Phase 2B:
      - Each widget renders inside a single consistent frame that
        provides the title, description, and (for owner/admin) the
        management controls. Individual widget components return
        only their inner content.
      - Owner/admin sees: Add widget · Move up · Move down · Remove
        (with confirmation step).
      - Agents see widgets but no management chrome.

    Unknown widget types (rows whose `type` doesn't resolve in the
    registry) render a safe amber fallback so a downgraded / legacy
    row cannot crash the dashboard.
--}}
<section class="flex h-full w-full flex-1 flex-col gap-6">
    {{-- Workspace context header --}}
    <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>
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <flux:heading size="xl" level="1">{{ __('Dashboard') }}</flux:heading>
                <flux:subheading>
                    {{ __('Operational overview of your support workspace.') }}
                </flux:subheading>
            </div>

            @if ($this->canManage)
                <flux:button
                    icon="plus"
                    size="sm"
                    variant="primary"
                    wire:click="openAddPanel"
                    data-test="dashboard-add-widget"
                >
                    {{ __('Add widget') }}
                </flux:button>
            @endif
        </div>
    </div>

    {{-- Add-widget picker — owner/admin only. Inline panel
         (modal-free for Phase 2B). Lists only types not already
         enabled in this account. --}}
    @if ($this->canManage && $showAddPanel)
        <div
            class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
            data-test="dashboard-add-widget-panel"
        >
            <div class="flex items-start justify-between gap-3">
                <div>
                    <flux:heading size="sm">{{ __('Add a widget') }}</flux:heading>
                    <flux:subheading class="text-xs">
                        {{ __('Pick a widget type. Duplicates per type are not permitted.') }}
                    </flux:subheading>
                </div>
                <flux:button
                    icon="x-mark"
                    variant="ghost"
                    size="sm"
                    wire:click="closeAddPanel"
                    data-test="dashboard-add-widget-close"
                >
                    {{ __('Close') }}
                </flux:button>
            </div>

            @if ($this->availableWidgetTypes->isEmpty())
                <div class="mt-4 rounded-lg border border-dashed border-zinc-300 p-4 text-center text-xs text-zinc-500 dark:border-zinc-700 dark:text-zinc-400" data-test="dashboard-add-widget-none-available">
                    {{ __('All available widget types are already on your dashboard.') }}
                </div>
            @else
                <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
                    @foreach ($this->availableWidgetTypes as $type)
                        <button
                            type="button"
                            wire:click="addWidget('{{ $type->value }}')"
                            class="flex flex-col items-start gap-1 rounded-lg border border-zinc-200 bg-white p-3 text-left transition hover:border-zinc-300 hover:shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:hover:border-zinc-700"
                            data-test="dashboard-add-widget-option"
                            data-widget-type="{{ $type->value }}"
                        >
                            <div class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                {{ $type->label() }}
                            </div>
                            <div class="text-xs text-zinc-500 dark:text-zinc-400">
                                {{ $type->description() }}
                            </div>
                        </button>
                    @endforeach
                </div>
            @endif
        </div>
    @endif

    {{-- Widget grid. 12-col responsive. Each widget renders inside a
         shared frame (title + description + management controls +
         content). Widget components return only the content. --}}
    <div class="grid grid-cols-12 gap-4" data-test="dashboard-widgets">
        @forelse ($this->widgets as $widget)
            @php
                // Raw string — bypasses the enum cast so an unknown
                // DB value cannot throw during attribute access.
                $rawType = $widget->getRawOriginal('type');
                $componentClass = app(\App\Dashboard\WidgetRegistry::class)->resolve($rawType);
                $typeEnum = \App\Enums\DashboardWidgetType::tryFrom($rawType);
                $isConfirmingRemoval = $confirmingRemovalOf === $widget->id;
            @endphp

            @if ($componentClass)
                <div
                    class="{{ $this->widthClass($widget->width) }}"
                    data-test="dashboard-widget"
                    data-widget-type="{{ $rawType }}"
                    data-widget-id="{{ $widget->id }}"
                >
                    <div class="rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
                        {{-- Frame header: title + description + controls --}}
                        <div class="flex items-start justify-between gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
                            <div class="min-w-0">
                                <flux:heading size="sm" level="2" class="truncate">
                                    {{ $typeEnum?->label() ?? $rawType }}
                                </flux:heading>
                                @if ($typeEnum)
                                    <flux:subheading class="text-xs">{{ $typeEnum->description() }}</flux:subheading>
                                @endif
                            </div>

                            @if ($this->canManage)
                                <div class="flex shrink-0 items-center gap-1" data-test="dashboard-widget-controls">
                                    <flux:button
                                        variant="ghost"
                                        size="xs"
                                        icon="arrow-up"
                                        wire:click="moveWidgetUp({{ $widget->id }})"
                                        :title="__('Move up')"
                                        data-test="dashboard-widget-move-up"
                                    />
                                    <flux:button
                                        variant="ghost"
                                        size="xs"
                                        icon="arrow-down"
                                        wire:click="moveWidgetDown({{ $widget->id }})"
                                        :title="__('Move down')"
                                        data-test="dashboard-widget-move-down"
                                    />
                                    <flux:button
                                        variant="ghost"
                                        size="xs"
                                        icon="trash"
                                        wire:click="confirmRemoveWidget({{ $widget->id }})"
                                        :title="__('Remove')"
                                        data-test="dashboard-widget-remove"
                                    />
                                </div>
                            @endif
                        </div>

                        {{-- Removal confirmation prompt — rendered
                             inside the frame, above the content, so
                             the operator sees which widget is being
                             affected. --}}
                        @if ($this->canManage && $isConfirmingRemoval)
                            <div
                                class="flex flex-wrap items-center justify-between gap-2 border-b border-amber-200 bg-amber-50 px-5 py-3 text-sm text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200"
                                data-test="dashboard-widget-remove-confirm"
                            >
                                <span>{{ __('Remove this widget from your dashboard?') }}</span>
                                <div class="flex items-center gap-2">
                                    <flux:button
                                        variant="ghost"
                                        size="xs"
                                        wire:click="cancelRemoveWidget"
                                        data-test="dashboard-widget-remove-cancel"
                                    >
                                        {{ __('Cancel') }}
                                    </flux:button>
                                    <flux:button
                                        variant="primary"
                                        size="xs"
                                        wire:click="removeWidget({{ $widget->id }})"
                                        data-test="dashboard-widget-remove-confirm-button"
                                    >
                                        {{ __('Remove') }}
                                    </flux:button>
                                </div>
                            </div>
                        @endif

                        {{-- Widget content. Components return inner
                             markup only — no card, no title. --}}
                        <div class="widget-content">
                            @livewire($componentClass, ['dashboardWidgetId' => $widget->id], key('dashboard-widget-'.$widget->id))
                        </div>
                    </div>
                </div>
            @else
                {{-- Safe fallback: the row exists in the DB but the
                     PHP-side registry doesn't know how to render it. --}}
                <div
                    class="col-span-12 rounded-xl border border-dashed border-amber-300 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200"
                    data-test="dashboard-widget-unknown"
                    data-widget-type="{{ $rawType }}"
                    data-widget-id="{{ $widget->id }}"
                >
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="font-medium">{{ __('Unknown widget type') }}</div>
                            <div class="mt-1 text-xs">
                                {{ __('This dashboard row has type :type, which the current build does not know how to render. Remove or upgrade.', ['type' => $rawType]) }}
                            </div>
                        </div>
                        @if ($this->canManage)
                            <flux:button
                                variant="ghost"
                                size="xs"
                                icon="trash"
                                wire:click="confirmRemoveWidget({{ $widget->id }})"
                                :title="__('Remove')"
                                data-test="dashboard-widget-remove"
                            />
                        @endif
                    </div>

                    @if ($this->canManage && $confirmingRemovalOf === $widget->id)
                        <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-xs" data-test="dashboard-widget-remove-confirm">
                            <span>{{ __('Remove this widget from your dashboard?') }}</span>
                            <div class="flex items-center gap-2">
                                <flux:button
                                    variant="ghost"
                                    size="xs"
                                    wire:click="cancelRemoveWidget"
                                    data-test="dashboard-widget-remove-cancel"
                                >
                                    {{ __('Cancel') }}
                                </flux:button>
                                <flux:button
                                    variant="primary"
                                    size="xs"
                                    wire:click="removeWidget({{ $widget->id }})"
                                    data-test="dashboard-widget-remove-confirm-button"
                                >
                                    {{ __('Remove') }}
                                </flux:button>
                            </div>
                        </div>
                    @endif
                </div>
            @endif
        @empty
            <div
                class="col-span-12 rounded-xl border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400"
                data-test="dashboard-empty"
            >
                @if ($this->canManage)
                    {{ __('No widgets yet. Use "Add widget" above to start.') }}
                @else
                    {{ __('No widgets configured for this account yet.') }}
                @endif
            </div>
        @endforelse
    </div>
</section>