<div class="flex flex-col gap-4 p-4 md:p-6">
    <div class="flex flex-col gap-1 md:flex-row md:items-start md:justify-between">
        <div>
            <h2 class="text-base font-bold text-gray-900 dark:text-gray-100">Connection Logs</h2>
            <p class="text-sm text-gray-500 dark:text-gray-300">Review connection tests, device sync outcomes, and saved audit activity for this provider connection.</p>
        </div>
        <Button @icon="refresh" @text="Refresh" @size="xs" @onClick={{this.refresh}} />
    </div>

    <section class="grid grid-cols-1 gap-3 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-[102px] overflow-hidden rounded-md border bg-white shadow-sm dark:bg-gray-800">
                <div class="flex h-full items-start justify-between gap-3 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-2 text-2xl 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>

    <section class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <div class="border-b border-gray-200 px-4 py-3 dark:border-gray-700">
            <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100">Saved Activity</h3>
            <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Operational server logs are not shown here; this view only includes persisted audit and sync/test summary data.</p>
        </div>

        {{#if this.hasLogs}}
            <div class="divide-y divide-gray-100 dark:divide-gray-700">
                {{#each this.logs as |log|}}
                    <article class="flex flex-col gap-3 px-4 py-3 md:flex-row md:items-start md:justify-between">
                        <div class="flex min-w-0 items-start gap-3">
                            <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-gray-100 text-gray-600 dark:bg-gray-900 dark:text-gray-300">
                                <FaIcon @icon={{or log.icon "circle-info"}} />
                            </div>
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h4 class="text-sm font-bold text-gray-900 dark:text-gray-100">{{log.label}}</h4>
                                    <Badge @status={{or log.status "default"}} @hideStatusDot={{true}}>{{or log.status "log"}}</Badge>
                                </div>
                                <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-300">{{log.description}}</p>
                                {{#if log.metadata.job_id}}
                                    <div class="mt-2 font-mono text-[11px] text-gray-400 dark:text-gray-500">Job {{log.metadata.job_id}}</div>
                                {{/if}}
                            </div>
                        </div>
                        <time class="flex-shrink-0 text-xs text-gray-400 dark:text-gray-500">{{n-a (format-date-fns log.created_at "dd MMM yyyy, HH:mm")}}</time>
                    </article>
                {{/each}}
            </div>
        {{else}}
            <div class="p-4">
                <Telematic::TabEmptyState
                    @tone="info"
                    @icon="list"
                    @title="No saved logs yet"
                    @message="Run a connection test or sync devices to create persisted log entries for this provider connection."
                    @primaryText="Refresh"
                    @primaryIcon="refresh"
                    @primaryAction={{this.refresh}}
                />
            </div>
        {{/if}}
    </section>
</div>
