BillTracker/client/pages/StatusPage.tsx

import React, { useState, useEffect, useCallback, type ComponentType, type ReactNode } from 'react';
import { Link } from 'react-router-dom';
import {
  Activity,
  AlertCircle,
  ArrowUpCircle,
  BarChart3,
  Bell,
  CalendarClock,
  CheckCircle2,
  Clock,
  Cpu,
  Database,
  Globe,
  HardDrive,
  Landmark,
  RefreshCw,
  ScrollText,
  Wrench,
} from 'lucide-react';
import { toast } from 'sonner';
import { api } from '@/api';
import { cn, fmtUptime, fmtBytes, errMessage } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { MarkdownText } from '@/components/MarkdownText';

type Dict = Record<string, unknown>;

interface UpdateData {
  has_update?: boolean;
  up_to_date?: boolean | null;
  error?: string;
  latest_version?: string;
  current_version?: string;
  latest_release_url?: string;
  last_checked_at?: string;
}

interface Note {
  category?: string;
  text?: string;
}

interface VersionData {
  version?: string;
  notes?: Note[];
}

interface HistoryMeta {
  version?: string;
  updated_at?: string;
}

interface ErrItem {
  timestamp?: string;
  message?: string;
  source?: string;
  type?: string;
}

// ─── Helpers ──────────────────────────────────────────────────────────────────

function formatMemory(runtime: Dict): string | null {
  const memUsed =
    runtime.memory_used_bytes ??
    (runtime.memory as { used?: unknown } | undefined)?.used ??
    runtime.memory;
  if (memUsed) return fmtBytes(memUsed as number);
  if (runtime.memory_mb) return `${runtime.memory_mb} MB`;
  return null;
}

function formatBytesMaybe(value: unknown): string | null {
  return value === undefined || value === null ? null : fmtBytes(value as number);
}

function formatDateTime(value: unknown): string | null {
  if (!value) return null;
  const date = new Date(value as string | number);
  if (Number.isNaN(date.getTime())) return String(value);
  return date.toLocaleString();
}

// ─── Design primitives ────────────────────────────────────────────────────────

function SectionLabel({ children }: { children: ReactNode }) {
  return (
    <div className="flex items-center gap-3 mb-3 mt-8 first:mt-0">
      <span className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/50 whitespace-nowrap">
        {children}
      </span>
      <div className="flex-1 h-px bg-border/40" />
    </div>
  );
}

function StatRow({ label, value, last }: { label: ReactNode; value?: unknown; last?: boolean }) {
  return (
    <div
      className={cn(
        'flex items-center justify-between py-1.5 gap-3',
        !last && 'border-b border-border/40',
      )}
    >
      <span className="text-xs text-muted-foreground shrink-0">{label}</span>
      <span className="text-xs font-medium tabular-nums text-right truncate max-w-[60%]">
        {value == null ? <span className="text-muted-foreground/50">—</span> : (value as ReactNode)}
      </span>
    </div>
  );
}

function StatusPill({ tone = 'muted', children }: { tone?: string; children: ReactNode }) {
  const cls =
    (
      {
        good: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25',
        warn: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-400/30',
        bad: 'bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/25',
        muted: 'bg-muted/60 text-muted-foreground border-border',
      } as Record<string, string>
    )[tone] ?? 'bg-muted/60 text-muted-foreground border-border';

  return (
    <span
      className={cn(
        'inline-flex items-center shrink-0 rounded border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
        cls,
      )}
    >
      {children}
    </span>
  );
}

