VectorDNS/components/roadmap-flowchart.tsx

"use client";

import {
  ReactFlow,
  Background,
  type Node,
  type Edge,
  type NodeProps,
  Handle,
  Position,
  MarkerType,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import {
  CheckCircle2,
  Circle,
  Flag,
  Rocket,
  Settings,
  ShieldCheck,
  Database,
  Layout,
  Activity,
  TestTube,
} from "lucide-react";

type PhaseNodeData = {
  label: string;
  status: "todo" | "doing" | "done";
  icon: React.ElementType;
  color: string;
  items: { text: string; completed: boolean }[];
};

function PhaseNode({ data }: NodeProps<Node<PhaseNodeData>>) {
  const Icon = data.icon;
  return (
    <div
      className="rounded-xl border bg-card p-6 shadow-lg transition-all hover:border-primary/50"
      style={{ minWidth: 320 }}
    >
      <Handle type="target" position={Position.Top} className="opacity-0" />
      <Handle type="source" position={Position.Bottom} className="opacity-0" />

      <div className="flex items-center gap-4 border-b pb-4 mb-4">
        <div
          className="flex size-12 items-center justify-center rounded-lg"
          style={{ backgroundColor: data.color }}
        >
          <Icon className="size-6 text-white" />
        </div>
        <div>
          <div className="text-lg font-bold text-foreground leading-tight">
            {data.label}
          </div>
          <div
            className={`text-xs font-semibold uppercase tracking-wider mt-0.5 ${
              data.status === "done"
                ? "text-green-500"
                : data.status === "doing"
                  ? "text-blue-500"
                  : "text-muted-foreground"
            }`}
          >
            {data.status}
          </div>
        </div>
      </div>

      <ul className="space-y-3">
        {data.items.map((item, i) => (
          <li
            key={i}
            className="flex items-start gap-3 text-sm leading-relaxed text-muted-foreground"
          >
            {item.completed ? (
              <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-green-500" />
            ) : (
              <Circle className="mt-0.5 size-4 shrink-0 text-muted-foreground/40" />
            )}
            <span className={item.completed ? "line-through opacity-50" : ""}>
              {item.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

const nodeTypes = { phase: PhaseNode };

const nodes: Node<PhaseNodeData>[] = [
  {
    id: "p1",
    type: "phase",
    position: { x: 0, y: 0 },
    data: {
      label: "Phase 1 — Foundation",
      status: "doing",
      icon: Database,
      color: "#6366f1",
      items: [
        { text: "TypeScript types", completed: true },
        { text: "Supabase schema & migrations", completed: false },
        { text: "Supabase client setup (@supabase/ssr)", completed: false },
        { text: "Project config & env setup", completed: false },
      ],
    },
  },
  {
    id: "p2",
    type: "phase",
    position: { x: 400, y: 0 },
    data: {
      label: "Phase 2 — Core Services",
      status: "todo",
      icon: Settings,
      color: "#8b5cf6",
      items: [
        { text: "DNS service (tangerine)", completed: false },
        { text: "WHOIS service (whoiser)", completed: false },
        { text: "Availability service (IANA RDAP)", completed: false },
        { text: "Public lookup APIs", completed: false },
        { text: "Integration tests", completed: false },
      ],
    },
  },
  {
    id: "p3",
    type: "phase",
    position: { x: 800, y: 0 },
    data: {
      label: "Phase 3 — Authentication",
      status: "todo",
      icon: ShieldCheck,
      color: "#ec4899",
      items: [
        { text: "Supabase Auth (GitHub, Google, Email)", completed: false },
        { text: "Auth server actions", completed: false },
        { text: "OAuth callback route", completed: false },
        { text: "Middleware protection", completed: false },
        { text: "Login/signup pages", completed: false },
      ],
    },
  },
  {
    id: "p4",
    type: "phase",
    position: { x: 0, y: 450 },
    data: {
      label: "Phase 4 — Public UI",
      status: "todo",
      icon: Layout,
      color: "#3b82f6",
      items: [
        { text: "App shell layout", completed: false },
        { text: "Homepage Hero & Search", completed: true },
        { text: "DNS results page", completed: false },
        { text: "Save to Dashboard button", completed: false },
      ],
    },
  },
  {
    id: "p5",
    type: "phase",
    position: { x: 400, y: 450 },
    data: {
      label: "Phase 5 — Dashboard",
      status: "todo",
      icon: Rocket,
      color: "#06b6d4",
      items: [
        { text: "Dashboard layout & stats", completed: false },
        { text: "Saved domains CRUD", completed: false },
        { text: "Domain detail page & history", completed: false },
        { text: "Notes & tags (auto-save)", completed: false },
        { text: "Manual re-check triggers", completed: false },
      ],
    },
  },
  {
    id: "p6",
    type: "phase",
    position: { x: 800, y: 450 },
    data: {
      label: "Phase 6 — Monitoring & Alerts",
      status: "todo",
      icon: Activity,
      color: "#10b981",
      items: [
        { text: "Change detection logic", completed: false },
        { text: "Vercel Daily Cron job", completed: false },
        { text: "In-app notification system", completed: false },
        { text: "Email alerts via Resend", completed: false },
      ],
    },
  },
  {
    id: "p7",
    type: "phase",
    position: { x: 200, y: 900 },
    data: {
      label: "Phase 7 — Settings & Polish",
      status: "todo",
      icon: Flag,
      color: "#f59e0b",
      items: [
        { text: "User profile & preferences", completed: false },
        { text: "Error boundaries & 404s", completed: false },
        { text: "Toast notifications (sonner)", completed: false },
        { text: "SEO & OG image generation", completed: false },
      ],
    },
  },
  {
    id: "p8",
    type: "phase",
    position: { x: 600, y: 900 },
    data: {
      label: "Phase 8 — Testing & QA",
      status: "todo",
      icon: TestTube,
      color: "#64748b",
      items: [
        { text: "End-to-end integration tests", completed: false },
        { text: "Build verification (zero TS errors)", completed: false },
        { text: "Manual QA pass (Light/Dark mode)", completed: false },
      ],
    },
  },
];

const edges: Edge[] = [
  {
    id: "e1-2",
    source: "p1",
    target: "p2",
    markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
    style: { stroke: "#94a3b8" },
  },
  {
    id: "e2-3",
    source: "p2",
    target: "p3",
    markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
    style: { stroke: "#94a3b8" },
  },
  {
    id: "e3-4",
    source: "p3",
    target: "p4",
    markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
    style: { stroke: "#94a3b8", strokeWidth: 2 },
  },
  {
    id: "e4-5",
    source: "p4",
    target: "p5",
    markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
    style: { stroke: "#94a3b8" },
  },
  {
    id: "e5-6",
    source: "p5",
    target: "p6",
    markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
    style: { stroke: "#94a3b8" },
  },
  {
    id: "e6-7",
    source: "p6",
    target: "p7",
    markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
    style: { stroke: "#94a3b8", strokeWidth: 2 },
  },
  {
    id: "e7-8",
    source: "p7",
    target: "p8",
    markerEnd: { type: MarkerType.ArrowClosed, color: "#94a3b8" },
    style: { stroke: "#94a3b8" },
  },
];

export function RoadmapFlowchart() {
  return (
    <div className="h-275 w-full rounded-2xl border bg-muted/30 backdrop-blur-sm shadow-inner">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes={nodeTypes}
        fitView
        fitViewOptions={{ padding: 0.1 }}
        proOptions={{ hideAttribution: true }}
        nodesDraggable={false}
        nodesConnectable={false}
        elementsSelectable={false}
        panOnDrag={false}
        zoomOnScroll={false}
        zoomOnPinch={false}
        zoomOnDoubleClick={false}
        preventScrolling={false}
      >
        <Background gap={32} size={1} className="opacity-15" />
      </ReactFlow>
    </div>
  );
}