claudetools/projects/msp-tools/guru-rmm/dashboard/src/pages/Dashboard.tsx

import { useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { Link } from "react-router-dom";
import {
  Activity,
  Server,
  AlertTriangle,
  Wifi,
  WifiOff,
  Terminal,
  RefreshCw,
  Shield,
  Zap,
  ArrowRight,
} from "lucide-react";
import { agentsApi, Agent } from "../api/client";

/**
 * Formats a date to a relative time string (e.g., "2 minutes ago", "1 hour ago")
 */
function formatRelativeTime(dateString: string | null): string {
  if (!dateString) return "Never seen";

  const date = new Date(dateString);
  const now = new Date();
  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);

  if (diffInSeconds < 60) {
    return "Just now";
  } else if (diffInSeconds < 3600) {
    const minutes = Math.floor(diffInSeconds / 60);
    return `${minutes}m ago`;
  } else if (diffInSeconds < 86400) {
    const hours = Math.floor(diffInSeconds / 3600);
    return `${hours}h ago`;
  } else {
    const days = Math.floor(diffInSeconds / 86400);
    return `${days}d ago`;
  }
}

/**
 * Loading skeleton for stat cards with shimmer animation
 */
function StatCardSkeleton({ delay }: { delay: number }) {
  return (
    <div
      className="glass-card relative overflow-hidden opacity-0"
      style={{
        animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
      }}
    >
      <div className="flex items-start justify-between">
        <div className="space-y-3">
          <div className="skeleton skeleton-text w-24 h-4" />
          <div className="skeleton skeleton-text w-16 h-10" />
          <div className="skeleton skeleton-text w-32 h-3" />
        </div>
        <div className="skeleton w-12 h-12 rounded-lg" />
      </div>
    </div>
  );
}

/**
 * Stat card component with Mission Control styling - navigates to filtered agents page on click
 */
function StatCard({
  title,
  value,
  icon: Icon,
  description,
  accentColor,
  delay,
  linkTo,
}: {
  title: string;
  value: string | number;
  icon: React.ComponentType<{ className?: string }>;
  description?: string;
  accentColor: "cyan" | "green" | "amber" | "rose";
  delay: number;
  linkTo: string;
}) {
  const navigate = useNavigate();

  const colorClasses = {
    cyan: {
      icon: "text-cyan",
      glow: "glow-cyan",
      bg: "bg-[var(--accent-cyan-muted)]",
      value: "text-cyan",
    },
    green: {
      icon: "text-green",
      glow: "glow-green",
      bg: "bg-[var(--accent-green-muted)]",
      value: "text-green",
    },
    amber: {
      icon: "text-amber",
      glow: "glow-amber",
      bg: "bg-[var(--accent-amber-muted)]",
      value: "text-amber",
    },
    rose: {
      icon: "text-rose",
      glow: "glow-rose",
      bg: "bg-[var(--accent-rose-muted)]",
      value: "text-rose",
    },
  };

  const colors = colorClasses[accentColor];

  const handleClick = () => {
    navigate(linkTo);
  };

  return (
    <div
      className="glass-card relative overflow-hidden opacity-0 border-l-4 group cursor-pointer transition-transform duration-200 hover:scale-[1.02]"
      style={{
        animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
        borderLeftColor: `var(--accent-${accentColor})`,
      }}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          handleClick();
        }
      }}
    >
      {/* Subtle gradient overlay on hover */}
      <div
        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
        style={{
          background: `radial-gradient(circle at top right, var(--accent-${accentColor}-muted), transparent 70%)`,
        }}
      />

      <div className="relative">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-muted font-mono text-xs uppercase tracking-widest-custom">
              {title}
            </p>
            <p className={`font-mono text-3xl font-bold ${colors.value} mt-1`}>
              {value}
            </p>
            {description && (
              <p className="text-muted text-xs mt-0.5">{description}</p>
            )}
          </div>

          {/* Icon - smaller padding */}
          <div
            className={`p-2 rounded-lg ${colors.bg} ${colors.glow} transition-all duration-300 group-hover:scale-110`}
          >
            <Icon className={`h-5 w-5 ${colors.icon}`} />
          </div>
        </div>

        {/* Simplified view all - no border */}
        <div className="mt-3 flex items-center justify-between opacity-60 group-hover:opacity-100 transition-opacity">
          <span className="text-muted text-xs font-mono">View all</span>
          <ArrowRight
            className={`h-3 w-3 ${colors.icon} group-hover:translate-x-1 transition-transform`}
          />
        </div>
      </div>
    </div>
  );
}

