import type { Component } from 'solid-js';
import { For, Show, createMemo, createSignal, createEffect, on, onMount, onCleanup } from 'solid-js';
import { useNavigate } from '@solidjs/router';
import type { Host } from '@/types/api';
import { formatBytes, formatPercent, formatRelativeTime, formatUptime } from '@/utils/format';
import { Card } from '@/components/shared/Card';
import { EmptyState } from '@/components/shared/EmptyState';
import { MetricBar } from '@/components/Dashboard/MetricBar';
import { StackedDiskBar } from '@/components/Dashboard/StackedDiskBar';
import { HostsFilter } from './HostsFilter';
import { useWebSocket } from '@/App';
import { StatusDot } from '@/components/shared/StatusDot';
import { getHostStatusIndicator } from '@/utils/status';
import { MetricText } from '@/components/shared/responsive';
import { StackedMemoryBar } from '@/components/Dashboard/StackedMemoryBar';
import { EnhancedCPUBar } from '@/components/Dashboard/EnhancedCPUBar';
import { TemperatureGauge } from '@/components/shared/TemperatureGauge';
import { useBreakpoint } from '@/hooks/useBreakpoint';

// Global drawer state to persist across re-renders
const drawerState = new Map<string, boolean>();

type SortKey = 'name' | 'platform' | 'cpu' | 'memory' | 'disk' | 'uptime';

interface HostsOverviewProps {
  hosts: Host[];
  connectionHealth: Record<string, boolean>;
}

