import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Link } from "react-router-dom";
import {
  BookOpen,
  Code,
  Terminal,
  Video,
  LayoutDashboard,
  FileText,
  ArrowRight,
  Rocket,
  Zap,
  Shield,
  Users,
  Play,
  Download,
  Github,
  ExternalLink,
  Link as LinkIcon,
  Headphones,
} from "lucide-react";

const quickStartCards = [
  {
    title: "Platform tour",
    description: "Walk through dashboard, passport, and community experiences",
    icon: LayoutDashboard,
    href: "/docs/platform",
    duration: "6 min read",
    difficulty: "Beginner",
    isNew: true,
  },
  {
    title: "Project setup",
    description: "Launch your first AeThex project with guided onboarding",
    icon: Rocket,
    href: "/docs/getting-started",
    duration: "5 min read",
    difficulty: "Beginner",
  },
  {
    title: "First tutorial",
    description:
      "Follow your first interactive tutorial to build something amazing",
    icon: Play,
    href: "/docs/tutorials",
    duration: "15 min",
    difficulty: "Beginner",
  },
  {
    title: "API integration",
    description: "Learn how to integrate with AeThex APIs and services",
    icon: Code,
    href: "/docs/api",
    duration: "10 min read",
    difficulty: "Intermediate",
  },
  {
    title: "CLI tools",
    description: "Master the command line tools for efficient development",
    icon: Terminal,
    href: "/docs/cli",
    duration: "8 min read",
    difficulty: "Intermediate",
  },
  {
    title: "Platform integrations",
    description: "Embed partner agents and automate external workflows",
    icon: LinkIcon,
    href: "/docs/integrations",
    duration: "7 min read",
    difficulty: "Intermediate",
  },
];

const resourceSections = [
  {
    title: "Tutorials & Guides",
    description: "Step-by-step tutorials and comprehensive guides",
    icon: Video,
    href: "/docs/tutorials",
    items: [
      "Platform Quick Start",
      "Game Development",
      "AI Integration",
      "Performance Optimization",
    ],
    badge: "6 tutorials",
  },
  {
    title: "Platform Experience",
    description: "Understand dashboard, passport, and collaboration spaces",
    icon: LayoutDashboard,
    href: "/docs/platform",
    items: ["Dashboard", "Passport", "Community", "Mentorship"],
    badge: "New",
  },
  {
    title: "API Reference",
    description: "Complete API documentation with examples",
    icon: Code,
    href: "/docs/api",
    items: ["Authentication", "Project Management", "User APIs", "Webhooks"],
    badge: "40+ endpoints",
  },
  {
    title: "Examples",
    description: "Ready-to-use code examples and templates",
    icon: FileText,
    href: "/docs/examples",
    items: [
      "React Components",
      "Game Templates",
      "API Integration",
      "Deployment Scripts",
    ],
    badge: "25+ examples",
  },
  {
    title: "Integrations",
    description: "Embed partner tooling and automate external workflows",
    icon: LinkIcon,
    href: "/docs/integrations",
    items: [
      "HelloSkip agent",
      "Theming hooks",
      "Status preflights",
      "Troubleshooting",
    ],
    badge: "Updated",
  },
];

const learningResources = [
  {
    title: "Video tutorials",
    description: "Visual learning with step-by-step walkthroughs",
    icon: Video,
    count: "50+ videos",
    link: "/tutorials",
    color: "from-red-500 to-pink-600",
  },
  {
    title: "Podcast series",
    description: "Deep dives into AeThex technology and strategy",
    icon: Headphones,
    count: "20+ episodes",
    link: "/blog",
    color: "from-purple-500 to-indigo-600",
  },
  {
    title: "Code examples",
    description: "Production-ready snippets maintained by the platform team",
    icon: Github,
    count: "100+ repos",
    link: "/docs/examples",
    color: "from-green-500 to-emerald-600",
  },
  {
    title: "Downloads",
    description: "SDKs, design kits, and tooling for every platform",
    icon: Download,
    count: "Latest releases",
    link: "/docs/getting-started#setup-workflow",
    color: "from-blue-500 to-cyan-600",
  },
];

