OverviewTab.tsx

"use client";

import { appFetch, withBasePath } from "@/lib/config/base-path";
import { adminSectionPath } from "@/lib/admin-sections";
import { useEffect, useMemo, useState, useCallback } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { storage } from "@/lib/storage";
import { useAllConnections } from "@/hooks/use-all-connections";
import { getDBIcon, getDBColor, getDBConfig } from "@/lib/db-ui-config";
import { EXTERNAL_DATABASE_TYPES } from "@/lib/db/compatibility";
import { formatBytes } from "@/lib/db/utils/pool-manager";
import {
  type DatabaseType,
  type DatabaseConnection,
  type QueryHistoryItem,
  ENVIRONMENT_COLORS,
  ENVIRONMENT_LABELS,
} from "@/lib/types";
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, RadialBarChart, RadialBar } from "recharts";
import { format, subDays, startOfDay } from "date-fns";
import {
  Activity,
  RefreshCw,
  TrendingUp,
  TrendingDown,
  Zap,
  Clock,
  Database,
  Wrench,
  Shield,
  ArrowRight,
  CircleCheck,
  CircleX,
  Link2,
  HardDrive,
  Sparkles,
  Radio,
  Gauge,
} from "lucide-react";
import { motion, AnimatePresence, type Variants } from "framer-motion";
import Link from "next/link";
import type { FleetHealthItem } from "@/app/api/admin/fleet-health/route";
import type { AuditEvent } from "@/lib/audit";
import { useEffectiveTheme } from "@/hooks/use-effective-theme";
import { chartTheme, chartTooltipStyle } from "@/lib/charts/palette";

// ─── Animation Variants ─────────────────────────────────────────────────────

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.08, delayChildren: 0.1 },
  },
} as const;

const itemVariants = {
  hidden: { opacity: 0, y: 20, scale: 0.95 },
  visible: {
    opacity: 1,
    y: 0,
    scale: 1,
    transition: { type: "spring" as const, stiffness: 300, damping: 24 },
  },
};

const heroVariants = {
  hidden: { opacity: 0, y: -30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { type: "spring" as const, stiffness: 200, damping: 20 },
  },
};

const feedItemVariants: Variants = {
  hidden: { opacity: 0, x: -10 },
  visible: (i: number) => ({
    opacity: 1,
    x: 0,
    transition: { delay: i * 0.05, type: "spring" as const, stiffness: 300, damping: 24 },
  }),
};

// ─── Constants ───────────────────────────────────────────────────────────────

const GAUGE_COLORS = {
  excellent: "#10b981",
  good: "#3b82f6",
  warning: "#f59e0b",
  critical: "#ef4444",
};

// A gauge with nothing to measure: not the failure red of a 0, and not a verdict either way.
const NEUTRAL_GAUGE_COLOR = "#71717a"; // zinc-500, the theme's fg-muted, which reads on both grounds

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

function getGaugeColor(value: number, thresholds = { warning: 70, critical: 50 }) {
  if (value >= 90) return GAUGE_COLORS.excellent;
  if (value >= thresholds.warning) return GAUGE_COLORS.good;
  if (value >= thresholds.critical) return GAUGE_COLORS.warning;
  return GAUGE_COLORS.critical;
}

function getGaugeColorReverse(value: number, thresholds = { warning: 200, critical: 500 }) {
  if (value <= 50) return GAUGE_COLORS.excellent;
  if (value <= thresholds.warning) return GAUGE_COLORS.good;
  if (value <= thresholds.critical) return GAUGE_COLORS.warning;
  return GAUGE_COLORS.critical;
}

function formatRelativeTime(date: Date | string) {
  const now = Date.now();
  const then = new Date(date).getTime();
  const diff = Math.max(0, now - then);
  const secs = Math.floor(diff / 1000);
  if (secs < 60) return "just now";
  const mins = Math.floor(secs / 60);
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  return `${days}d ago`;
}

function formatNumber(n: number) {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
  return n.toString();
}

// ─── Types ───────────────────────────────────────────────────────────────────

interface ActivityFeedItem {
  id: string;
  type: "audit" | "query";
  text: string;
  status: "success" | "failure";
  time: string | Date;
  connectionName?: string;
}

// ─── useAnimatedCounter Hook ─────────────────────────────────────────────────