export const HostsOverview: Component<HostsOverviewProps> = (props) => {
  const navigate = useNavigate();
  const wsContext = useWebSocket();
  const [search, setSearch] = createSignal('');
  const [statusFilter, setStatusFilter] = createSignal<'all' | 'online' | 'degraded' | 'offline'>('all');
  const [sortKey, setSortKey] = createSignal<SortKey>('name');
  const [sortDirection, setSortDirection] = createSignal<'asc' | 'desc'>('asc');
  const { isMobile } = useBreakpoint();

  const handleSort = (key: SortKey) => {
    if (sortKey() === key) {
      setSortDirection(sortDirection() === 'asc' ? 'desc' : 'asc');
    } else {
      setSortKey(key);
      setSortDirection('asc');
    }
  };

  const renderSortIndicator = (key: SortKey) => {
    if (sortKey() !== key) return null;
    return sortDirection() === 'asc' ? '▲' : '▼';
  };

  // Keyboard listener to auto-focus search
  let searchInputRef: HTMLInputElement | undefined;

  const handleKeyDown = (e: KeyboardEvent) => {
    // Don't interfere if user is already typing in an input
    const target = e.target as HTMLElement;
    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
      return;
    }

    // Don't interfere with modifier key shortcuts (except Shift for capitals)
    if (e.ctrlKey || e.metaKey || e.altKey) {
      return;
    }

    // Focus search on printable characters and start typing
    if (e.key.length === 1 && searchInputRef) {
      e.preventDefault();
      searchInputRef.focus();
      setSearch(search() + e.key);
    }
  };

  onMount(() => {
    document.addEventListener('keydown', handleKeyDown);
  });

  onCleanup(() => {
    document.removeEventListener('keydown', handleKeyDown);
  });

  const connected = () => wsContext.connected();
  const reconnecting = () => wsContext.reconnecting();

  const isLoading = createMemo(() => {
    return !connected() && !reconnecting();
  });

  const sortedHosts = createMemo(() => {
    const hosts = [...props.hosts];
    const key = sortKey();
    const direction = sortDirection();

    return hosts.sort((a, b) => {
      let comparison = 0;
      switch (key) {
        case 'name':
          comparison = (a.displayName || a.hostname || a.id).localeCompare(b.displayName || b.hostname || b.id);
          break;
        case 'platform':
          comparison = (a.platform || '').localeCompare(b.platform || '');
          break;
        case 'cpu':
          comparison = (a.cpuUsage ?? 0) - (b.cpuUsage ?? 0);
          break;
        case 'memory':
          comparison = (a.memory?.usage ?? 0) - (b.memory?.usage ?? 0);
          break;
        case 'disk': {
          const aDisk = a.disks?.reduce((sum, d) => sum + (d.usage ?? 0), 0) ?? 0;
          const bDisk = b.disks?.reduce((sum, d) => sum + (d.usage ?? 0), 0) ?? 0;
          comparison = aDisk - bDisk;
          break;
        }
        case 'uptime':
          comparison = (a.uptimeSeconds ?? 0) - (b.uptimeSeconds ?? 0);
          break;
        default:
          comparison = 0;
      }
      return direction === 'asc' ? comparison : -comparison;
    });
  });

  const matchesSearch = (host: Host) => {
    const term = search().toLowerCase();
    if (!term) return true;

    const hostname = (host.hostname || '').toLowerCase();
    const displayName = (host.displayName || '').toLowerCase();
    const platform = (host.platform || '').toLowerCase();
    const osName = (host.osName || '').toLowerCase();

    return (
      hostname.includes(term) ||
      displayName.includes(term) ||
      platform.includes(term) ||
      osName.includes(term)
    );
  };

  const matchesStatus = (host: Host) => {
    const filter = statusFilter();
    if (filter === 'all') return true;
    const normalized = (host.status || '').toLowerCase();
    return normalized === filter;
  };

  const filteredHosts = createMemo(() => {
    return sortedHosts().filter((host) => matchesSearch(host) && matchesStatus(host));
  });

  const getTemperatureValue = (host: Host) => {
    if (!host.sensors?.temperatureCelsius) return null;
    const temps = host.sensors.temperatureCelsius;

    // Try to find a "package" or "composite" temperature first
    const packageKey = Object.keys(temps).find(k =>
      k.toLowerCase().includes('package') ||
      k.toLowerCase().includes('composite') ||
      k.toLowerCase().includes('tctl')
    );

    if (packageKey) return temps[packageKey];

    // Fallback: average of all core temps
    const coreKeys = Object.keys(temps).filter(k => k.toLowerCase().includes('core'));
    if (coreKeys.length > 0) {
      const sum = coreKeys.reduce((acc, k) => acc + temps[k], 0);
      return sum / coreKeys.length;
    }

    // Fallback: just take the first available value if any
    const values = Object.values(temps);
    if (values.length > 0) return values[0];

    return null;
  };

  const getDiskStats = (host: Host) => {
    if (!host.disks || host.disks.length === 0) return { percent: 0, used: 0, total: 0 };
    const totalUsed = host.disks.reduce((sum, d) => sum + (d.used ?? 0), 0);
    const totalSize = host.disks.reduce((sum, d) => sum + (d.total ?? 0), 0);
    return {
      percent: totalSize > 0 ? (totalUsed / totalSize) * 100 : 0,
      used: totalUsed,
      total: totalSize
    };
  };

  const thClass = "px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap";

  return (
    <div class="space-y-4">
      <Show when={isLoading()}>
        <Card padding="lg">
          <EmptyState
            icon={
              <svg
                class="h-12 w-12 animate-spin text-blue-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <circle
                  class="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  stroke-width="4"
                />
                <path
                  class="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                />
              </svg>
            }
            title={reconnecting() ? 'Reconnecting to host agents...' : 'Loading host data...'}
            description={
              reconnecting()
                ? 'Re-establishing metrics from the monitoring service.'
                : connected()
                  ? 'Waiting for the first host update.'
                  : 'Connecting to the monitoring service.'
            }
          />
        </Card>
      </Show>

      <Show when={!isLoading()}>
        <Show
          when={sortedHosts().length === 0}
          fallback={
            <>
              {/* Filters */}
              <HostsFilter
                search={search}
                setSearch={setSearch}
                statusFilter={statusFilter}
                setStatusFilter={setStatusFilter}
                onReset={() => setSearch('')}
                searchInputRef={(el) => (searchInputRef = el)}
              />

              {/* Host Table */}
              <Show
                when={filteredHosts().length > 0}
                fallback={
                  <Card padding="lg">
                    <EmptyState
                      title="No hosts found"
                      description={
                        search().trim()
                          ? 'No hosts match your search.'
                          : 'No hosts available'
                      }
                    />
                  </Card>
                }
              >
                <Card padding="none" tone="glass" class="overflow-hidden">
                  <div class="overflow-x-auto">
                    <table class="w-full border-collapse whitespace-nowrap">
                      <thead>
                        <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
                          <th
                            class={`${thClass} text-left pl-4`}
                            onClick={() => handleSort('name')}
                          >
                            Host {renderSortIndicator('name')}
                          </th>
                          <th class={thClass} onClick={() => handleSort('platform')}>
                            Platform {renderSortIndicator('platform')}
                          </th>
                          <th class={thClass} onClick={() => handleSort('cpu')}>
                            CPU {renderSortIndicator('cpu')}
                          </th>
                          <th class={thClass} onClick={() => handleSort('memory')}>
                            Memory {renderSortIndicator('memory')}
                          </th>
                          <th class={thClass}>
                            Temp
                          </th>
                          <th class={thClass} onClick={() => handleSort('disk')}>
                            Disk {renderSortIndicator('disk')}
                          </th>
                          <th class={`${thClass} text-right pr-4`} onClick={() => handleSort('uptime')}>
                            Uptime {renderSortIndicator('uptime')}
                          </th>
                        </tr>
                      </thead>
                      <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <For each={filteredHosts()}>
                          {(host) => {
                            // Drawer state
                            const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(host.id) ?? false);

                            // Check if we have additional info to show in drawer
                            const hasDrawerContent = createMemo(() => {
                              return (
                                (host.disks && host.disks.length > 0) ||
                                (host.networkInterfaces && host.networkInterfaces.length > 0) ||
                                (host.raid && host.raid.length > 0) ||
                                host.loadAverage ||
                                host.cpuCount ||
                                host.kernelVersion ||
                                host.architecture ||
                                host.agentVersion ||
                                (host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0)
                              );
                            });

                            const toggleDrawer = (event: MouseEvent) => {
                              if (!hasDrawerContent()) return;
                              const target = event.target as HTMLElement;
                              if (target.closest('a, button, [data-prevent-toggle]')) {
                                return;
                              }
                              setDrawerOpen((prev) => !prev);
                            };

                            // Sync drawer state
                            createEffect(on(() => host.id, (id) => {
                              const stored = drawerState.get(id);
                              if (stored !== undefined) {
                                setDrawerOpen(stored);
                              } else {
                                setDrawerOpen(false);
                              }
                            }));

                            createEffect(() => {
                              drawerState.set(host.id, drawerOpen());
                            });

                            const rowClass = () => {
                              const base = 'transition-all duration-200';
                              const hover = 'hover:bg-gray-50 dark:hover:bg-gray-800/50';
                              const clickable = hasDrawerContent() ? 'cursor-pointer' : '';
                              const expanded = drawerOpen() ? 'bg-gray-50 dark:bg-gray-800/40' : '';
                              return `${base} ${hover} ${clickable} ${expanded}`;
                            };

                            const hostStatus = createMemo(() => getHostStatusIndicator(host));
                            const cpuPercent = host.cpuUsage ?? 0;
                            const memPercent = host.memory?.usage ?? 0;
                            const tempValue = getTemperatureValue(host);
                            const diskStats = getDiskStats(host);

                            return (
                              <>
                                <tr
                                  class={rowClass()}
                                  onClick={toggleDrawer}
                                  aria-expanded={drawerOpen()}
                                >
                                  {/* Host Name */}
                                  <td class="pl-4 pr-2 py-1 align-middle">
                                    <div class="flex items-center gap-2 min-w-0">
                                      <StatusDot
                                        variant={hostStatus().variant}
                                        title={hostStatus().label}
                                        ariaLabel={hostStatus().label}
                                        size="xs"
                                      />
                                      <div class="min-w-0">
                                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 whitespace-nowrap">
                                          {host.displayName || host.hostname || host.id}
                                        </p>
                                        <Show when={host.displayName && host.displayName !== host.hostname}>
                                          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
                                            {host.hostname}
                                          </p>
                                        </Show>
                                        <Show when={host.lastSeen}>
                                          <p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
                                            Updated {formatRelativeTime(host.lastSeen!)}
                                          </p>
                                        </Show>
                                      </div>
                                    </div>
                                  </td>

                                  {/* Platform */}
                                  <td class="px-2 py-1 align-middle">
                                    <div class="text-xs text-gray-700 dark:text-gray-300">
                                      <p class="font-medium capitalize whitespace-nowrap">{host.platform || '—'}</p>
                                      <Show when={host.osName}>
                                        <p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
                                          {host.osName} {host.osVersion}
                                        </p>
                                      </Show>
                                    </div>
                                  </td>

                                  {/* CPU */}
                                  <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
                                    <Show when={isMobile()}>
                                      <div class="md:hidden flex justify-center">
                                        <MetricText value={cpuPercent} type="cpu" />
                                      </div>
                                    </Show>
                                    <div class="hidden md:block">
                                      <EnhancedCPUBar
                                        usage={cpuPercent}
                                        loadAverage={host.loadAverage?.[0]}
                                        cores={host.cpuCount}
                                      />
                                    </div>
                                  </td>

                                  {/* Memory */}
                                  <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
                                    <Show when={isMobile()}>
                                      <div class="md:hidden flex justify-center">
                                        <MetricText value={memPercent} type="memory" />
                                      </div>
                                    </Show>
                                    <div class="hidden md:block">
                                      <StackedMemoryBar
                                        used={host.memory?.used || 0}
                                        total={host.memory?.total || 0}
                                        balloon={host.memory?.balloon || 0}
                                        swapUsed={host.memory?.swapUsed || 0}
                                        swapTotal={host.memory?.swapTotal || 0}
                                      />
                                    </div>
                                  </td>

                                  {/* Temperature */}
                                  <td class="px-2 py-1 align-middle">
                                    <div class="flex justify-center">
                                      <Show when={tempValue !== null} fallback={<span class="text-xs text-gray-400">—</span>}>
                                        <TemperatureGauge value={tempValue!} />
                                      </Show>
                                    </div>
                                  </td>

                                  {/* Disk */}
                                  <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
                                    <Show when={isMobile()}>
                                      <div class="md:hidden flex justify-center">
                                        <MetricText value={diskStats.percent} type="disk" />
                                      </div>
                                    </Show>
                                    <div class="hidden md:block">
                                      <StackedDiskBar
                                        disks={host.disks}
                                        aggregateDisk={{
                                          total: diskStats.total,
                                          used: diskStats.used,
                                          free: diskStats.total - diskStats.used,
                                          usage: diskStats.percent / 100
                                        }}
                                      />
                                    </div>
                                  </td>

                                  {/* Uptime */}
                                  <td class="px-2 py-1 pr-4 align-middle">
                                    <div class="flex justify-end">
                                      <Show
                                        when={host.uptimeSeconds}
                                        fallback={<span class="text-xs text-gray-400">—</span>}
                                      >
                                        <span class="text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
                                          {formatUptime(host.uptimeSeconds!)}
                                        </span>
                                      </Show>
                                    </div>
                                  </td>
                                </tr>

                                {/* Drawer - Additional Info */}
                                <Show when={drawerOpen() && hasDrawerContent()}>
                                  <tr>
                                    <td colspan={7} class="p-0">
                                      <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3 border-t border-gray-100 dark:border-gray-800/50">
                                        <div class="flex flex-wrap justify-start gap-3">
                                          {/* System Info */}
                                          <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                                            <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">System</div>
                                            <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
                                              <Show when={host.cpuCount}>
                                                <div class="flex items-center justify-between gap-2">
                                                  <span class="font-medium text-gray-700 dark:text-gray-200">CPUs</span>
                                                  <span class="text-right text-gray-600 dark:text-gray-300">{host.cpuCount}</span>
                                                </div>
                                              </Show>
                                              <Show when={host.loadAverage && host.loadAverage.length > 0}>
                                                <div class="flex items-center justify-between gap-2">
                                                  <span class="font-medium text-gray-700 dark:text-gray-200">Load Avg</span>
                                                  <span class="text-right text-gray-600 dark:text-gray-300">{host.loadAverage!.map(l => l.toFixed(2)).join(', ')}</span>
                                                </div>
                                              </Show>
                                              <Show when={host.architecture}>
                                                <div class="flex items-center justify-between gap-2">
                                                  <span class="font-medium text-gray-700 dark:text-gray-200">Arch</span>
                                                  <span class="text-right text-gray-600 dark:text-gray-300">{host.architecture}</span>
                                                </div>
                                              </Show>
                                              <Show when={host.kernelVersion}>
                                                <div class="flex items-center justify-between gap-2">
                                                  <span class="font-medium text-gray-700 dark:text-gray-200">Kernel</span>
                                                  <span class="text-right text-gray-600 dark:text-gray-300 truncate">{host.kernelVersion}</span>
                                                </div>
                                              </Show>
                                              <Show when={host.agentVersion}>
                                                <div class="flex items-center justify-between gap-2">
                                                  <span class="font-medium text-gray-700 dark:text-gray-200">Agent</span>
                                                  <span class="text-right text-gray-600 dark:text-gray-300">{host.agentVersion}</span>
                                                </div>
                                              </Show>
                                            </div>
                                          </div>

                                          {/* Network Interfaces */}
                                          <Show when={host.networkInterfaces && host.networkInterfaces.length > 0}>
                                            <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                                              <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Network</div>
                                              <div class="mt-2 space-y-2 text-[11px]">
                                                <For each={host.networkInterfaces?.slice(0, 4)}>
                                                  {(iface) => (
                                                    <div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
                                                      <div class="font-medium text-gray-700 dark:text-gray-200">{iface.name}</div>
                                                      <Show when={iface.addresses && iface.addresses.length > 0}>
                                                        <div class="flex flex-wrap gap-1 mt-1 text-[10px]">
                                                          <For each={iface.addresses}>
                                                            {(addr) => (
                                                              <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
                                                                {addr}
                                                              </span>
                                                            )}
                                                          </For>
                                                        </div>
                                                      </Show>
                                                    </div>
                                                  )}
                                                </For>
                                              </div>
                                            </div>
                                          </Show>

                                          {/* Disk Info */}
                                          <Show when={host.disks && host.disks.length > 0}>
                                            <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                                              <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Disks</div>
                                              <div class="mt-2 space-y-2 text-[11px]">
                                                <For each={host.disks?.slice(0, 3)}>
                                                  {(disk) => {
                                                    const diskPercent = () => disk.usage ?? 0;
                                                    return (
                                                      <div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
                                                        <div class="flex items-center justify-between">
                                                          <span class="font-medium text-gray-700 dark:text-gray-200 truncate">{disk.mountpoint || disk.device}</span>
                                                          <span class="text-[10px] text-gray-500 dark:text-gray-400">
                                                            {formatBytes(disk.used ?? 0, 0)} / {formatBytes(disk.total ?? 0, 0)}
                                                          </span>
                                                        </div>
                                                        <Show when={diskPercent() > 0}>
                                                          <div class="mt-1">
                                                            <MetricBar
                                                              value={diskPercent()}
                                                              label={formatPercent(diskPercent())}
                                                              type="disk"
                                                              class="max-w-none"
                                                            />
                                                          </div>
                                                        </Show>
                                                      </div>
                                                    );
                                                  }}
                                                </For>
                                              </div>
                                            </div>
                                          </Show>

                                          {/* Temperature Sensors */}
                                          <Show when={host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0}>
                                            <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                                              <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Temperatures</div>
                                              <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
                                                <For each={Object.entries(host.sensors!.temperatureCelsius!).slice(0, 5)}>
                                                  {([name, temp]) => (
                                                    <div class="flex items-center justify-between gap-2">
                                                      <span class="font-medium text-gray-700 dark:text-gray-200 truncate">{name}</span>
                                                      <span class={`text-right ${temp > 80 ? 'text-red-600 dark:text-red-400 font-semibold' : 'text-gray-600 dark:text-gray-300'}`}>
                                                        {temp.toFixed(1)}°C
                                                      </span>
                                                    </div>
                                                  )}
                                                </For>
                                              </div>
                                            </div>
                                          </Show>

                                          {/* RAID Arrays */}
                                          <Show when={host.raid && host.raid.length > 0}>
                                            <For each={host.raid!}>
                                              {(array) => {
                                                const isDegraded = () => array.state.toLowerCase().includes('degraded') || array.failedDevices > 0;
                                                const isRebuilding = () => array.state.toLowerCase().includes('recover') || array.state.toLowerCase().includes('resync') || array.rebuildPercent > 0;
                                                const isHealthy = () => !isDegraded() && !isRebuilding() && array.state.toLowerCase().includes('clean');

                                                const stateColor = () => {
                                                  if (isDegraded()) return 'text-red-600 dark:text-red-400 font-semibold';
                                                  if (isRebuilding()) return 'text-amber-600 dark:text-amber-400 font-semibold';
                                                  if (isHealthy()) return 'text-green-600 dark:text-green-400';
                                                  return 'text-gray-600 dark:text-gray-300';
                                                };

                                                return (
                                                  <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                                                    <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                                                      RAID {array.level.replace('raid', '')} - {array.device}
                                                    </div>
                                                    <div class="mt-2 space-y-1 text-[11px]">
                                                      <div class="flex items-center justify-between gap-2">
                                                        <span class="font-medium text-gray-700 dark:text-gray-200">State</span>
                                                        <span class={stateColor()}>{array.state}</span>
                                                      </div>
                                                      <div class="flex items-center justify-between gap-2">
                                                        <span class="font-medium text-gray-700 dark:text-gray-200">Devices</span>
                                                        <span class="text-gray-600 dark:text-gray-300">
                                                          {array.activeDevices}/{array.totalDevices}
                                                          {array.failedDevices > 0 && <span class="text-red-600 dark:text-red-400"> ({array.failedDevices} failed)</span>}
                                                        </span>
                                                      </div>
                                                      <Show when={isRebuilding() && array.rebuildPercent > 0}>
                                                        <div class="flex items-center justify-between gap-2">
                                                          <span class="font-medium text-gray-700 dark:text-gray-200">Rebuild</span>
                                                          <span class="text-amber-600 dark:text-amber-400 font-medium">
                                                            {array.rebuildPercent.toFixed(1)}%
                                                          </span>
                                                        </div>
                                                        <Show when={array.rebuildSpeed}>
                                                          <div class="flex items-center justify-between gap-2">
                                                            <span class="font-medium text-gray-700 dark:text-gray-200">Speed</span>
                                                            <span class="text-gray-600 dark:text-gray-300">{array.rebuildSpeed}</span>
                                                          </div>
                                                        </Show>
                                                      </Show>
                                                    </div>
                                                  </div>
                                                );
                                              }}
                                            </For>
                                          </Show>
                                        </div>
                                      </div>
                                    </td>
                                  </tr>
                                </Show>
                              </>
                            );
                          }}
                        </For>
                      </tbody>
                    </table>
                  </div>
                </Card>
              </Show>
            </>
          }
        >
          <Card padding="lg">
            <EmptyState
              icon={
                <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
                  />
                </svg>
              }
              title="No hosts reporting"
              description="Install the Pulse host agent on Linux, macOS, or Windows machines to begin monitoring."
              actions={
                <button
                  type="button"
                  onClick={() => navigate('/settings/hosts')}
                  class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
                >
                  <span>Set up host agent</span>
                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                  </svg>
                </button>
              }
            />
          </Card>
        </Show>
      </Show>
    </div>
  );
};
