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>
  );
}