import { RepoInput } from "@/components/repo-input";
import { ExampleRepoCard } from "@/components/example-repo-card";
import {
  Link2,
  Code2,
  Sparkles,
  FileText,
  GitBranch,
  Boxes,
  Search,
  BookOpen,
  ArrowRight,
  Github,
  Layers,
  Workflow,
  Terminal,
  FileCode,
  CheckCircle2,
} from "lucide-react";

export default function HomePage() {
  const steps = [
    {
      number: "01",
      icon: Link2,
      title: "Paste URL",
      description: "Enter any public GitHub repository URL",
    },
    {
      number: "02",
      icon: Code2,
      title: "Clone & Analyze",
      description: "We clone and deeply analyze the codebase structure",
    },
    {
      number: "03",
      icon: Sparkles,
      title: "AI Generation",
      description: "Our AI generates comprehensive documentation",
    },
    {
      number: "04",
      icon: FileText,
      title: "Interactive Docs",
      description: "Explore architecture diagrams and module breakdowns",
    },
  ];

  const features = [
    {
      icon: GitBranch,
      title: "Architecture Diagrams",
      description:
        "Auto-generated Mermaid diagrams visualizing your codebase structure, dependencies, and data flow.",
    },
    {
      icon: Boxes,
      title: "Module Breakdowns",
      description:
        "Understand each part of the codebase with detailed summaries, key files, and public APIs.",
    },
    {
      icon: Search,
      title: "Pattern Detection",
      description:
        "Coding conventions and design patterns automatically identified and documented for you.",
    },
    {
      icon: BookOpen,
      title: "Getting Started Guide",
      description:
        "Actionable onboarding documentation to get new developers productive in minutes, not days.",
    },
  ];

  const exampleRepos = [
    {
      name: "sindresorhus/p-limit",
      description: "Elegant promise concurrency limiter with a simple API and robust error handling.",
      language: "TypeScript",
      languageColor: "#3178c6",
      docId: "gen_1770657487236_d9id1pm",
    },
    {
      name: "expressjs/express",
      description: "Fast, unopinionated web framework for Node.js with minimalistic design.",
      language: "JavaScript",
      languageColor: "#f1e05a",
      docId: "gen_1770657496293_1hcn3m1",
    },
    {
      name: "pallets/flask",
      description: "Lightweight Python web framework with simplicity and flexibility at its core.",
      language: "Python",
      languageColor: "#3572A5",
      docId: "gen_1770657494422_mabt20p",
    },
    {
      name: "colinhacks/zod",
      description: "TypeScript-first schema validation with static type inference.",
      language: "TypeScript",
      languageColor: "#3178c6",
      docId: "gen_1770657488091_5hxoyyk",
    },
    {
      name: "tiangolo/fastapi",
      description: "Modern, high-performance Python API framework with automatic OpenAPI docs.",
      language: "Python",
      languageColor: "#3572A5",
      docId: "gen_1770657495398_10wi8js",
    },
    {
      name: "redis/node-redis",
      description: "High-performance Redis client for Node.js with comprehensive feature support.",
      language: "TypeScript",
      languageColor: "#3178c6",
      docId: "gen_1770657489049_vxw35dn",
    },
  ];

  return (
    <div className="relative">
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8 animate-fade-in opacity-0">
              <Sparkles className="w-4 h-4 text-blue-400" />
              <span className="text-sm text-zinc-300">Powered by AI</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight mb-6 animate-slide-up opacity-0">
              <span className="gradient-text">Understand any codebase</span>
              <br />
              <span className="text-white">in minutes</span>
            </h1>

            <p className="text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 stagger-1">
              Paste a GitHub URL. Get interactive onboarding documentation with
              architecture diagrams, module breakdowns, and getting started guides.
            </p>

            <div className="max-w-xl mx-auto mb-16 animate-slide-up opacity-0 stagger-2">
              <RepoInput />
            </div>

            <div className="relative max-w-4xl mx-auto mb-20 animate-slide-up opacity-0 stagger-3">
              <div className="relative rounded-xl overflow-hidden border border-white/10 shadow-2xl shadow-blue-500/10">
                <div className="flex items-center gap-2 px-4 py-3 bg-zinc-900/80 border-b border-white/10">
                  <div className="flex items-center gap-1.5">
                    <div className="w-3 h-3 rounded-full bg-red-500/80" />
                    <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
                    <div className="w-3 h-3 rounded-full bg-green-500/80" />
                  </div>
                  <div className="flex-1 text-center">
                    <span className="text-xs text-zinc-500 font-mono">codeboard-docs.html</span>
                  </div>
                  <div className="w-16" />
                </div>

                <div className="bg-[#0d0d12] p-6">
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div className="lg:col-span-2 space-y-4">
                      <div className="flex items-center gap-3 mb-4">
                        <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-blue-500/30">
                          <Layers className="w-5 h-5 text-blue-400" />
                        </div>
                        <div>
                          <h3 className="text-white font-semibold">Architecture Overview</h3>
                          <p className="text-xs text-zinc-500">High-level system design</p>
                        </div>
                      </div>

                      <div className="rounded-lg border border-white/10 bg-black/40 p-4 font-mono text-xs">
                        <div className="flex items-center gap-2 text-zinc-400 mb-3">
                          <Workflow className="w-4 h-4" />
                          <span>Dependency Graph</span>
                        </div>
                        <div className="space-y-2">
                          <div className="flex items-center gap-2">
                            <div className="w-3 h-3 rounded bg-blue-500/30 border border-blue-500/50" />
                            <span className="text-blue-300">src/index.ts</span>
                            <span className="text-zinc-600">→</span>
                            <div className="w-3 h-3 rounded bg-purple-500/30 border border-purple-500/50" />
                            <span className="text-purple-300">lib/core</span>
                          </div>
                          <div className="flex items-center gap-2 pl-6">
                            <span className="text-zinc-600">↳</span>
                            <div className="w-3 h-3 rounded bg-green-500/30 border border-green-500/50" />
                            <span className="text-green-300">utils/parser</span>
                          </div>
                          <div className="flex items-center gap-2 pl-6">
                            <span className="text-zinc-600">↳</span>
                            <div className="w-3 h-3 rounded bg-orange-500/30 border border-orange-500/50" />
                            <span className="text-orange-300">api/routes</span>
                          </div>
                        </div>
                      </div>

                      <div className="rounded-lg border border-white/10 bg-black/40 p-4">
                        <div className="flex items-center gap-2 text-zinc-400 mb-3 text-xs font-mono">
                          <Terminal className="w-4 h-4" />
                          <span>Key Metrics</span>
                        </div>
                        <div className="grid grid-cols-3 gap-4">
                          <div className="text-center p-3 rounded-lg bg-white/5">
                            <div className="text-xl font-bold text-white">24</div>
                            <div className="text-xs text-zinc-500">Modules</div>
                          </div>
                          <div className="text-center p-3 rounded-lg bg-white/5">
                            <div className="text-xl font-bold text-white">156</div>
                            <div className="text-xs text-zinc-500">Files</div>
                          </div>
                          <div className="text-center p-3 rounded-lg bg-white/5">
                            <div className="text-xl font-bold text-white">8.2k</div>
                            <div className="text-xs text-zinc-500">Lines</div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="space-y-4">
                      <div className="flex items-center gap-2 text-zinc-400 mb-2">
                        <FileCode className="w-4 h-4" />
                        <span className="text-sm font-medium">Module Breakdown</span>
                      </div>

                      <div className="space-y-3">
                        {[
                          { name: "Core Engine", files: 12, color: "blue" },
                          { name: "API Layer", files: 8, color: "purple" },
                          { name: "Utilities", files: 15, color: "green" },
                          { name: "Tests", files: 23, color: "orange" },
                        ].map((mod) => (
                          <div
                            key={mod.name}
                            className="p-3 rounded-lg bg-white/5 border border-white/5 hover:border-white/10 transition-colors"
                          >
                            <div className="flex items-center justify-between mb-2">
                              <span className="text-sm text-zinc-300">{mod.name}</span>
                              <span className="text-xs text-zinc-500">{mod.files} files</span>
                            </div>
                            <div className="h-1.5 rounded-full bg-white/10 overflow-hidden">
                              <div
                                className={`h-full rounded-full bg-${mod.color}-500/60`}
                                style={{ width: `${Math.random() * 40 + 60}%` }}
                              />
                            </div>
                          </div>
                        ))}
                      </div>

                      <div className="pt-4 border-t border-white/10">
                        <div className="flex items-center gap-2 text-green-400 text-sm">
                          <CheckCircle2 className="w-4 h-4" />
                          <span>Docs generated in 2m 34s</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="absolute -inset-1 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-indigo-500/20 rounded-xl blur-2xl -z-10 opacity-50" />
            </div>

            <div className="flex flex-wrap justify-center gap-8 sm:gap-12 animate-fade-in opacity-0 stagger-4">
              <div className="text-center">
                <div className="text-2xl sm:text-3xl font-bold text-white">~3 min</div>
                <div className="text-sm text-zinc-500">Average generation time</div>
              </div>
              <div className="hidden sm:block w-px bg-zinc-800" />
              <div className="text-center">
                <div className="text-2xl sm:text-3xl font-bold text-white">100%</div>
                <div className="text-sm text-zinc-500">Free for public repos</div>
              </div>
              <div className="hidden sm:block w-px bg-zinc-800" />
              <div className="text-center">
                <div className="text-2xl sm:text-3xl font-bold text-white">10+</div>
                <div className="text-sm text-zinc-500">Languages supported</div>
              </div>
            </div>
          </div>
        </div>

        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
      </section>

      <section id="how-it-works" className="py-20 lg:py-32">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              How It Works
            </h2>
            <p className="text-zinc-400 max-w-xl mx-auto">
              Four simple steps to comprehensive codebase documentation
            </p>
          </div>

          <div className="relative">
            <div className="hidden lg:block absolute top-24 left-[12.5%] right-[12.5%] h-px bg-gradient-to-r from-transparent via-zinc-700 to-transparent" />

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {steps.map((step) => (
                <div key={step.number} className="relative group">
                  <div className="text-center">
                    <div className="text-6xl font-bold text-zinc-800/50 mb-4 group-hover:text-blue-500/20 transition-colors">
                      {step.number}
                    </div>

                    <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-2xl glass mb-6 group-hover:border-blue-500/30 transition-colors">
                      <step.icon className="w-7 h-7 text-blue-400" />

                      <div className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
                    </div>

                    <h3 className="text-lg font-semibold text-white mb-2">
                      {step.title}
                    </h3>

                    <p className="text-sm text-zinc-400 leading-relaxed">
                      {step.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="py-20 lg:py-32">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6">
              <Github className="w-4 h-4 text-blue-400" />
              <span className="text-sm text-zinc-300">Try It Out</span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              Featured Examples
            </h2>
            <p className="text-zinc-400 max-w-xl mx-auto">
              Pre-generated docs ready to explore — or paste any repo URL above
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {exampleRepos.map((repo) => (
              <ExampleRepoCard key={repo.name} repo={repo} />
            ))}
          </div>
        </div>
      </section>

      <section id="features" className="py-20 lg:py-32">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
              Everything You Need
            </h2>
            <p className="text-zinc-400 max-w-xl mx-auto">
              Comprehensive documentation generated automatically from your codebase
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {features.map((feature) => (
              <div
                key={feature.title}
                className="group relative p-8 rounded-2xl glass hover:bg-white/[0.05] transition-all duration-300 hover:-translate-y-1"
              >
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-indigo-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity -z-10 blur-xl" />

                <div className="flex items-start gap-5">
                  <div className="flex-shrink-0">
                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center border border-white/10 group-hover:border-blue-500/30 transition-colors">
                      <feature.icon className="w-6 h-6 text-blue-400" />
                    </div>
                  </div>

                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-blue-300 transition-colors">
                      {feature.title}
                    </h3>
                    <p className="text-zinc-400 leading-relaxed">
                      {feature.description}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 lg:py-32">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="relative rounded-3xl glass-strong p-8 sm:p-12 lg:p-16 overflow-hidden">
            <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
            <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-indigo-500/10 to-cyan-500/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />

            <div className="relative text-center">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-8">
                <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
                <span className="text-sm text-zinc-300">Available for projects</span>
              </div>

              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
                Built by{" "}
                <span className="gradient-text">Vectry</span>
              </h2>

              <p className="text-lg text-zinc-400 mb-4 max-w-xl mx-auto">
                We&apos;re an AI consultancy that builds tools like this for businesses.
              </p>

              <p className="text-zinc-500 mb-8">
                Need AI automation for your workflow?
              </p>

              <a
                href="https://vectry.tech"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 btn-primary animate-pulse-glow"
              >
                Talk to Us
                <ArrowRight className="w-4 h-4" />
              </a>

              <div className="mt-12 pt-8 border-t border-white/10">
                <div className="flex flex-wrap items-center justify-center gap-6 text-sm text-zinc-500">
                  <a
                    href="https://gitea.repi.fun/repi/codeboard"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-2 hover:text-white transition-colors"
                  >
                    <Github className="w-4 h-4" />
                    Open Source
                  </a>
                  <span className="hidden sm:inline">•</span>
                  <span>Free for public repositories</span>
                  <span className="hidden sm:inline">•</span>
                  <span>No signup required</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}