<div class="flex flex-col gap-3 p-3">
    <div class="flex flex-col gap-1">
        <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Event Review + Triage</h2>
        <p class="text-xs text-gray-500 dark:text-gray-300">Warning signals, diagnostics, and unprocessed telemetry.</p>
    </div>

    <section class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
        {{#each this.metrics as |metric|}}
            <div class="fleet-ops-widget fleet-ops-kpi-tile fleetops-connectivity-kpi-tile {{metric.accentClass}} relative min-h-[82px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
                <div class="flex h-full items-start justify-between gap-2 p-3">
                    <div class="min-w-0">
                        <div class="truncate text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400">{{metric.label}}</div>
                        <div class="mt-1 text-xl font-extrabold leading-none text-gray-900 dark:text-gray-50">{{metric.value}}</div>
                    </div>
                    <div class="fleetops-connectivity-kpi-icon flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-[13px]">
                        <FaIcon @icon={{metric.icon}} />
                    </div>
                </div>
            </div>
        {{/each}}
    </section>

    {{#if this.hasHealthyEventState}}
        <Telematic::TabEmptyState
            @tone="success"
            @icon="check"
            @title="No warning or unprocessed events"
            @message="Recent telemetry is reviewed and no warning-level events are currently visible for this device."
            @primaryText="Refresh"
            @primaryIcon="refresh"
            @primaryAction={{this.refresh}}
        />
    {{/if}}

    <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="fleetops-provider-connections-header border-b border-gray-200 px-3 py-2 dark:border-gray-700">
            <div>
                <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Telemetry Events</h3>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-300">Filter by type, severity, processed state, and date.</p>
            </div>
            <div class="fleetops-provider-connections-actions flex min-w-0 flex-wrap items-center gap-1 lg:ml-auto lg:flex-nowrap lg:justify-end">
                <Layout::Resource::TabularActions
                    @title="Telemetry Events"
                    @searchQuery={{this.events_query}}
                    @onSearch={{perform this.searchTask}}
                    @columns={{this.columns}}
                    @page={{this.events_page}}
                    @onPageChange={{fn (mut this.events_page)}}
                    @actionButtons={{this.actionButtons}}
                    @bulkActions={{this.bulkActions}}
                    @controller={{this}}
                    @searchInputClass="fleetops-provider-connections-search"
                    @filterPickerButtonClass="fleetops-provider-connections-action-button"
                    @columnPickerButtonClass="fleetops-provider-connections-action-button"
                    @filterPickerSize="sm"
                    @columnPickerSize="sm"
                />
            </div>
        </div>

        <Layout::Resource::Tabular
            @resource="device-event"
            @title="Telemetry Events"
            @data={{@model}}
            @columns={{this.columns}}
            @page={{this.events_page}}
            @onPageChange={{fn (mut this.events_page)}}
            @controller={{this}}
            @withoutHeader={{true}}
            @tableWrapperClass="no-table-extra-spacing"
            @emptyStateComponent={{component
                "table/empty-state"
                variant="compact"
                icon="bolt"
                title="No telemetry events"
                description="Events appear after this device reports provider activity."
                filteredTitle="No events match your filters"
                filteredDescription="Adjust the search, severity, or date filters to review other events."
                primaryText="Refresh"
                primaryIcon="refresh"
                primaryAction=this.refresh
            }}
        />
    </section>
</div>