const featuredUpdates = [
  {
    title: "New AI Integration Tutorials",
    description: "Learn how to integrate cutting-edge AI features",
    date: "2 days ago",
    type: "Tutorial",
    isNew: true,
  },
  {
    title: "API v2.1 Documentation",
    description: "Updated API docs with new endpoints and features",
    date: "1 week ago",
    type: "API",
  },
  {
    title: "Performance Best Practices",
    description: "New guide on optimizing application performance",
    date: "2 weeks ago",
    type: "Guide",
  },
];

export default function DocsOverview() {
  return (
    <div>
      {/* Hero Section */}
      <div className="mb-12 text-center">
        <h2 className="text-3xl font-bold text-white mb-4">
          Welcome to AeThex Documentation
        </h2>
        <p className="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
          Everything you need to build, deploy, and scale amazing projects with
          AeThex. Get started with our guides, explore our APIs, and learn from
          comprehensive tutorials.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button
            asChild
            size="lg"
            className="bg-purple-600 hover:bg-purple-700"
          >
            <Link to="/docs/getting-started">
              <Rocket className="h-5 w-5 mr-2" />
              Get Started
            </Link>
          </Button>
          <Button
            asChild
            variant="outline"
            size="lg"
            className="border-slate-600 text-white hover:bg-slate-800"
          >
            <Link to="/docs/tutorials">
              <Play className="h-5 w-5 mr-2" />
              Watch Tutorials
            </Link>
          </Button>
        </div>
      </div>

      {/* Quick Start Cards */}
      <div className="mb-12">
        <h3 className="text-2xl font-bold text-white mb-6">Quick Start</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {quickStartCards.map((card, index) => {
            const Icon = card.icon;
            return (
              <Card
                key={index}
                className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"
              >
                <Link to={card.href}>
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between mb-2">
                      <Icon className="h-8 w-8 text-purple-400" />
                      {card.isNew && (
                        <Badge className="bg-green-600 text-white text-xs">
                          New
                        </Badge>
                      )}
                    </div>
                    <CardTitle className="text-white text-lg group-hover:text-purple-400 transition-colors">
                      {card.title}
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription className="text-gray-400 mb-3">
                      {card.description}
                    </CardDescription>
                    <div className="flex items-center justify-between text-xs text-gray-500">
                      <span>{card.duration}</span>
                      <Badge variant="outline" className="text-xs">
                        {card.difficulty}
                      </Badge>
                    </div>
                  </CardContent>
                </Link>
              </Card>
            );
          })}
        </div>
      </div>

      {/* Resource Sections */}
      <div className="mb-12">
        <h3 className="text-2xl font-bold text-white mb-6">
          Documentation Sections
        </h3>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {resourceSections.map((section, index) => {
            const Icon = section.icon;
            return (
              <Card
                key={index}
                className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
              >
                <Link to={section.href}>
                  <CardHeader>
                    <div className="flex items-center justify-between mb-2">
                      <Icon className="h-8 w-8 text-purple-400" />
                      <Badge variant="outline">{section.badge}</Badge>
                    </div>
                    <CardTitle className="text-white group-hover:text-purple-400 transition-colors">
                      {section.title}
                    </CardTitle>
                    <CardDescription className="text-gray-400">
                      {section.description}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2 mb-4">
                      {section.items.map((item, itemIndex) => (
                        <li
                          key={itemIndex}
                          className="text-sm text-gray-400 flex items-center"
                        >
                          <ArrowRight className="h-3 w-3 mr-2 text-purple-400" />
                          {item}
                        </li>
                      ))}
                    </ul>
                    <div className="flex items-center text-purple-400 text-sm group-hover:text-purple-300 transition-colors">
                      Explore section
                      <ArrowRight className="h-4 w-4 ml-1" />
                    </div>
                  </CardContent>
                </Link>
              </Card>
            );
          })}
        </div>
      </div>

      {/* Learning Resources */}
      <div className="mb-12">
        <h3 className="text-2xl font-bold text-white mb-6">
          Learning resources
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {learningResources.map((resource, index) => {
            const Icon = resource.icon;
            return (
              <Card
                key={resource.title}
                className="text-center bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300"
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <CardHeader>
                  <div
                    className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${resource.color} flex items-center justify-center mb-4`}
                  >
                    <Icon className="h-8 w-8 text-white" />
                  </div>
                  <CardTitle className="text-white text-lg">
                    {resource.title}
                  </CardTitle>
                  <CardDescription className="text-gray-400">
                    {resource.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <Badge variant="outline" className="mb-4">
                    {resource.count}
                  </Badge>
                  <Button asChild size="sm" className="w-full">
                    <Link to={resource.link}>Explore</Link>
                  </Button>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>

      {/* Featured Updates */}
      <div className="mb-12">
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-2xl font-bold text-white">Recent Updates</h3>
          <Button
            asChild
            variant="outline"
            size="sm"
            className="border-slate-600 text-white hover:bg-slate-800"
          >
            <Link to="/changelog">View All Updates</Link>
          </Button>
        </div>
        <div className="space-y-4">
          {featuredUpdates.map((update, index) => (
            <Card
              key={index}
              className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer"
            >
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <div className="flex items-center space-x-3 mb-2">
                      <h4 className="text-white font-medium">{update.title}</h4>
                      {update.isNew && (
                        <Badge className="bg-green-600 text-white text-xs">
                          New
                        </Badge>
                      )}
                      <Badge variant="outline" className="text-xs">
                        {update.type}
                      </Badge>
                    </div>
                    <p className="text-gray-400 text-sm">
                      {update.description}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-gray-500">{update.date}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Additional Resources */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader>
            <CardTitle className="text-white flex items-center">
              <Github className="h-5 w-5 mr-2" />
              GitHub Repository
            </CardTitle>
            <CardDescription className="text-gray-400">
              Explore our open-source projects and contribute to the community
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button
              asChild
              variant="outline"
              className="border-slate-600 text-white hover:bg-slate-800"
            >
              <a
                href="https://github.com/aethex/examples"
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center"
              >
                <ExternalLink className="h-4 w-4 mr-2" />
                View on GitHub
              </a>
            </Button>
          </CardContent>
        </Card>

        <Card className="bg-slate-800/50 border-slate-700">
          <CardHeader>
            <CardTitle className="text-white flex items-center">
              <Users className="h-5 w-5 mr-2" />
              Community Support
            </CardTitle>
            <CardDescription className="text-gray-400">
              Join our community for help, discussions, and collaboration
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button
              asChild
              variant="outline"
              className="border-slate-600 text-white hover:bg-slate-800"
            >
              <Link to="/community" className="inline-flex items-center">
                <ExternalLink className="h-4 w-4 mr-2" />
                Join Community
              </Link>
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* Support CTA */}
      <div className="mt-12 rounded-2xl border border-purple-500/40 bg-purple-900/20 p-8 text-center">
        <h3 className="text-3xl font-semibold text-white mb-4">
          Need help getting started?
        </h3>
        <p className="text-gray-300 max-w-3xl mx-auto mb-6">
          Our documentation team updates these guides weekly. If you&apos;re
          looking for tailored onboarding, architecture reviews, or migration
          support, reach out and we&apos;ll connect you with the right experts.
        </p>
        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <Button
            asChild
            size="lg"
            className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90"
          >
            <Link to="/support" className="flex items-center gap-2">
              <BookOpen className="h-5 w-5" />
              Contact support
            </Link>
          </Button>
          <Button
            asChild
            variant="outline"
            size="lg"
            className="border-purple-400/60 text-purple-200"
          >
            <Link to="/community" className="flex items-center gap-2">
              <Users className="h-5 w-5" />
              Join the community
            </Link>
          </Button>
        </div>
      </div>
    </div>
  );
}