/**
 * Status indicator dot with pulse animation
 */
function StatusDot({ status }: { status: string }) {
  const statusClasses = {
    online: "status-dot online",
    offline: "status-dot offline",
    error: "status-dot error",
  };

  return (
    <span
      className={statusClasses[status as keyof typeof statusClasses] || "status-dot offline"}
    />
  );
}

/**
 * Activity list item with hover effects - clickable with Link
 */
function ActivityItem({ agent }: { agent: Agent }) {
  return (
    <Link
      to={`/agents/${agent.id}`}
      className="flex items-center justify-between p-2 rounded-lg transition-all duration-200 hover:bg-[rgba(6,182,212,0.08)] group cursor-pointer"
    >
      <div className="flex items-center gap-3">
        <StatusDot status={agent.status} />
        <div>
          <p className="font-mono text-sm font-medium text-primary group-hover:text-cyan transition-colors">
            {agent.hostname}
          </p>
          <p className="text-xs text-muted uppercase tracking-wide">
            {agent.os_type}
          </p>
        </div>
      </div>
      <div className="flex items-center gap-3">
        <span className="font-mono text-xs text-muted tabular-nums">
          {formatRelativeTime(agent.last_seen)}
        </span>
        <ArrowRight className="h-4 w-4 text-muted opacity-0 group-hover:opacity-100 group-hover:text-cyan transition-all duration-200 transform group-hover:translate-x-1" />
      </div>
    </Link>
  );
}

/**
 * Quick action button with glow effect
 */
function QuickActionButton({
  icon: Icon,
  label,
  description,
  onClick,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  description: string;
  onClick?: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className="flex items-center gap-4 p-4 w-full text-left rounded-lg border border-[var(--border-primary)] bg-[var(--bg-tertiary)] hover:border-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)] transition-all duration-200 group"
    >
      <div className="p-2 rounded-lg bg-[var(--bg-secondary)] group-hover:glow-cyan transition-all duration-200">
        <Icon className="h-5 w-5 text-cyan" />
      </div>
      <div>
        <p className="font-mono text-sm font-medium text-primary">{label}</p>
        <p className="text-xs text-muted">{description}</p>
      </div>
    </button>
  );
}

/**
 * Loading skeleton for activity list
 */
function ActivityListSkeleton() {
  return (
    <div className="space-y-3">
      {[0, 1, 2, 3, 4].map((i) => (
        <div key={i} className="flex items-center gap-4 p-3">
          <div className="skeleton w-2 h-2 rounded-full" />
          <div className="flex-1 space-y-2">
            <div className="skeleton skeleton-text w-32 h-4" />
            <div className="skeleton skeleton-text w-20 h-3" />
          </div>
          <div className="skeleton skeleton-text w-16 h-3" />
        </div>
      ))}
    </div>
  );
}

/**
 * Main Dashboard component with Mission Control aesthetic
 *
 * Stat cards navigate to the Agents page with status filters.
 * This approach scales better for large agent counts (1000+) since
 * the Agents page handles pagination, search, and sorting.
 */