function useAnimatedCounter(target: number, duration = 1500) {
  const [value, setValue] = useState(0);
  // Adjusting state while rendering, React's sanctioned pattern for "a prop changed":
  // the animation's endpoints are derived here rather than written from the effect, and
  // `value` is placed where the first frame would put it anyway. Snapping to zero has to
  // happen in the same pass, or a fleet that goes fully unhealthy would show the stale
  // pre-collapse figure for one frame.
  const [anim, setAnim] = useState({ from: 0, to: 0 });
  if (anim.to !== target) {
    setAnim({ from: anim.to, to: target });
    setValue(target === 0 ? 0 : anim.to);
  }
  const { from, to } = anim;

  useEffect(() => {
    if (to === 0) return;

    const startTime = performance.now();
    let raf: number;

    const tick = (now: number) => {
      const elapsed = now - startTime;
      const progress = Math.min(elapsed / duration, 1);
      // ease-out cubic
      const eased = 1 - Math.pow(1 - progress, 3);
      setValue(Math.round(from + (to - from) * eased));
      if (progress < 1) {
        raf = requestAnimationFrame(tick);
      }
    };

    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [from, to, duration]);

  return value;
}

// ─── Main Component ──────────────────────────────────────────────────────────

/** Authenticated admin as returned by `/api/auth/me`. */
export interface AdminUser {
  username: string;
  role: string;
}

interface OverviewTabProps {
  user: AdminUser | null;
}

export function OverviewTab({ user }: OverviewTabProps) {
  // Query history is initial-only state: a lazy initializer reads localStorage exactly
  // once per mount. A bare read during render would be impure and would mint a new array
  // identity on every pass, invalidating every memo below it.
  const [history] = useState<QueryHistoryItem[]>(() => storage.getHistory());
  // The clock is read once, at mount, alongside the history it measures: a clock read is
  // impure, so the day buckets below take it as an input instead of reading it in render.
  const [now] = useState(() => new Date());
  const [fleetHealth, setFleetHealth] = useState<FleetHealthItem[]>([]);
  const [fleetLoading, setFleetLoading] = useState(false);
  const [auditEvents, setAuditEvents] = useState<AuditEvent[]>([]);
  const [refreshCount, setRefreshCount] = useState(0);

  // Read straight from the hook rather than mirroring it into local state: mirroring cost
  // an extra render in which `connections` was still stale and the empty state flashed.
  const { connections } = useAllConnections();

  // Fetch audit events for activity feed
  useEffect(() => {
    appFetch("/api/admin/audit?limit=10")
      .then((r) => r.json())
      .then((d) => setAuditEvents(d.events || []))
      .catch(() => {});
  }, []);

  // Refreshing is an event, not an effect: it only asks for a new synchronization.
  const refreshFleetHealth = useCallback(() => setRefreshCount((c) => c + 1), []);

  // The descriptor bundles what to ask for with which request this is. Bundling matters:
  // a bare refresh token is never read inside the effect, so it cannot honestly be an
  // effect dependency — as part of the descriptor it is the value the effect synchronizes
  // against, and `targets` is what the effect actually sends.
  const fleetRequest = useMemo(() => ({ connections, refreshCount }), [connections, refreshCount]);

  useEffect(() => {
    const { connections: targets } = fleetRequest;
    if (targets.length === 0) return;
    // A response that lost the race (unmount, a changed connection list, or a newer
    // refresh) must win nothing: it may neither overwrite the newer request's snapshot
    // nor clear the spinner, which from the moment it was superseded belongs to that
    // newer request.
    let ignore = false;

    async function load() {
      setFleetLoading(true);
      try {
        const res = await appFetch("/api/admin/fleet-health", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ connections: targets }),
        });
        const data = await res.json();
        if (!ignore && data.results) setFleetHealth(data.results);
      } catch {
        // silently fail
      } finally {
        if (!ignore) setFleetLoading(false);
      }
    }

    void load();
    return () => {
      ignore = true;
    };
  }, [fleetRequest]);

  // Auto-refresh fleet health every 60 seconds. Kept as its own effect so that a manual
  // refresh does not restart the countdown.
  useEffect(() => {
    if (connections.length === 0) return;
    const interval = setInterval(refreshFleetHealth, 60000);
    return () => clearInterval(interval);
  }, [connections, refreshFleetHealth]);

  const queryStats = useMemo(() => {
    const total = history.length;
    const successful = history.filter((h) => h.status === "success").length;
    const failed = total - successful;
    // null, not 0: with no queries there is nothing to divide, and 0 reads as every query failing.
    const successRate = total > 0 ? Math.round((successful / total) * 100) : null;
    const avgTime = total > 0 ? Math.round(history.reduce((sum, h) => sum + h.executionTime, 0) / total) : 0;

    const byDay: { day: string; success: number; fail: number }[] = [];
    for (let i = 6; i >= 0; i--) {
      const dayStart = startOfDay(subDays(now, i));
      const dayEnd = startOfDay(subDays(now, i - 1));
      const dayItems = history.filter((h) => {
        const t = new Date(h.executedAt).getTime();
        return t >= dayStart.getTime() && t < dayEnd.getTime();
      });
      byDay.push({
        day: format(dayStart, "EEE"),
        success: dayItems.filter((h) => h.status === "success").length,
        fail: dayItems.filter((h) => h.status !== "success").length,
      });
    }

    return { total, successful, failed, successRate, avgTime, byDay };
  }, [history, now]);

  // A `not-checked` row was sent nothing (its provider resumes billed compute), so it is neither
  // healthy nor unhealthy and stays out of the score's denominator. A fleet of only such rows has
  // no score: null, read as N/A, since 0% would rate it critical.
  const healthScore = useMemo(() => {
    if (fleetHealth.length === 0) return 0;
    const checked = fleetHealth.filter((h) => h.status !== "not-checked");
    if (checked.length === 0) return null;
    const healthy = checked.filter((h) => h.status === "healthy").length;
    return Math.round((healthy / checked.length) * 100);
  }, [fleetHealth]);

  const todayQueries = useMemo(() => {
    const todayStart = startOfDay(now).getTime();
    return history.filter((h) => new Date(h.executedAt).getTime() >= todayStart).length;
  }, [history, now]);

  const yesterdayQueries = useMemo(() => {
    const yesterdayStart = startOfDay(subDays(now, 1)).getTime();
    const todayStart = startOfDay(now).getTime();
    return history.filter((h) => {
      const t = new Date(h.executedAt).getTime();
      return t >= yesterdayStart && t < todayStart;
    }).length;
  }, [history, now]);

  const avgLatency = useMemo(() => {
    const healthy = fleetHealth.filter((h) => h.status !== "error" && h.status !== "not-checked");
    // null, not 0: no reachable connection means nothing was timed, and 0 ms would rate as excellent.
    if (healthy.length === 0) return null;
    return Math.round(healthy.reduce((sum, h) => sum + h.latencyMs, 0) / healthy.length);
  }, [fleetHealth]);

  // Sums the provider's own byte figure instead of re-parsing `databaseSize`'s display string,
  // which had no "tb" branch and silently counted a 1 TB database as 1 byte. A connection with no
  // byte figure (provider doesn't publish one, or the connection errored) is excluded from the
  // sum rather than treated as zero, and the count says so instead of the total going quiet.
  const { totalDBSize, dbSizeExcluded } = useMemo(() => {
    let totalBytes = 0;
    let excluded = 0;
    for (const item of fleetHealth) {
      if (typeof item.databaseSizeBytes === "number") totalBytes += item.databaseSizeBytes;
      else excluded++;
    }
    return { totalDBSize: formatBytes(totalBytes), dbSizeExcluded: excluded };
  }, [fleetHealth]);

  // Activity feed: merge audit events + recent history
  const activityFeed = useMemo(() => {
    const items: ActivityFeedItem[] = [];

    for (const e of auditEvents) {
      items.push({
        id: e.id,
        type: "audit",
        text: `${e.action} ${e.target}`,
        status: e.result,
        time: e.timestamp,
        connectionName: e.connectionName,
      });
    }

    for (const h of history.slice(0, 10)) {
      items.push({
        // `h.id` is a CSPRNG local id minted at write time, so it is both unique and
        // stable across renders. A random suffix churned the key on every recomputation,
        // which made AnimatePresence replay the entrance animation for settled rows.
        id: `q-${h.id}`,
        type: "query",
        text: h.query.length > 60 ? h.query.slice(0, 60) + "..." : h.query,
        status: h.status === "success" ? "success" : "failure",
        time: h.executedAt,
        connectionName: h.connectionName,
      });
    }

    items.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime());
    return items.slice(0, 15);
  }, [auditEvents, history]);

  const hasConnections = connections.length > 0;

  if (!hasConnections) {
    return <EmptyState />;
  }

  return (
    <motion.div className="space-y-6" variants={containerVariants} initial="hidden" animate="visible">
      {/* SECTION 1: Hero Status Banner */}
      <HeroStatusBanner
        healthScore={healthScore}
        fleetHealth={fleetHealth}
        connections={connections}
        queryStats={queryStats}
        todayQueries={todayQueries}
        yesterdayQueries={yesterdayQueries}
        totalDBSize={totalDBSize}
        dbSizeExcluded={dbSizeExcluded}
        user={user}
        fleetLoading={fleetLoading}
        onRefresh={refreshFleetHealth}
      />

      {/* SECTION 2: Fleet Health Grid */}
      <FleetHealthSection fleetHealth={fleetHealth} fleetLoading={fleetLoading} connections={connections} />

      {/* SECTION 3: Key Metrics */}
      <KeyMetricsSection
        queryStats={queryStats}
        healthScore={healthScore}
        avgLatency={avgLatency}
        todayQueries={todayQueries}
        yesterdayQueries={yesterdayQueries}
      />

      {/* SECTION 4: Analytics */}
      <AnalyticsSection queryStats={queryStats} activityFeed={activityFeed} />

      {/* SECTION 5: Quick Actions */}
      <QuickActionsSection />
    </motion.div>
  );
}