function StatusCard({
  title,
  icon: Icon,
  status,
  tone = 'muted',
  children,
  className,
}: {
  title: ReactNode;
  icon?: ComponentType<{ className?: string }>;
  status?: ReactNode;
  tone?: string;
  children: ReactNode;
  className?: string;
}) {
  const accentCls =
    (
      {
        good: 'border-t-emerald-500/60',
        warn: 'border-t-amber-400/70',
        bad: 'border-t-red-500/60',
        muted: 'border-t-border/60',
      } as Record<string, string>
    )[tone] ?? 'border-t-border/60';

  return (
    <div
      className={cn(
        'flex flex-col bg-card rounded-xl border border-border border-t-[3px] shadow-sm',
        accentCls,
        className,
      )}
    >
      <div className="flex items-center justify-between gap-2 px-5 pt-4 pb-3 border-b border-border/30">
        <div className="flex items-center gap-2 min-w-0">
          {Icon && <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />}
          <h3 className="text-[11px] font-bold uppercase tracking-widest text-muted-foreground/80 truncate">
            {title}
          </h3>
        </div>
        {status != null && <StatusPill tone={tone}>{status}</StatusPill>}
      </div>
      <div className="px-5 py-3 flex-1">{children}</div>
    </div>
  );
}

function SkeletonCard() {
  return (
    <div className="flex flex-col bg-card rounded-xl border border-border border-t-[3px] border-t-border/60 shadow-sm animate-pulse">
      <div className="flex items-center justify-between gap-2 px-5 pt-4 pb-3 border-b border-border/30">
        <div className="flex items-center gap-2">
          <div className="h-3.5 w-3.5 rounded bg-muted/70" />
          <div className="h-3 w-20 rounded bg-muted/70" />
        </div>
        <div className="h-4 w-14 rounded bg-muted/50" />
      </div>
      <div className="px-5 py-3 space-y-0">
        {[1, 2, 3].map((i) => (
          <div
            key={i}
            className="flex justify-between items-center py-1.5 border-b border-border/40 last:border-0"
          >
            <div className="h-3 w-20 rounded bg-muted/60" />
            <div className="h-3 w-14 rounded bg-muted/50" />
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Update Card ──────────────────────────────────────────────────────────────

const CATEGORY_ORDER = ['Added', 'Changed', 'Fixed', 'Removed', 'Deprecated', 'Security'];

function UpdateCard({
  update,
  onCheckNow,
  checking,
  enabled = true,
  onToggle,
}: {
  update: UpdateData;
  onCheckNow: () => void;
  checking: boolean;
  enabled?: boolean;
  onToggle: (enabled: boolean) => void;
}) {
  const hasUpdate = !!update.has_update;
  const isKnown = update.up_to_date !== null && update.up_to_date !== undefined;
  const hasError = !!update.error;

  const tone = hasUpdate ? 'warn' : isKnown && !hasError ? 'good' : 'muted';
  const status = hasUpdate
    ? 'Update Available'
    : hasError
      ? 'Check Failed'
      : isKnown
        ? 'Up to Date'
        : 'Unknown';

  const StatusIcon = hasUpdate ? ArrowUpCircle : hasError ? AlertCircle : CheckCircle2;
  const iconCls = hasUpdate
    ? 'text-amber-500'
    : hasError
      ? 'text-red-500'
      : isKnown
        ? 'text-emerald-500'
        : 'text-muted-foreground';

  return (
    <StatusCard title="Software Update" icon={RefreshCw} status={status} tone={tone}>
      <div className="flex items-center gap-2 py-1.5 border-b border-border/40">
        <StatusIcon className={cn('h-3.5 w-3.5 shrink-0', iconCls)} />
        <span className="text-xs font-medium">
          {hasUpdate
            ? `v${update.latest_version} is available`
            : isKnown && !hasError
              ? 'Running the latest version'
              : hasError
                ? 'Could not reach update server'
                : 'Update status unknown'}
        </span>
      </div>
      <StatRow
        label="Running"
        value={update.current_version ? `v${update.current_version}` : null}
      />
      <div className="flex items-center justify-between py-1.5 border-b border-border/40 gap-3">
        <span className="text-xs text-muted-foreground shrink-0">Latest</span>
        {update.latest_version ? (
          update.latest_release_url ? (
            <a
              href={update.latest_release_url}
              target="_blank"
              rel="noopener noreferrer"
              className={cn(
                'text-xs font-medium underline-offset-2 hover:underline truncate',
                hasUpdate ? 'text-amber-500' : '',
              )}
            >
              v{update.latest_version} ↗
            </a>
          ) : (
            <span className="text-xs font-medium">v{update.latest_version}</span>
          )
        ) : (
          <span className="text-xs text-muted-foreground/50">—</span>
        )}
      </div>
      <StatRow label="Last Checked" value={formatDateTime(update.last_checked_at)} />
      {update.error && (
        <p className="text-[11px] text-red-400 leading-relaxed pt-1.5">{update.error}</p>
      )}
      <div className="flex items-center justify-between gap-3 py-1.5 border-t border-border/40 mt-1">
        <span className="text-xs text-muted-foreground">
          Automatic version check
          <span className="block text-[10px] text-muted-foreground/60">
            External request; off = no phone-home
          </span>
        </span>
        <Switch
          checked={enabled}
          onCheckedChange={onToggle}
          aria-label="Enable automatic version check"
        />
      </div>
      <div className="pt-3">
        <Button
          variant="outline"
          size="sm"
          onClick={onCheckNow}
          disabled={checking || !enabled}
          className="h-7 text-xs gap-1.5"
        >
          <RefreshCw className={cn('h-3 w-3', checking && 'animate-spin')} />
          {checking ? 'Checking…' : 'Check Now'}
        </Button>
      </div>
    </StatusCard>
  );
}

// ─── Release Notes Card ───────────────────────────────────────────────────────

function ReleaseNotesCard({
  version,
  historyMeta,
}: {
  version: VersionData | null;
  historyMeta: HistoryMeta | null;
}) {
  if (!version) return <SkeletonCard />;

  const grouped = CATEGORY_ORDER.reduce<Record<string, Note[]>>((acc, cat) => {
    const notes = version.notes?.filter((n) => n.category === cat) ?? [];
    if (notes.length) acc[cat] = notes;
    return acc;
  }, {});
  version.notes?.forEach((n) => {
    const cat = n.category ?? '';
    if (!grouped[cat]) grouped[cat] = [...(grouped[cat] ?? []), n];
  });

  const categories = Object.keys(grouped);
  const first = categories[0];
  const preview = first ? grouped[first]?.[0]?.text : null;

  return (
    <StatusCard title="Release Notes" icon={ScrollText} status={`v${version.version}`} tone="good">
      <StatRow
        label="Total Changes"
        value={version.notes?.length ? `${version.notes.length} items` : null}
      />
      <StatRow label="Last Updated" value={formatDateTime(historyMeta?.updated_at)} />
      <div className="py-1.5 border-b border-border/40">
        <p className="text-[11px] text-muted-foreground/60 uppercase tracking-wide mb-1">Preview</p>
        <p className="text-xs font-medium line-clamp-2 leading-relaxed">
          <MarkdownText text={preview ?? 'No release notes available.'} />
        </p>
      </div>
      <div className="pt-3">
        <Button asChild variant="outline" size="sm" className="h-7 text-xs">
          <Link to="/release-notes">View Full Notes</Link>
        </Button>
      </div>
    </StatusCard>
  );
}

// ─── StatusPage ───────────────────────────────────────────────────────────────

export default function StatusPage() {
  const [data, setData] = useState<Dict | null>(null);
  const [version, setVersion] = useState<VersionData | null>(null);
  const [historyMeta, setHistoryMeta] = useState<HistoryMeta | null>(null);
  const [loading, setLoading] = useState(true);
  const [updateData, setUpdateData] = useState<UpdateData | null>(null);
  const [updateChecking, setUpdateChecking] = useState(false);
  const [updateEnabled, setUpdateEnabled] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setVersion(null);
    setHistoryMeta(null);
    try {
      const [statusData, versionData] = await Promise.all([
        api.status() as Promise<Dict>,
        api.version() as Promise<VersionData>,
      ]);
      setData(statusData);
      setUpdateData((statusData?.update ?? null) as UpdateData | null);
      setVersion(versionData);
      try {
        const historyData = (await api.releaseHistory()) as HistoryMeta;
        setHistoryMeta({ version: historyData.version, updated_at: historyData.updated_at });
      } catch {
        setHistoryMeta(null);
      }
      try {
        const s = (await api.getUpdateCheckSetting()) as { enabled?: boolean };
        setUpdateEnabled(s.enabled !== false);
      } catch {
        /* keep default */
      }
    } catch (err) {
      toast.error(errMessage(err, 'Failed to load status.'));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const handleCheckNow = useCallback(async () => {
    setUpdateChecking(true);
    try {
      setUpdateData((await api.checkForUpdates()) as UpdateData);
    } catch (err) {
      toast.error(errMessage(err, 'Update check failed'));
    } finally {
      setUpdateChecking(false);
    }
  }, []);

  const handleToggleUpdateCheck = useCallback(
    async (enabled: boolean) => {
      setUpdateEnabled(enabled); // optimistic
      try {
        await api.setUpdateCheckSetting(enabled);
        if (enabled) handleCheckNow();
      } catch (err) {
        setUpdateEnabled(!enabled); // revert
        toast.error(errMessage(err, 'Failed to update setting'));
      }
    },
    [handleCheckNow],
  );

  // Normalize the nested response shape
  const app = (data?.application ?? data?.app ?? {}) as Dict;
  const rt = (data?.runtime ?? {}) as Dict;
  const db = (data?.database ?? data?.db ?? {}) as Dict;
  const stats = (data?.statistics ?? data?.stats ?? {}) as Dict;
  const worker = (data?.worker ?? data?.jobs ?? {}) as Dict;
  const notifications = (data?.notifications ?? data?.email ?? {}) as Dict;
  const backups = (data?.backups ?? data?.backup ?? {}) as Dict;
  const server = (data?.server ?? data?.clock ?? {}) as Dict;
  const tracker = (data?.tracker ?? data?.tracker_health ?? {}) as Dict;
  const cleanup = (data?.cleanup ?? {}) as Dict;
  const bankSync = (data?.bank_sync ?? data?.simplefin ?? {}) as Dict;
  const errors = (data?.errors ?? data?.recent_errors ?? []) as ErrItem[];

  const dbOk = db.connected ?? (db.status ? db.status === 'connected' : true);
  const workerOk = !worker.enabled ? null : worker.last_error ? false : true;
  const notificationsConfigured = notifications.configured ?? notifications.smtp_configured ?? null;
  const backupsEnabled = backups.enabled ?? null;
  const backupsScheduled = backups.scheduled_enabled ?? null;
  const backupsStatus =
    backupsEnabled === null
      ? 'Pending'
      : !backupsEnabled
        ? 'Disabled'
        : backupsScheduled
          ? 'Scheduled'
          : 'Manual Only';
  const backupsTone =
    backupsEnabled === null
      ? 'muted'
      : !backupsEnabled
        ? 'warn'
        : backupsScheduled
          ? 'good'
          : 'warn';
  const recentErrors = Array.isArray(errors) ? errors : [];

  const bankSyncEnabled = bankSync.enabled ?? false;
  const bankSyncStatus = !bankSyncEnabled
    ? 'Disabled'
    : bankSync.running
      ? 'Syncing'
      : bankSync.last_error
        ? 'Error'
        : Number(bankSync.source_count ?? 0) > 0
          ? 'Connected'
          : 'No Sources';
  const bankSyncTone = !bankSyncEnabled
    ? 'muted'
    : bankSync.last_error
      ? 'warn'
      : Number(bankSync.source_count ?? 0) > 0
        ? 'good'
        : 'warn';

  const off = server.utc_offset;
  const utcOffset = off != null ? `UTC${(off as number) >= 0 ? '+' : ''}${off}` : null;

  const lastResult = cleanup.last_result as
    | {
        import_sessions?: { pruned?: number };
        temp_export_files?: { removed?: number };
        backup_partials?: { removed?: number };
      }
    | undefined;

  return (
    <div>
      {/* ── Page header ──────────────────────────────────────────────── */}
      <div className="flex flex-col gap-3 mb-6 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Server Status</h1>
          <p className="text-sm text-muted-foreground mt-0.5">Health and operational status</p>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={load}
          disabled={loading}
          className="self-start"
        >
          <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', loading && 'animate-spin')} />
          Refresh
        </Button>
      </div>

      {/* ── Health banner ────────────────────────────────────────────── */}
      {!loading && data && (
        <div
          className={cn(
            'flex items-center gap-3 px-4 py-2.5 rounded-lg border mb-6',
            data.ok ? 'bg-emerald-500/5 border-emerald-500/20' : 'bg-red-500/5 border-red-500/20',
          )}
        >
          <span
            className={cn(
              'h-2 w-2 rounded-full shrink-0',
              data.ok
                ? 'bg-emerald-500 shadow-[0_0_0_3px_rgb(34_197_94/0.15)]'
                : 'bg-red-500 shadow-[0_0_0_3px_rgb(239_68_68/0.15)]',
            )}
          />
          <span
            className={cn(
              'text-sm font-semibold',
              data.ok ? 'text-emerald-700 dark:text-emerald-400' : 'text-red-600 dark:text-red-400',
            )}
          >
            {data.ok ? 'All systems operational' : 'One or more systems need attention'}
          </span>
          <div className="ml-auto hidden sm:flex items-center gap-4 text-xs text-muted-foreground tabular-nums">
            {(app.version ?? data?.version) ? (
              <span>v{String(app.version ?? data?.version)}</span>
            ) : null}
            <span>{fmtUptime(Number(app.uptime_seconds ?? data?.uptime_seconds ?? 0))} uptime</span>
          </div>
        </div>
      )}

      {/* ── Loading skeleton ─────────────────────────────────────────── */}
      {loading ? (
        <>
          {[3, 5].map((count, si) => (
            <React.Fragment key={si}>
              <div className={cn('flex items-center gap-3 mb-3', si > 0 && 'mt-8')}>
                <div className="h-2.5 w-24 rounded bg-muted/60 animate-pulse" />
                <div className="flex-1 h-px bg-border/40" />
              </div>
              <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 mb-2">
                {Array.from({ length: count }).map((_, i) => (
                  <SkeletonCard key={i} />
                ))}
              </div>
            </React.Fragment>
          ))}
        </>
      ) : (
        <>
          {/* ── Infrastructure ─────────────────────────────────────────── */}
          <SectionLabel>Infrastructure</SectionLabel>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            <StatusCard
              title="Application"
              icon={Globe}
              status={data?.ok ? 'Online' : 'Degraded'}
              tone={data?.ok ? 'good' : 'bad'}
            >
              <StatRow
                label="Version"
                value={(app.version ?? data?.version) ? `v${app.version ?? data?.version}` : null}
              />
              <StatRow
                label="Environment"
                value={app.environment ?? app.env ?? data?.environment ?? data?.env}
              />
              <StatRow
                label="Uptime"
                value={fmtUptime(
                  Number(app.uptime_seconds ?? app.uptime ?? data?.uptime_seconds ?? 0),
                )}
                last
              />
            </StatusCard>

            <StatusCard
              title="Database"
              icon={Database}
              status={dbOk ? 'Connected' : 'Error'}
              tone={dbOk ? 'good' : 'bad'}
            >
              <StatRow label="Size" value={formatBytesMaybe(db.size_bytes ?? db.size)} />
              <StatRow
                label="Last Modified"
                value={formatDateTime(db.last_modified ?? db.modified_at)}
              />
              {dbOk ? (
                <StatRow label="Health" value="Healthy" last />
              ) : (
                <StatRow label="Error" value={db.last_error} last />
              )}
            </StatusCard>

            <StatusCard title="Runtime" icon={Cpu}>
              <StatRow label="Node.js" value={rt.node_version ?? rt.node ?? data?.node_version} />
              <StatRow label="Platform" value={rt.platform ?? data?.platform} />
              <StatRow label="Architecture" value={rt.arch ?? data?.arch} />
              <StatRow label="Memory" value={formatMemory(rt)} last />
            </StatusCard>
          </div>

          {/* ── Services ───────────────────────────────────────────────── */}
          <SectionLabel>Services</SectionLabel>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            <StatusCard
              title="Daily Worker"
              icon={CalendarClock}
              status={workerOk === null ? 'Pending' : workerOk ? 'Running' : 'Error'}
              tone={workerOk === null ? 'muted' : workerOk ? 'good' : 'bad'}
            >
              <StatRow
                label="Enabled"
                value={worker.enabled === undefined ? null : worker.enabled ? 'Yes' : 'No'}
              />
              <StatRow
                label="Last Run"
                value={formatDateTime(worker.last_run_at ?? worker.last_success_at)}
              />
              <StatRow label="Next Run" value={formatDateTime(worker.next_run_at)} />
              <StatRow label="Last Error" value={worker.last_error} last />
            </StatusCard>

            <StatusCard
              title="SimpleFIN Sync"
              icon={Landmark}
              status={bankSyncStatus}
              tone={bankSyncTone}
            >
              <StatRow
                label="Connections"
                value={bankSyncEnabled ? (bankSync.source_count ?? 0) : null}
              />
              <StatRow
                label="Accounts"
                value={bankSyncEnabled ? (bankSync.account_count ?? 0) : null}
              />
              <StatRow
                label="Last Sync"
                value={bankSyncEnabled ? formatDateTime(bankSync.last_sync_at) : null}
              />
              <StatRow
                label="Next Check"
                value={bankSyncEnabled ? formatDateTime(bankSync.next_run_at) : null}
              />
              <StatRow
                label="Interval"
                value={
                  bankSyncEnabled && bankSync.interval_hours
                    ? `Every ${bankSync.interval_hours}h`
                    : null
                }
              />
              <StatRow label="Last Error" value={bankSync.last_error} last />
            </StatusCard>

            <StatusCard
              title="Notifications"
              icon={Bell}
              status={
                notificationsConfigured === null
                  ? 'Pending'
                  : notificationsConfigured
                    ? 'Configured'
                    : 'Missing'
              }
              tone={
                notificationsConfigured === null
                  ? 'muted'
                  : notificationsConfigured
                    ? 'good'
                    : 'warn'
              }
            >
              <StatRow
                label="Enabled"
                value={
                  notifications.enabled === undefined ? null : notifications.enabled ? 'Yes' : 'No'
                }
              />
              <StatRow
                label="SMTP"
                value={
                  notificationsConfigured == null
                    ? null
                    : notificationsConfigured
                      ? 'Configured'
                      : 'Not configured'
                }
              />
              <StatRow label="Last Sent" value={formatDateTime(notifications.last_sent_at)} />
              <StatRow
                label="Failures"
                value={notifications.failures ?? notifications.failed_count}
                last
              />
            </StatusCard>

            <StatusCard title="Backups" icon={HardDrive} status={backupsStatus} tone={backupsTone}>
              <StatRow
                label="Schedule"
                value={
                  backupsEnabled === null
                    ? null
                    : !backupsEnabled
                      ? 'Disabled'
                      : backupsScheduled
                        ? `${backups.scheduled_frequency ?? ''} ${backups.scheduled_time ?? ''}`.trim() ||
                          'Enabled'
                        : 'Not scheduled'
                }
              />
              <StatRow label="Last Backup" value={formatDateTime(backups.last_backup_at)} />
              <StatRow label="Next Backup" value={formatDateTime(backups.next_backup_at)} />
              <StatRow label="Count" value={backups.count ?? backups.backup_count} />
              <StatRow label="Retention" value={backups.keep_count ?? backups.retention_count} />
              <StatRow label="Last Error" value={backups.last_error} last />
            </StatusCard>

            <StatusCard
              title="Maintenance"
              icon={Wrench}
              status={cleanup.last_run_at ? 'OK' : 'Pending'}
              tone={cleanup.last_run_at ? 'good' : 'muted'}
            >
              <StatRow label="Last Run" value={formatDateTime(cleanup.last_run_at)} />
              <StatRow
                label="Import Sessions"
                value={
                  lastResult?.import_sessions?.pruned != null
                    ? `${lastResult.import_sessions.pruned} pruned`
                    : null
                }
              />
              <StatRow
                label="Temp Files"
                value={
                  lastResult?.temp_export_files?.removed != null
                    ? `${lastResult.temp_export_files.removed} removed`
                    : null
                }
              />
              <StatRow
                label="Backup Partials"
                value={
                  lastResult?.backup_partials?.removed != null
                    ? `${lastResult.backup_partials.removed} removed`
                    : null
                }
                last
              />
            </StatusCard>
          </div>

          {/* ── App Health ─────────────────────────────────────────────── */}
          <SectionLabel>App Health</SectionLabel>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            <StatusCard title="Tracker" icon={Activity}>
              <StatRow label="Bills This Month" value={tracker.bills_this_month} />
              <StatRow label="Payments This Month" value={tracker.payments_this_month} />
              <StatRow label="Overdue" value={tracker.overdue_count} />
              <StatRow label="Skipped" value={tracker.skipped_count} last />
            </StatusCard>

            <StatusCard title="Statistics" icon={BarChart3}>
              <StatRow
                label="Active Bills"
                value={stats.active_bills ?? stats.bills ?? stats.active_bill_count}
              />
              <StatRow label="Total Payments" value={stats.total_payments ?? stats.payments} />
              <StatRow label="Users" value={stats.users ?? stats.user_count} />
              <StatRow label="Sessions" value={stats.active_sessions ?? stats.sessions} last />
            </StatusCard>

            <StatusCard title="Server Clock" icon={Clock}>
              <StatRow
                label="Server Time"
                value={formatDateTime(server.now ?? data?.server_time)}
              />
              <StatRow label="Date" value={server.today ?? data?.today} />
              <StatRow label="Timezone" value={server.timezone ?? data?.timezone} />
              <StatRow label="UTC Offset" value={utcOffset} last />
            </StatusCard>
          </div>

          {/* ── Software ───────────────────────────────────────────────── */}
          <SectionLabel>Software</SectionLabel>
          <div className="grid gap-4 sm:grid-cols-2">
            {updateData && (
              <UpdateCard
                update={updateData}
                onCheckNow={handleCheckNow}
                checking={updateChecking}
                enabled={updateEnabled}
                onToggle={handleToggleUpdateCheck}
              />
            )}
            <ReleaseNotesCard version={version} historyMeta={historyMeta} />
          </div>

          {/* ── Errors ─────────────────────────────────────────────────── */}
          <SectionLabel>Errors</SectionLabel>
          <StatusCard
            title="Recent Errors"
            icon={AlertCircle}
            status={recentErrors.length ? `${recentErrors.length} Open` : 'None'}
            tone={recentErrors.length ? 'bad' : 'good'}
          >
            {recentErrors.length ? (
              recentErrors.slice(0, 5).map((err, i) => (
                <div
                  key={`${err.timestamp ?? err.message ?? i}`}
                  className={cn(
                    'py-1.5',
                    i !== Math.min(recentErrors.length, 5) - 1 && 'border-b border-border/40',
                  )}
                >
                  <div className="flex items-center justify-between gap-2">
                    <p className="text-xs font-medium leading-tight truncate">
                      {err.source ?? err.type ?? 'Application'}
                    </p>
                    {err.timestamp && (
                      <p className="text-[11px] text-muted-foreground shrink-0 tabular-nums">
                        {formatDateTime(err.timestamp)}
                      </p>
                    )}
                  </div>
                  <p className="text-[11px] text-muted-foreground mt-0.5 line-clamp-1">
                    {err.message ?? String(err)}
                  </p>
                </div>
              ))
            ) : (
              <p className="text-xs text-muted-foreground py-0.5">No recent errors recorded.</p>
            )}
          </StatusCard>
        </>
      )}
    </div>
  );
}