@php
    $config = $widget->config ?? [];
    $displayType = $config['display_type'] ?? 'card';
    $displayOptions = $config['display_options'] ?? [];
    $title = $widget->title ?: 'Widget';
    $subtitle = $displayOptions['subtitle'] ?? ($widget->description ?? null);
    $tone = ($widget->id % 6) + 1;
    $widgetEditPayload = [
        'id' => $widget->id,
        'title' => $widget->title,
        'description' => $widget->description,
        'is_active' => $widget->is_active,
        'data_source' => $widget->data_source,
        'width' => $widget->width,
        'config' => $config,
        'excluded_role_ids' => $widget->excluded_role_ids ?? [],
        'excluded_user_ids' => $widget->excluded_user_ids ?? [],
    ];
    $hasActions = ($canEditWidget ?? false) || ($canDeleteWidget ?? false);
    $isBms = $widget->data_source === 'bms' || $widget->data_source === \App\Models\PC\DashboardWidget::SOURCE_BMS;
    $statIcon = $isBms ? 'fa-layer-group' : 'fa-clipboard-list';
    $bmsHint = $isBms
        ? app(\App\Services\DynamicDashboard\DynamicDashboardConfigService::class)->bmsWidgetMatchHint($config)
        : null;
@endphp

@if ($displayType === 'card')
    <div class="dd-widget dd-widget--card dd-stat-card dd-stat-card--tone-{{ $tone }}"
         data-widget-id="{{ $widget->id }}"
         data-widget-json='@json($widgetEditPayload)'>
        <div class="dd-stat-card__inner">
            <div class="dd-stat-card__head">
                <div class="dd-stat-card__brand">
                    <span class="dd-stat-card__icon" aria-hidden="true"><i class="fas {{ $statIcon }}"></i></span>
                    <h3 class="dd-stat-card__title"
                        @if ($isBms) data-title-template="{{ $title }}" @endif>{{ $title }}</h3>
                </div>
                @if ($hasActions)
                    <div class="dd-stat-card__tools">
                        <div class="dd-stat-card__actions">
                            @if ($canEditWidget ?? false)
                                <button type="button" class="dd-stat-card__action dd-widget__drag-handle" title="Drag to reorder" aria-label="Drag to reorder">
                                    <i class="fas fa-grip-vertical"></i>
                                </button>
                            @endif
                            <div class="dropdown position-static">
                                <button class="dd-stat-card__action" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Widget actions" aria-label="Widget actions">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    @if ($canEditWidget ?? false)
                                        <a class="dropdown-item dd-widget-edit" href="javascript:void(0)" data-id="{{ $widget->id }}">
                                            <i class="fas fa-pen mr-2 text-muted"></i>Edit
                                        </a>
                                    @endif
                                    @if ($canDeleteWidget ?? false)
                                        @if ($canEditWidget ?? false)<div class="dropdown-divider"></div>@endif
                                        <a class="dropdown-item dd-widget-delete text-danger" href="javascript:void(0)" data-id="{{ $widget->id }}">
                                            <i class="fas fa-trash-alt mr-2"></i>Delete
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            @if ($subtitle)
                <p class="dd-stat-card__subtitle"
                   @if ($isBms) data-subtitle-template="{{ $subtitle }}" @endif>{{ $subtitle }}</p>
            @endif
            <div class="dd-widget__body" data-display-type="card">
                <div class="dd-widget__content"></div>
                <div class="dd-widget__loading dd-widget__overlay" aria-live="polite">
                    <div class="dd-spinner"></div>
                </div>
                <div class="dd-widget__error dd-widget__overlay d-none" role="alert">
                    <div class="dd-widget__error-box">
                        <i class="fas fa-exclamation-circle dd-widget__error-icon" aria-hidden="true"></i>
                        <p class="dd-widget__error-text">Unable to load this widget.</p>
                        <button type="button" class="btn btn-sm btn-outline-primary dd-widget-retry">Retry</button>
                    </div>
                </div>
            </div>
            @if ($bmsHint)
                @include('dynamic-dashboard.partials.bms-match-hint', ['widget' => $widget, 'hint' => $bmsHint])
            @endif
        </div>
    </div>
@else
    <div class="dd-widget dd-widget--{{ $displayType }} dd-panel h-100"
         data-widget-id="{{ $widget->id }}"
         data-widget-json='@json($widgetEditPayload)'>
        <div class="dd-panel__header">
            <div class="dd-panel__meta">
                <div class="dd-panel__title-row">
                    <h5 class="dd-panel__title"
                        @if ($isBms) data-title-template="{{ $title }}" @endif>{{ $title }}</h5>
                </div>
                @if ($subtitle)
                    <p class="dd-panel__subtitle"
                       @if ($isBms) data-subtitle-template="{{ $subtitle }}" @endif>{{ $subtitle }}</p>
                @endif
            </div>
            @if ($hasActions)
                <div class="dd-panel__actions">
                    @if ($canEditWidget ?? false)
                        <button type="button" class="dd-panel__action-btn dd-widget__drag-handle" title="Drag to reorder" aria-label="Drag to reorder">
                            <i class="fas fa-grip-vertical"></i>
                        </button>
                    @endif
                    <div class="dropdown position-static">
                        <button class="dd-panel__action-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Widget actions" aria-label="Widget actions">
                            <i class="fas fa-ellipsis-h"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                            @if ($canEditWidget ?? false)
                                <a class="dropdown-item dd-widget-edit" href="javascript:void(0)" data-id="{{ $widget->id }}">
                                    <i class="fas fa-pen mr-2 text-muted"></i>Edit
                                </a>
                            @endif
                            @if ($canDeleteWidget ?? false)
                                @if ($canEditWidget ?? false)<div class="dropdown-divider"></div>@endif
                                <a class="dropdown-item dd-widget-delete text-danger" href="javascript:void(0)" data-id="{{ $widget->id }}">
                                    <i class="fas fa-trash-alt mr-2"></i>Delete
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <div class="dd-widget__body" data-display-type="{{ $displayType }}">
            <div class="dd-widget__content"></div>
            <div class="dd-widget__loading dd-widget__overlay" aria-live="polite">
                <div class="dd-spinner"></div>
                <span>Loading…</span>
            </div>
            <div class="dd-widget__error dd-widget__overlay d-none" role="alert">
                <div class="dd-widget__error-box">
                    <i class="fas fa-exclamation-circle dd-widget__error-icon" aria-hidden="true"></i>
                    <p class="dd-widget__error-text">Unable to load this widget.</p>
                    <button type="button" class="btn btn-sm btn-outline-primary dd-widget-retry">Retry</button>
                </div>
            </div>
        </div>
        @if ($bmsHint)
            @include('dynamic-dashboard.partials.bms-match-hint', ['widget' => $widget, 'hint' => $bmsHint])
        @endif
    </div>
@endif