export function Dashboard() {
  const { data: agents = [], isLoading } = useQuery({
    queryKey: ["agents"],
    queryFn: () => agentsApi.list().then((res) => res.data),
    refetchInterval: 30000,
  });

  const onlineAgents = agents.filter((a: Agent) => a.status === "online");
  const offlineAgents = agents.filter((a: Agent) => a.status === "offline");
  const errorAgents = agents.filter((a: Agent) => a.status === "error");

  // Determine system status
  const hasErrors = errorAgents.length > 0;
  const allOffline = agents.length > 0 && onlineAgents.length === 0;
  const systemStatus = hasErrors
    ? "ATTENTION REQUIRED"
    : allOffline
    ? "ALL SYSTEMS OFFLINE"
    : "SYSTEMS OPERATIONAL";
  const statusClass = hasErrors
    ? "status-error"
    : allOffline
    ? "status-warning"
    : "status-online";

  return (
    <div className="space-y-5">
      {/* Page Header */}
      <header className="space-y-1 animate-fade-in">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-gradient font-mono text-3xl font-bold tracking-tight">
              DASHBOARD
            </h1>
            <p className="text-muted text-sm uppercase tracking-widest-custom mt-1">
              Mission Control Overview
            </p>
          </div>

          {/* System Status Indicator */}
          <div className={`status-indicator ${statusClass}`}>
            <span className="status-dot" />
            <span className="font-mono text-xs uppercase tracking-wide">
              {systemStatus}
            </span>
          </div>
        </div>
      </header>

      {/* Stat Cards Grid */}
      <section className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
        {isLoading ? (
          <>
            <StatCardSkeleton delay={0.1} />
            <StatCardSkeleton delay={0.2} />
            <StatCardSkeleton delay={0.3} />
            <StatCardSkeleton delay={0.4} />
          </>
        ) : (
          <>
            <StatCard
              title="Total Agents"
              value={agents.length}
              icon={Server}
              description="Registered endpoints"
              accentColor="cyan"
              delay={0.1}
              linkTo="/agents"
            />
            <StatCard
              title="Online"
              value={onlineAgents.length}
              icon={Wifi}
              description="Currently connected"
              accentColor="green"
              delay={0.2}
              linkTo="/agents?status=online"
            />
            <StatCard
              title="Offline"
              value={offlineAgents.length}
              icon={WifiOff}
              description="Not responding"
              accentColor="amber"
              delay={0.3}
              linkTo="/agents?status=offline"
            />
            <StatCard
              title="Errors"
              value={errorAgents.length}
              icon={AlertTriangle}
              description="Requires attention"
              accentColor="rose"
              delay={0.4}
              linkTo="/agents?status=error"
            />
          </>
        )}
      </section>

      {/* Bottom Grid: Activity + Quick Actions */}
      <section className="grid gap-4 md:grid-cols-2">
        {/* Recent Activity Card */}
        <div
          className="glass-card opacity-0"
          style={{
            animation: "fadeInUp 0.4s ease-out 0.5s forwards",
          }}
        >
          <div className="flex items-center justify-between mb-3 pb-3 border-b border-[var(--border-secondary)]">
            <h2 className="card-title flex items-center gap-2">
              <Activity className="h-4 w-4 text-cyan" />
              Recent Activity
            </h2>
            {!isLoading && agents.length > 0 && (
              <span className="font-mono text-xs text-muted">
                {agents.length} agent{agents.length !== 1 ? "s" : ""}
              </span>
            )}
          </div>

          {isLoading ? (
            <ActivityListSkeleton />
          ) : agents.length === 0 ? (
            <div className="text-center py-8">
              <Server className="h-12 w-12 text-muted mx-auto mb-4 opacity-50" />
              <p className="text-secondary font-medium mb-2">
                No agents registered
              </p>
              <p className="text-muted text-sm">
                Deploy an agent to start monitoring endpoints.
              </p>
            </div>
          ) : (
            <div className="space-y-0.5 -mx-2">
              {agents.slice(0, 5).map((agent: Agent) => (
                <ActivityItem key={agent.id} agent={agent} />
              ))}
            </div>
          )}
        </div>

        {/* Quick Actions Card */}
        <div
          className="glass-card opacity-0"
          style={{
            animation: "fadeInUp 0.4s ease-out 0.6s forwards",
          }}
        >
          <div className="flex items-center gap-2 mb-3 pb-3 border-b border-[var(--border-secondary)]">
            <Zap className="h-4 w-4 text-cyan" />
            <h2 className="card-title">Quick Actions</h2>
          </div>

          <div className="space-y-2">
            <QuickActionButton
              icon={Terminal}
              label="Deploy Agent"
              description="Install agent on a new endpoint"
            />
            <QuickActionButton
              icon={RefreshCw}
              label="Refresh All"
              description="Force update all agent statuses"
            />
            <QuickActionButton
              icon={Shield}
              label="Security Scan"
              description="Run security audit on all endpoints"
            />
          </div>

          {/* Terminal-style hint */}
          <div className="mt-4 p-2 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)]">
            <div className="flex items-center gap-2">
              <span className="font-mono text-xs text-cyan">$</span>
              <span className="font-mono text-xs text-muted">
                guru-rmm --help
              </span>
              <span className="inline-block w-2 h-4 bg-cyan animate-pulse ml-1" />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}