import type { Metadata } from "next";
import Link from "next/link";
import { Globe, Map, Info } from "lucide-react";
import { ThemeToggle } from "@/components/theme-toggle";
import { RoadmapFlowchart } from "@/components/roadmap-flowchart";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";

export const metadata: Metadata = {
  title: "Roadmap",
  description: "Visual roadmap and development phases for VectorDNS.",
};

export default function RoadmapPage() {
  return (
    <div className="flex min-h-screen flex-col">
      {/* Header */}
      <header className="border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 sticky top-0 z-50">
        <div className="container mx-auto flex h-14 items-center justify-between px-4">
          <Link href="/" className="flex items-center gap-2">
            <Globe className="size-5 text-primary" />
            <span className="text-lg font-semibold tracking-tight">
              VectorDNS
            </span>
          </Link>
          <div className="flex items-center gap-4">
            <Link
              href="/docs"
              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
            >
              Docs
            </Link>
            <Link
              href="/roadmap"
              className="text-sm font-medium text-foreground transition-colors"
            >
              Roadmap
            </Link>
            <ThemeToggle />
          </div>
        </div>
      </header>

      <main className="flex-1">
        <div className="container mx-auto px-4 py-12">
          {/* Page Header */}
          <div className="mb-12 flex flex-col items-center text-center gap-4">
            <Badge
              variant="outline"
              className="px-3 py-1 gap-1.5 border-primary/20 bg-primary/5 text-primary"
            >
              <Map className="size-3.5" />
              Project Roadmap
            </Badge>
            <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
              Building the Future of{" "}
              <span className="text-primary">DNS Monitoring</span>
            </h1>
            <p className="max-w-2xl text-lg text-muted-foreground">
              Follow our journey from foundation to a full-featured domain
              toolkit. Drag, zoom, and explore the development phases below.
            </p>
          </div>

          {/* Interactive Flowchart */}
          <div className="mb-12">
            <RoadmapFlowchart />
          </div>

          {/* Additional Context Cards */}
          <div className="grid gap-6 md:grid-cols-2">
            <Card className="border-primary/10 bg-primary/5">
              <CardHeader>
                <div className="flex items-center gap-2 text-primary mb-1">
                  <Info className="size-5" />
                  <CardTitle className="text-lg">Project Philosophy</CardTitle>
                </div>
                <CardDescription>
                  VectorDNS is built on three core pillars: speed, accuracy, and
                  transparency. Every phase of our roadmap is designed to ensure
                  the highest quality data while maintaining a modern,
                  user-friendly experience.
                </CardDescription>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Contributing</CardTitle>
                <CardDescription>
                  We are currently in the early development stages. If
                  you&apos;re interested in contributing to the Go DNS API or
                  the Next.js frontend, please check out our GitHub repository
                  and open an issue or PR.
                </CardDescription>
              </CardHeader>
            </Card>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t py-6">
        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
          <p>&copy; {new Date().getFullYear()} VectorDNS</p>
        </div>
      </footer>
    </div>
  );
}