aethex-forge/client/components/admin/AdminSystemMap.tsx

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { Database, Globe, Layers, Network, Route, ServerCog, ShieldCheck, Spline, Users, Workflow } from "lucide-react";

type Node = {
  id: string;
  label: string;
  icon?: React.ComponentType<{ className?: string }>;
  subtitle?: string;
  group: "entry" | "frontend" | "services" | "backend" | "infra";
};

const NODES: Node[] = [
  // Entry/realms
  { id: "realms", label: "Realms", subtitle: "GD / Consulting / Community / Get Started", icon: Workflow, group: "entry" },
  { id: "onboarding", label: "Onboarding", subtitle: "Profile • Interests • Path", icon: Users, group: "entry" },

  // Frontend app
  { id: "dashboard", label: "Dashboard", subtitle: "Realm‑aware UI", icon: Globe, group: "frontend" },
  { id: "routes", label: "Routes", subtitle: "/feed • /status • /teams • /docs", icon: Route, group: "frontend" },

  // Product services (frontend+api)
  { id: "feed", label: "Social Feed", subtitle: "Posts • Likes • Comments • Tags", icon: Layers, group: "services" },
  { id: "mentorship", label: "Mentorship", subtitle: "Requests • Mentors • Moderation", icon: Users, group: "services" },
  { id: "status", label: "Status", subtitle: "Live health from /api/status", icon: ShieldCheck, group: "services" },
  { id: "investors", label: "Investors", subtitle: "Interest • Client realm", icon: Network, group: "services" },

  // Backend
  { id: "api", label: "API", subtitle: "Node/Express server routes", icon: ServerCog, group: "backend" },
  { id: "db", label: "Supabase", subtitle: "Auth • Profiles • Content • Migrations", icon: Database, group: "backend" },

  // Infra
  { id: "hosting", label: "Hosting/CDN", subtitle: "Vercel/Netlify + Edge", icon: Spline, group: "infra" },
];

// Directed edges between nodes
const EDGES: Array<[string, string, string]> = [
  ["realms", "dashboard", "realm -> UI personalization"],
  ["onboarding", "dashboard", "profile bootstraps"],
  ["dashboard", "routes", "primary navigation"],

  ["routes", "feed", "component mounts"],
  ["routes", "mentorship", "community flow"],
  ["routes", "status", "observability"],
  ["routes", "investors", "IR page"],

  ["feed", "api", "CRUD, reactions"],
  ["mentorship", "api", "requests, listings"],
  ["status", "api", "/api/status"],
  ["investors", "api", "POST /api/investors/interest"],

  ["api", "db", "RLS, SQL, RPC"],
  ["api", "hosting", "deploy, logs"],
];

const groupStyles: Record<Node["group"], string> = {
  entry: "from-emerald-900/40 to-emerald-700/20 border-emerald-500/30",
  frontend: "from-indigo-900/40 to-indigo-700/20 border-indigo-500/30",
  services: "from-fuchsia-900/40 to-fuchsia-700/20 border-fuchsia-500/30",
  backend: "from-sky-900/40 to-sky-700/20 border-sky-500/30",
  infra: "from-amber-900/40 to-amber-700/20 border-amber-500/30",
};

function NodeCard({ node }: { node: Node }) {
  const Icon = node.icon ?? Globe;
  return (
    <div className={cn(
      "rounded-xl border p-3 text-sm shadow-sm",
      "bg-gradient-to-br",
      groupStyles[node.group],
    )}>
      <div className="flex items-center gap-2">
        <div className="rounded-lg bg-black/30 p-1.5">
          <Icon className="h-4 w-4 text-white/90" />
        </div>
        <div>
          <div className="font-medium text-white/90">{node.label}</div>
          {node.subtitle && (
            <div className="text-[11px] text-white/60">{node.subtitle}</div>
          )}
        </div>
      </div>
    </div>
  );
}

export default function AdminSystemMap() {
  return (
    <Card className="bg-card/60 border-border/40 backdrop-blur">
      <CardHeader>
        <CardTitle>System map</CardTitle>
        <CardDescription>High‑level architecture and primary flows</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          {/* Row: entry */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            {NODES.filter(n => n.group === "entry").map(n => (
              <NodeCard key={n.id} node={n} />
            ))}
          </div>

          {/* Row: frontend */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {NODES.filter(n => n.group === "frontend").map(n => (
              <NodeCard key={n.id} node={n} />
            ))}
          </div>

          {/* Row: services */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            {NODES.filter(n => n.group === "services").map(n => (
              <NodeCard key={n.id} node={n} />
            ))}
          </div>

          {/* Row: backend + infra */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            {NODES.filter(n => n.group === "backend").map(n => (
              <NodeCard key={n.id} node={n} />
            ))}
            {NODES.filter(n => n.group === "infra").map(n => (
              <NodeCard key={n.id} node={n} />
            ))}
          </div>

          {/* Legend */}
          <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
            <Badge variant="outline" className="border-emerald-500/30 text-emerald-200">Entry</Badge>
            <Badge variant="outline" className="border-indigo-500/30 text-indigo-200">Frontend</Badge>
            <Badge variant="outline" className="border-fuchsia-500/30 text-fuchsia-200">Services</Badge>
            <Badge variant="outline" className="border-sky-500/30 text-sky-200">Backend</Badge>
            <Badge variant="outline" className="border-amber-500/30 text-amber-200">Infra</Badge>
          </div>

          {/* Edges list (readable relationships) */}
          <div className="mt-4 rounded-xl border border-border/40 bg-background/40 p-3">
            <div className="text-xs font-medium text-foreground mb-2">Flows</div>
            <ul className="grid gap-1 text-xs text-muted-foreground sm:grid-cols-2 lg:grid-cols-3">
              {EDGES.map(([from, to, note]) => (
                <li key={`${from}-${to}`}>
                  <span className="text-foreground/80">{from}</span>
                  <span className="mx-1 opacity-60">→</span>
                  <span className="text-foreground/80">{to}</span>
                  <span className="opacity-60"> — {note}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}