// ─── SECTION 1: Hero Status Banner ──────────────────────────────────────────

function HeroStatusBanner({
  healthScore,
  fleetHealth,
  connections,
  queryStats,
  todayQueries,
  yesterdayQueries,
  totalDBSize,
  dbSizeExcluded,
  user,
  fleetLoading,
  onRefresh,
}: {
  healthScore: number | null;
  fleetHealth: FleetHealthItem[];
  connections: DatabaseConnection[];
  queryStats: { total: number; successRate: number | null; avgTime: number };
  todayQueries: number;
  yesterdayQueries: number;
  totalDBSize: string;
  dbSizeExcluded: number;
  user: AdminUser | null;
  fleetLoading: boolean;
  onRefresh: () => void;
}) {
  const animatedScore = useAnimatedCounter(healthScore ?? 0);
  const animatedConns = useAnimatedCounter(connections.length);
  const animatedQueries = useAnimatedCounter(queryStats.total);
  const animatedToday = useAnimatedCounter(todayQueries);

  // The unfilled part of the gauge, which is the ring the filled arc is read against.
  // It was 4% white, so on a light panel there was nothing there and the score read as an
  // arc floating on its own. Recharts writes `background.fill` straight onto the element
  // and cannot resolve a CSS token, so the palette is handed to it — the same reason
  // `chartTooltipStyle` exists a few lines down. `grid` is the palette's recessive line:
  // it orients without competing, which is exactly what a gauge track is for.
  const gaugeTrack = chartTheme(useEffectiveTheme()).grid;

  const gaugeColor = healthScore === null ? NEUTRAL_GAUGE_COLOR : getGaugeColor(healthScore);
  const gaugeData = [{ value: healthScore ?? 0, fill: gaugeColor }];

  const healthyCount = fleetHealth.filter((h) => h.status === "healthy").length;
  const degradedCount = fleetHealth.filter((h) => h.status === "degraded").length;
  const errorCount = fleetHealth.filter((h) => h.status === "error").length;
  const notCheckedCount = fleetHealth.filter((h) => h.status === "not-checked").length;

  // No score means every row was `not-checked`: nothing was asked, so the line claims nothing
  // either way and carries no success styling.
  const unchecked = healthScore === null;

  const statusText = unchecked
    ? "Not checked"
    : errorCount > 0
      ? "Attention Required"
      : degradedCount > 0
        ? "Degraded Performance"
        : "All Systems Operational";

  const statusColor = unchecked
    ? "text-fg-muted"
    : errorCount > 0
      ? "text-danger"
      : degradedCount > 0
        ? "text-warning"
        : "text-success";

  const statusGlow = unchecked
    ? ""
    : errorCount > 0
      ? "shadow-[0_0_20px_rgba(239,68,68,0.15)]"
      : degradedCount > 0
        ? "shadow-[0_0_20px_rgba(245,158,11,0.15)]"
        : "shadow-[0_0_20px_rgba(16,185,129,0.1)]";

  const queryTrend = todayQueries - yesterdayQueries;

  return (
    <motion.div variants={heroVariants} className="relative">
      <div
        className={`relative overflow-hidden rounded-2xl border border-hairline bg-gradient-to-br from-panel via-surface to-panel p-6 ${statusGlow}`}
      >
        {/* Decorative blur orbs */}
        <div className="absolute top-0 left-1/4 w-64 h-64 bg-brand-tint/5 rounded-full blur-3xl pointer-events-none" />
        <div className="absolute bottom-0 right-1/4 w-48 h-48 bg-success-tint/5 rounded-full blur-3xl pointer-events-none" />

        <div className="relative flex flex-col md:flex-row gap-6 items-center">
          {/*
            Left: Radial Health Gauge.

            `pb-4` is the strip the LIVE badge sits in. The gauge box is 160px and
            the ring's outer edge lands at y=152 (outerRadius 90% of an 80px
            radius), so a badge pinned inside the box overlapped the ring and read
            as clipped. The padding gives it somewhere to be that is below the
            ring without a negative offset the card's `overflow-hidden` could cut.
          */}
          <div className="relative flex-shrink-0 pb-4">
            <div className="w-[160px] h-[160px]">
              <ResponsiveContainer width="100%" height="100%">
                <RadialBarChart
                  innerRadius="70%"
                  outerRadius="90%"
                  barSize={12}
                  data={gaugeData}
                  startAngle={90}
                  endAngle={-270}
                >
                  <RadialBar dataKey="value" cornerRadius={6} background={{ fill: gaugeTrack }} />
                </RadialBarChart>
              </ResponsiveContainer>
            </div>
            {/* Center overlay — pinned to the CHART box, not the padded wrapper,
                so the badge's strip does not pull the reading off centre. */}
            <div className="absolute inset-x-0 top-0 h-[160px] flex flex-col items-center justify-center">
              <span className="text-3xl font-bold tabular-nums" style={{ color: gaugeColor }}>
                {healthScore === null ? "N/A" : `${animatedScore}%`}
              </span>
              <span className="text-xs text-fg-muted uppercase tracking-wider">Health</span>
            </div>
            {/* LIVE badge — in the padding below the ring, clear of the stroke. */}
            <div className="absolute bottom-0 left-1/2 -translate-x-1/2 flex items-center gap-1.5">
              <motion.div
                className="w-2 h-2 rounded-full bg-success-tint"
                animate={{ scale: [1, 1.05, 1], opacity: [0.7, 1, 0.7] }}
                transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
              />
              <span className="text-[0.625rem] font-bold text-success uppercase tracking-widest">Live</span>
            </div>
          </div>

          {/* Right: Counter Cards + Status */}
          <div className="flex-1 min-w-0 space-y-4">
            {/* Status Line */}
            <div className="flex items-center justify-between gap-3 flex-wrap">
              <div className="flex items-center gap-3">
                <span className={`text-sm font-bold ${statusColor}`}>{statusText}</span>
                <div className="flex gap-1.5 text-xs">
                  {healthyCount > 0 && (
                    <Badge variant="outline" className="border-success-tint/30 text-success h-5 text-[0.625rem]">
                      {healthyCount} healthy
                    </Badge>
                  )}
                  {degradedCount > 0 && (
                    <Badge variant="outline" className="border-warning-tint/30 text-warning h-5 text-[0.625rem]">
                      {degradedCount} degraded
                    </Badge>
                  )}
                  {errorCount > 0 && (
                    <Badge variant="outline" className="border-danger-tint/30 text-danger h-5 text-[0.625rem]">
                      {errorCount} error{errorCount === 1 ? "" : "s"}
                    </Badge>
                  )}
                  {notCheckedCount > 0 && (
                    <Badge variant="outline" className="border-hairline-strong text-fg-muted h-5 text-[0.625rem]">
                      {notCheckedCount} not checked
                    </Badge>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-2">
                {user && (
                  <Badge variant="outline" className="border-hairline-strong text-fg-muted h-5 text-[0.625rem]">
                    {user.username} ({user.role})
                  </Badge>
                )}
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-7 text-xs text-fg-muted hover:text-fg-secondary"
                  onClick={onRefresh}
                  disabled={fleetLoading}
                >
                  <RefreshCw className={`w-3 h-3 mr-1 ${fleetLoading ? "animate-spin" : ""}`} />
                  Refresh
                </Button>
              </div>
            </div>

            {/* Counter Cards */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              <CounterCard icon={Link2} label="Connections" value={animatedConns} suffix="" color="text-hue-blue" />
              <CounterCard
                icon={Zap}
                label="Total Queries"
                value={animatedQueries}
                suffix=""
                color="text-hue-purple"
                formatValue={formatNumber}
              />
              <CounterCard
                icon={HardDrive}
                label="DB Size"
                value={totalDBSize}
                suffix={dbSizeExcluded > 0 ? `(${dbSizeExcluded} excluded)` : ""}
                color="text-hue-emerald"
                isString
              />
              <CounterCard
                icon={Activity}
                label="Today"
                value={animatedToday}
                suffix=""
                color="text-hue-amber"
                trend={queryTrend}
              />
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

function CounterCard({
  icon: Icon,
  label,
  value,
  suffix,
  color,
  trend,
  isString,
  formatValue,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: number | string;
  suffix: string;
  color: string;
  trend?: number;
  isString?: boolean;
  formatValue?: (n: number) => string;
}) {
  const displayValue = isString ? value : formatValue ? formatValue(value as number) : value;

  return (
    <div className="rounded-xl border border-hairline bg-fill-subtle p-3">
      <div className="flex items-center gap-1.5 mb-1.5">
        <Icon className={`w-3.5 h-3.5 ${color}`} />
        <span className="text-xs text-fg-muted uppercase tracking-wider">{label}</span>
      </div>
      <div className="flex items-baseline gap-1">
        <span className="text-2xl font-bold text-fg tabular-nums">{displayValue}</span>
        {suffix && <span className="text-xs text-fg-muted">{suffix}</span>}
      </div>
      {trend !== undefined && trend !== 0 && (
        <div className={`flex items-center gap-0.5 mt-1 text-xs ${trend > 0 ? "text-success" : "text-danger"}`}>
          {trend > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
          <span>
            {trend > 0 ? "+" : ""}
            {trend} vs yesterday
          </span>
        </div>
      )}
    </div>
  );
}

// ─── SECTION 2: Fleet Health Grid ────────────────────────────────────────────

function FleetHealthSection({
  fleetHealth,
  fleetLoading,
  connections,
}: {
  fleetHealth: FleetHealthItem[];
  fleetLoading: boolean;
  connections: DatabaseConnection[];
}) {
  if (connections.length === 0) return null;

  const getStatusColor = (status: string) => {
    switch (status) {
      case "healthy":
        return {
          dot: "bg-success-tint",
          border: "border-success-tint/20 hover:border-success-tint/40",
          glow: "hover:shadow-[0_0_30px_rgba(16,185,129,0.08)]",
          gradient: "from-emerald-500/60 via-emerald-400/40",
          latencyColor: "#10b981",
        };
      case "degraded":
        return {
          dot: "bg-warning-tint",
          border: "border-warning-tint/20 hover:border-warning-tint/40",
          glow: "hover:shadow-[0_0_30px_rgba(245,158,11,0.08)]",
          gradient: "from-amber-500/60 via-amber-400/40",
          latencyColor: "#f59e0b",
        };
      case "not-checked":
        return {
          dot: "bg-fg-subtle",
          border: "border-hairline hover:border-hairline-strong",
          glow: "",
          gradient: "from-transparent via-transparent",
          latencyColor: "transparent",
        };
      default:
        return {
          dot: "bg-danger-tint",
          border: "border-danger-tint/20 hover:border-danger-tint/40",
          glow: "hover:shadow-[0_0_30px_rgba(239,68,68,0.08)]",
          gradient: "from-red-500/60 via-red-400/40",
          latencyColor: "#ef4444",
        };
    }
  };

  return (
    <motion.div variants={itemVariants}>
      <div className="flex items-center gap-2 mb-3">
        <Radio className="h-4 w-4 text-brand" />
        <h2 className="text-sm font-bold text-fg-secondary">Fleet Status</h2>
        <span className="text-xs text-fg-subtle">
          {fleetHealth.length} endpoint{fleetHealth.length !== 1 ? "s" : ""}
        </span>
      </div>

      {fleetLoading && fleetHealth.length === 0 ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {[...Array(3)].map((_, i) => (
            <div key={i} className="rounded-xl border border-hairline bg-panel p-4">
              <Skeleton className="h-4 w-24 mb-3 bg-overlay" />
              <Skeleton className="h-3 w-32 mb-2 bg-overlay" />
              <Skeleton className="h-2 w-full bg-overlay" />
            </div>
          ))}
        </div>
      ) : (
        <motion.div
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          {fleetHealth.map((item) => {
            const colors = getStatusColor(item.status);
            const Icon = getDBIcon(item.type as DatabaseType);
            const maxLatency = 500;
            const latencyPct = Math.min((item.latencyMs / maxLatency) * 100, 100);

            return (
              <motion.a
                key={item.connectionId}
                href={withBasePath("/admin/monitoring")}
                variants={itemVariants}
                whileHover={{ scale: 1.02, y: -2 }}
                className={`group relative rounded-xl border-2 ${colors.border} bg-panel p-4 transition-all duration-200 hover:bg-fill ${colors.glow} cursor-pointer block overflow-hidden`}
              >
                {/* Top gradient glow line */}
                <div
                  className={`absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent ${colors.gradient} to-transparent`}
                />

                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <div
                      className={`w-2 h-2 rounded-full ${colors.dot} ${item.status === "healthy" ? "animate-pulse" : ""}`}
                    />
                    <span className="text-sm font-medium text-fg truncate max-w-[150px]">{item.connectionName}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    {item.environment && (
                      <Badge
                        variant="outline"
                        className="text-[0.625rem] h-4"
                        style={{
                          borderColor: ENVIRONMENT_COLORS[item.environment as keyof typeof ENVIRONMENT_COLORS],
                          color: ENVIRONMENT_COLORS[item.environment as keyof typeof ENVIRONMENT_COLORS],
                        }}
                      >
                        {ENVIRONMENT_LABELS[item.environment as keyof typeof ENVIRONMENT_LABELS] || item.environment}
                      </Badge>
                    )}
                    <div className="p-1 rounded bg-fill">
                      <Icon className={`w-3.5 h-3.5 ${getDBColor(item.type as DatabaseType)}`} />
                    </div>
                  </div>
                </div>

                {/* Latency bar */}
                <div className="mb-2">
                  <div className="h-1.5 rounded-full bg-fill overflow-hidden">
                    <motion.div
                      className="h-full rounded-full"
                      style={{ backgroundColor: colors.latencyColor }}
                      initial={{ width: 0 }}
                      animate={{ width: `${latencyPct}%` }}
                      transition={{ duration: 1, delay: 0.3 }}
                    />
                  </div>
                </div>

                <div className="flex items-center gap-3 text-xs text-fg-muted">
                  <span className="font-mono text-fg-tertiary">
                    {item.status === "error"
                      ? "timeout"
                      : item.status === "not-checked"
                        ? "not checked"
                        : `${item.latencyMs}ms`}
                  </span>
                  {item.databaseSize && (
                    <>
                      <span className="text-fg-faint">&middot;</span>
                      <span className="font-mono text-fg-tertiary">{item.databaseSize}</span>
                    </>
                  )}
                  {item.activeConnections !== undefined && (
                    <>
                      <span className="text-fg-faint">&middot;</span>
                      <span className="font-mono text-fg-tertiary">{item.activeConnections} conn</span>
                    </>
                  )}
                </div>

                {item.error && <div className="text-danger text-xs truncate mt-1.5">{item.error}</div>}
                {item.status === "not-checked" && (
                  <div className="text-fg-muted text-xs mt-1.5">
                    Not checked: this connection resumes billed compute, so Studio does not poll it.
                  </div>
                )}
              </motion.a>
            );
          })}
        </motion.div>
      )}
    </motion.div>
  );
}

// ─── SECTION 3: Key Metrics Dashboard ────────────────────────────────────────

function KeyMetricsSection({
  queryStats,
  healthScore,
  avgLatency,
  todayQueries,
  yesterdayQueries,
}: {
  queryStats: { total: number; successRate: number | null; avgTime: number };
  healthScore: number | null;
  avgLatency: number | null;
  todayQueries: number;
  yesterdayQueries: number;
}) {
  return (
    <motion.div variants={itemVariants}>
      <div className="flex items-center gap-2 mb-3">
        <Gauge className="h-4 w-4 text-brand" />
        <h2 className="text-sm font-bold text-fg-secondary">Key Metrics</h2>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <MetricGauge
          label="Query Success"
          value={queryStats.successRate ?? 0}
          displayValue={queryStats.successRate === null ? "N/A" : undefined}
          unit={queryStats.successRate === null ? "" : "%"}
          color={queryStats.successRate === null ? NEUTRAL_GAUGE_COLOR : getGaugeColor(queryStats.successRate)}
        />
        <MetricGauge
          label="Fleet Health"
          value={healthScore ?? 0}
          displayValue={healthScore === null ? "N/A" : undefined}
          unit={healthScore === null ? "" : "%"}
          color={healthScore === null ? NEUTRAL_GAUGE_COLOR : getGaugeColor(healthScore)}
        />
        <MetricGauge
          label="Avg Response"
          value={Math.min(avgLatency ?? 0, 500)}
          displayValue={avgLatency === null ? "N/A" : `${avgLatency}`}
          unit={avgLatency === null ? "" : "ms"}
          maxValue={500}
          color={avgLatency === null ? NEUTRAL_GAUGE_COLOR : getGaugeColorReverse(avgLatency)}
        />
        <MetricBigNumber
          label="Total Queries"
          value={queryStats.total}
          trend={todayQueries - yesterdayQueries}
          icon={Zap}
        />
      </div>
    </motion.div>
  );
}

function MetricGauge({
  label,
  value,
  displayValue,
  unit,
  color,
  maxValue = 100,
}: {
  label: string;
  value: number;
  displayValue?: string;
  unit: string;
  color: string;
  maxValue?: number;
}) {
  const pct = Math.round((value / maxValue) * 100);
  const animatedValue = useAnimatedCounter(value);
  const gaugeData = [{ value: pct, fill: color }];
  // See `HeroStatusBanner`: the track has to come from the palette, not from a fixed white.
  const gaugeTrack = chartTheme(useEffectiveTheme()).grid;

  return (
    <div className="rounded-xl border border-hairline bg-fill-subtle p-4 flex flex-col items-center">
      <div className="relative w-[100px] h-[100px]">
        <ResponsiveContainer width="100%" height="100%">
          <RadialBarChart
            innerRadius="70%"
            outerRadius="90%"
            barSize={8}
            data={gaugeData}
            startAngle={90}
            endAngle={-270}
          >
            <RadialBar dataKey="value" cornerRadius={4} background={{ fill: gaugeTrack }} />
          </RadialBarChart>
        </ResponsiveContainer>
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-xl font-bold tabular-nums" style={{ color }}>
            {displayValue ?? animatedValue}
          </span>
          <span className="text-[0.625rem] text-fg-muted">{unit}</span>
        </div>
      </div>
      <span className="text-xs text-fg-muted mt-1 uppercase tracking-wider">{label}</span>
    </div>
  );
}

function MetricBigNumber({
  label,
  value,
  trend,
  icon: Icon,
}: {
  label: string;
  value: number;
  trend: number;
  icon: React.ComponentType<{ className?: string }>;
}) {
  const animatedValue = useAnimatedCounter(value);

  return (
    <div className="rounded-xl border border-hairline bg-fill-subtle p-4 flex flex-col items-center justify-center">
      <div className="p-2 rounded-lg bg-hue-purple-tint/10 mb-2">
        <Icon className="w-5 h-5 text-hue-purple" />
      </div>
      <span className="text-3xl font-bold text-fg tabular-nums">{formatNumber(animatedValue)}</span>
      <span className="text-xs text-fg-muted mt-1 uppercase tracking-wider">{label}</span>
      {trend !== 0 && (
        <div className={`flex items-center gap-0.5 mt-1.5 text-xs ${trend > 0 ? "text-success" : "text-danger"}`}>
          {trend > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
          <span>
            {trend > 0 ? "+" : ""}
            {trend} today
          </span>
        </div>
      )}
    </div>
  );
}

// ─── SECTION 4: Analytics ────────────────────────────────────────────────────

function AnalyticsSection({
  queryStats,
  activityFeed,
}: {
  queryStats: { total: number; byDay: { day: string; success: number; fail: number }[] };
  activityFeed: ActivityFeedItem[];
}) {
  const tooltipStyle = chartTooltipStyle(useEffectiveTheme());

  return (
    <motion.div variants={itemVariants}>
      <div className="grid gap-6 md:grid-cols-2">
        {/* Gradient AreaChart */}
        <div className="rounded-xl border border-hairline bg-panel p-5">
          <h3 className="text-sm font-bold text-fg-secondary mb-4 flex items-center gap-2">
            <Activity className="h-4 w-4 text-brand" />
            Query Volume (7 days)
          </h3>
          {queryStats.total === 0 ? (
            <div className="flex items-center justify-center py-8 text-sm text-fg-subtle">No query history yet.</div>
          ) : (
            <div className="h-[200px]">
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={queryStats.byDay}>
                  <defs>
                    <linearGradient id="gradSuccess" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.4} />
                      <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                    </linearGradient>
                    <linearGradient id="gradFail" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#ef4444" stopOpacity={0.4} />
                      <stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
                    </linearGradient>
                  </defs>
                  <XAxis dataKey="day" tick={{ fontSize: 11, fill: "#71717a" }} axisLine={false} tickLine={false} />
                  <YAxis
                    allowDecimals={false}
                    tick={{ fontSize: 11, fill: "#71717a" }}
                    axisLine={false}
                    tickLine={false}
                    width={30}
                  />
                  <Tooltip contentStyle={tooltipStyle} />
                  <Area
                    type="monotone"
                    dataKey="success"
                    name="Success"
                    stroke="#10b981"
                    strokeWidth={2}
                    fill="url(#gradSuccess)"
                    stackId="1"
                    animationDuration={1500}
                  />
                  <Area
                    type="monotone"
                    dataKey="fail"
                    name="Failed"
                    stroke="#ef4444"
                    strokeWidth={2}
                    fill="url(#gradFail)"
                    stackId="1"
                    animationDuration={1500}
                  />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          )}
        </div>

        {/* Recent Activity Feed */}
        <div className="rounded-xl border border-hairline bg-panel p-5">
          <div className="mb-4 flex items-center justify-between gap-2">
            <h3 className="text-sm font-bold text-fg-secondary flex items-center gap-2">
              <Clock className="h-4 w-4 text-brand" />
              Recent Activity
            </h3>
            {/* Unconditional: the preview cannot show proxy-recorded boundary denials, so the
                Audit tab's scope disclosure must stay one click away in every feed state. */}
            <Link
              href={adminSectionPath("audit")}
              data-testid="overview-audit-link"
              className="inline-flex items-center gap-1 text-xs text-fg-subtle hover:text-fg-tertiary transition-colors"
            >
              Audit
              <ArrowRight className="h-3 w-3" aria-hidden="true" />
            </Link>
          </div>
          {activityFeed.length === 0 ? (
            <div
              data-testid="overview-recent-activity-empty"
              className="flex items-center justify-center py-8 text-sm text-fg-subtle"
            >
              No recent activity here. The Audit tab explains what this feed does not capture.
            </div>
          ) : (
            <div className="max-h-[260px] overflow-y-auto editor-scrollbar space-y-1">
              <AnimatePresence>
                {activityFeed.map((item, i) => (
                  <motion.div
                    key={item.id}
                    custom={i}
                    variants={feedItemVariants}
                    initial="hidden"
                    animate="visible"
                    className="flex items-center gap-2.5 py-1.5 px-2 rounded-lg hover:bg-fill transition-colors"
                  >
                    {item.type === "audit" ? (
                      <Wrench className="w-3.5 h-3.5 text-fg-subtle flex-shrink-0" />
                    ) : (
                      <Zap className="w-3.5 h-3.5 text-fg-subtle flex-shrink-0" />
                    )}
                    <div className="flex-1 min-w-0">
                      <div className="text-xs text-fg-tertiary truncate">{item.text}</div>
                      {item.connectionName && (
                        <div className="text-xs text-fg-subtle truncate">{item.connectionName}</div>
                      )}
                    </div>
                    <div className="flex items-center gap-1.5 flex-shrink-0">
                      {item.status === "success" ? (
                        <CircleCheck className="w-3 h-3 text-success" />
                      ) : (
                        <CircleX className="w-3 h-3 text-danger" />
                      )}
                      <span className="text-xs text-fg-subtle whitespace-nowrap">{formatRelativeTime(item.time)}</span>
                    </div>
                  </motion.div>
                ))}
              </AnimatePresence>
            </div>
          )}
        </div>
      </div>
    </motion.div>
  );
}

// ─── SECTION 5: Quick Actions ────────────────────────────────────────────────

function QuickActionsSection() {
  const actions = [
    {
      label: "Maintenance",
      description: "VACUUM, ANALYZE, and optimize your databases",
      icon: Wrench,
      href: "/admin/operations",
      gradient: "from-blue-500/20 to-cyan-500/20",
      iconColor: "text-hue-blue",
      borderColor: "hover:border-hue-blue-tint/30",
    },
    {
      label: "Security & Masking",
      description: "Configure data masking rules and access control",
      icon: Shield,
      href: "/admin/security",
      gradient: "from-emerald-500/20 to-teal-500/20",
      iconColor: "text-hue-emerald",
      borderColor: "hover:border-hue-emerald-tint/30",
    },
    {
      label: "Real-time Monitoring",
      description: "Live metrics, connection pools, and alert thresholds",
      icon: Activity,
      href: "/admin/monitoring",
      gradient: "from-purple-500/20 to-pink-500/20",
      iconColor: "text-hue-purple",
      borderColor: "hover:border-hue-purple-tint/30",
    },
  ];

  return (
    <motion.div variants={itemVariants}>
      <div className="flex items-center gap-2 mb-3">
        <Sparkles className="h-4 w-4 text-brand" />
        <h2 className="text-sm font-bold text-fg-secondary">Quick Actions</h2>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {actions.map((action) => (
          <motion.a
            key={action.label}
            href={withBasePath(action.href)}
            whileHover={{ scale: 1.02, y: -4 }}
            className={`group relative rounded-xl border border-hairline ${action.borderColor} bg-panel p-5 transition-all duration-200 cursor-pointer block overflow-hidden hover:shadow-[0_0_30px_rgba(59,130,246,0.06)]`}
          >
            {/* Background gradient on hover */}
            <div
              className={`absolute inset-0 bg-gradient-to-br ${action.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
            />

            <div className="relative">
              <div className={`p-2 rounded-lg bg-fill w-fit mb-3`}>
                <action.icon className={`w-5 h-5 ${action.iconColor}`} />
              </div>
              <h3 className="text-sm font-bold text-fg mb-1">{action.label}</h3>
              <p className="text-xs text-fg-muted mb-3">{action.description}</p>
              <div className="flex items-center gap-1 text-xs text-fg-subtle group-hover:text-fg-tertiary transition-colors">
                <span>Open</span>
                <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
              </div>
            </div>
          </motion.a>
        ))}
      </div>
    </motion.div>
  );
}

// ─── Empty State ─────────────────────────────────────────────────────────────

// Keeps the card's second line short: name a handful of engines, not the whole catalog.
// Picked by hand rather than sliced off registry order, so the seven shown span the product's
// range (relational, document, key-value, wide-column, search, analytics) instead of reading
// as "six flavours of SQL" — every id here must still be in EXTERNAL_DATABASE_TYPES.
export const DB_TYPES_PREVIEW: readonly DatabaseType[] = [
  "postgres",
  "mysql",
  "mongodb",
  "redis",
  "cassandra",
  "elasticsearch",
  "clickhouse",
];

function EmptyState() {
  const previewEngineLabels = DB_TYPES_PREVIEW.map((type) => getDBConfig(type).label);
  const hiddenEngineCount = EXTERNAL_DATABASE_TYPES.length - DB_TYPES_PREVIEW.length;
  const dbTypesDescription =
    previewEngineLabels.join(", ") + (hiddenEngineCount > 0 ? `, +${hiddenEngineCount} more` : "");

  const features = [
    {
      icon: Database,
      label: `${EXTERNAL_DATABASE_TYPES.length} DB Types`,
      description: dbTypesDescription,
    },
    {
      icon: Sparkles,
      label: "AI Assistance",
      description: "Plan explanations, safety checks and schema docs, on your own model",
    },
    {
      icon: Activity,
      label: "Real-time Monitor",
      description: "Live metrics, alerts, and connection pool monitoring",
    },
  ];

  return (
    <div className="relative min-h-[70vh] flex flex-col items-center justify-center px-4">
      {/* Animated breathing orbs */}
      <motion.div
        className="absolute top-1/4 left-1/3 w-72 h-72 bg-brand-tint/5 rounded-full blur-3xl pointer-events-none"
        animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute bottom-1/4 right-1/3 w-56 h-56 bg-success-tint/5 rounded-full blur-3xl pointer-events-none"
        animate={{ scale: [1.2, 1, 1.2], opacity: [0.3, 0.5, 0.3] }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut", delay: 2 }}
      />

      <motion.div
        className="relative z-10 flex flex-col items-center text-center"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        {/* Database icon with pulse glow */}
        <motion.div variants={itemVariants} className="relative mb-6">
          <div className="absolute inset-0 w-20 h-20 bg-brand-tint/20 rounded-full blur-xl" />
          <motion.div
            className="relative p-5 rounded-2xl border border-hairline-strong bg-panel"
            animate={{
              boxShadow: [
                "0 0 20px rgba(59,130,246,0.1)",
                "0 0 40px rgba(59,130,246,0.2)",
                "0 0 20px rgba(59,130,246,0.1)",
              ],
            }}
            transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
          >
            <Database className="w-10 h-10 text-brand" />
          </motion.div>
        </motion.div>

        <motion.h2 variants={itemVariants} className="text-2xl font-bold text-fg mb-2">
          Welcome to Command Center
        </motion.h2>
        <motion.p variants={itemVariants} className="text-sm text-fg-muted max-w-md mb-8">
          Connect your first database to unlock real-time fleet monitoring, analytics, and intelligent query assistance.
        </motion.p>

        {/* Feature cards */}
        <motion.div
          variants={containerVariants}
          className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8 w-full max-w-2xl"
        >
          {features.map((f) => (
            <motion.div
              key={f.label}
              variants={itemVariants}
              className="rounded-xl border border-hairline bg-fill-subtle p-4 text-center"
            >
              <div className="p-2 rounded-lg bg-brand-tint/10 w-fit mx-auto mb-2">
                <f.icon className="w-5 h-5 text-brand" />
              </div>
              <div className="text-sm font-bold text-fg mb-1">{f.label}</div>
              <div className="text-xs text-fg-muted">{f.description}</div>
            </motion.div>
          ))}
        </motion.div>

        {/* CTA Button */}
        <motion.div variants={itemVariants}>
          <Button
            asChild
            className="bg-brand-solid hover:bg-brand-solid-hover text-white px-6 py-2.5 shadow-[0_0_30px_rgba(59,130,246,0.3)] hover:shadow-[0_0_40px_rgba(59,130,246,0.4)] transition-all"
          >
            <Link href="/">Connect Your First Database</Link>
          </Button>
        </motion.div>
      </motion.div>
    </div>
  );
}