import { useState } from "react";
import Layout from "@/components/Layout";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  BookOpen,
  Play,
  Clock,
  User,
  Star,
  Search,
  Filter,
  Code,
  Gamepad2,
  Rocket,
  Database,
  Palette,
  Brain,
  Trophy,
  ChevronRight,
  Download,
  Heart,
  Eye,
} from "lucide-react";

interface Tutorial {
  id: string;
  title: string;
  description: string;
  category: string;
  difficulty: "beginner" | "intermediate" | "advanced";
  duration: string;
  author: string;
  rating: number;
  views: number;
  likes: number;
  tags: string[];
  thumbnail: string;
  isNew?: boolean;
  isPremium?: boolean;
}

const tutorials: Tutorial[] = [
  {
    id: "1",
    title: "Getting Started with AeThex Platform",
    description:
      "Complete beginner's guide to navigating and using the AeThex development platform",
    category: "Platform",
    difficulty: "beginner",
    duration: "15 min",
    author: "AeThex Team",
    rating: 4.9,
    views: 2847,
    likes: 234,
    tags: ["getting-started", "platform", "basics"],
    thumbnail:
      "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400",
    isNew: true,
  },
  {
    id: "2",
    title: "Building Your First Game with Unity & AeThex",
    description:
      "Step-by-step tutorial for creating a 2D platformer game using Unity and AeThex tools",
    category: "Game Development",
    difficulty: "beginner",
    duration: "45 min",
    author: "Mike Johnson",
    rating: 4.8,
    views: 1923,
    likes: 187,
    tags: ["unity", "2d", "platformer", "game-dev"],
    thumbnail:
      "https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400",
  },
  {
    id: "3",
    title: "Advanced AI Integration Patterns",
    description:
      "Learn how to integrate advanced AI systems into your projects using AeThex AI tools",
    category: "AI/ML",
    difficulty: "advanced",
    duration: "60 min",
    author: "Dr. Sarah Chen",
    rating: 4.7,
    views: 856,
    likes: 98,
    tags: ["ai", "machine-learning", "integration", "advanced"],
    thumbnail:
      "https://images.unsplash.com/photo-1507146426996-ef05306b995a?w=400",
    isPremium: true,
  },
  {
    id: "4",
    title: "Database Design Best Practices",
    description:
      "Master database architecture and optimization for high-performance applications",
    category: "Backend",
    difficulty: "intermediate",
    duration: "35 min",
    author: "Alex Rodriguez",
    rating: 4.6,
    views: 1456,
    likes: 142,
    tags: ["database", "sql", "optimization", "backend"],
    thumbnail:
      "https://images.unsplash.com/photo-1544383835-bda2bc66a55d?w=400",
  },
  {
    id: "5",
    title: "UI/UX Design for Games",
    description:
      "Create compelling user interfaces and experiences for modern games",
    category: "Design",
    difficulty: "intermediate",
    duration: "40 min",
    author: "Emma Wilson",
    rating: 4.8,
    views: 2134,
    likes: 203,
    tags: ["ui", "ux", "design", "games"],
    thumbnail:
      "https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=400",
  },
  {
    id: "6",
    title: "Performance Optimization Techniques",
    description:
      "Advanced strategies for optimizing application performance and reducing load times",
    category: "Performance",
    difficulty: "advanced",
    duration: "50 min",
    author: "David Kim",
    rating: 4.9,
    views: 987,
    likes: 124,
    tags: ["performance", "optimization", "advanced"],
    thumbnail:
      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400",
    isNew: true,
  },
];

const categories = [
  { id: "all", name: "All", icon: BookOpen, count: tutorials.length },
  { id: "platform", name: "Platform", icon: Rocket, count: 1 },
  { id: "game-development", name: "Game Dev", icon: Gamepad2, count: 1 },
  { id: "ai-ml", name: "AI/ML", icon: Brain, count: 1 },
  { id: "backend", name: "Backend", icon: Database, count: 1 },
  { id: "design", name: "Design", icon: Palette, count: 1 },
  { id: "performance", name: "Performance", icon: Trophy, count: 1 },
];

export default function Tutorials() {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("all");
  const [selectedDifficulty, setSelectedDifficulty] = useState("all");
  const [sortBy, setSortBy] = useState("newest");

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "beginner":
        return "bg-green-500";
      case "intermediate":
        return "bg-yellow-500";
      case "advanced":
        return "bg-red-500";
      default:
        return "bg-gray-500";
    }
  };

  const getDifficultyTextColor = (difficulty: string) => {
    switch (difficulty) {
      case "beginner":
        return "text-green-400";
      case "intermediate":
        return "text-yellow-400";
      case "advanced":
        return "text-red-400";
      default:
        return "text-gray-400";
    }
  };

  const filteredTutorials = tutorials.filter((tutorial) => {
    const matchesSearch =
      tutorial.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      tutorial.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
      tutorial.tags.some((tag) =>
        tag.toLowerCase().includes(searchTerm.toLowerCase()),
      );
    const matchesCategory =
      selectedCategory === "all" ||
      tutorial.category.toLowerCase().replace(/[\/\s]/g, "-") ===
        selectedCategory;
    const matchesDifficulty =
      selectedDifficulty === "all" ||
      tutorial.difficulty === selectedDifficulty;

    return matchesSearch && matchesCategory && matchesDifficulty;
  });

  return (
    <Layout>
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
        <div className="container mx-auto px-4 py-8">
          {/* Header */}
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-white mb-4">
              AeThex Tutorials
            </h1>
            <p className="text-xl text-gray-300 mb-6">
              Master cutting-edge development skills with our comprehensive
              tutorial library
            </p>

            {/* Search and Filters */}
            <div className="flex flex-col lg:flex-row gap-4 mb-6">
              <div className="flex-1">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                  <Input
                    placeholder="Search tutorials, topics, or technologies..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10 bg-slate-800/50 border-slate-600 text-white"
                  />
                </div>
              </div>
              <div className="flex gap-2">
                <select
                  value={selectedDifficulty}
                  onChange={(e) => setSelectedDifficulty(e.target.value)}
                  className="bg-slate-800/50 border-slate-600 text-white rounded-md px-3 py-2"
                >
                  <option value="all">All Levels</option>
                  <option value="beginner">Beginner</option>
                  <option value="intermediate">Intermediate</option>
                  <option value="advanced">Advanced</option>
                </select>
                <select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value)}
                  className="bg-slate-800/50 border-slate-600 text-white rounded-md px-3 py-2"
                >
                  <option value="newest">Newest</option>
                  <option value="popular">Most Popular</option>
                  <option value="rating">Highest Rated</option>
                </select>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
            {/* Categories Sidebar */}
            <div className="lg:col-span-1">
              <Card className="bg-slate-800/50 border-slate-700 sticky top-4">
                <CardHeader>
                  <CardTitle className="text-white flex items-center">
                    <Filter className="h-5 w-5 mr-2" />
                    Categories
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {categories.map((category) => {
                    const Icon = category.icon;
                    return (
                      <button
                        key={category.id}
                        onClick={() => setSelectedCategory(category.id)}
                        className={`w-full flex items-center justify-between p-3 rounded-lg transition-all ${
                          selectedCategory === category.id
                            ? "bg-purple-600 text-white"
                            : "bg-slate-900/50 text-gray-300 hover:bg-slate-700/50"
                        }`}
                      >
                        <div className="flex items-center space-x-3">
                          <Icon className="h-4 w-4" />
                          <span className="text-sm font-medium">
                            {category.name}
                          </span>
                        </div>
                        <Badge variant="outline" className="text-xs">
                          {category.count}
                        </Badge>
                      </button>
                    );
                  })}
                </CardContent>
              </Card>
            </div>

            {/* Tutorials Grid */}
            <div className="lg:col-span-3">
              <div className="mb-4 flex items-center justify-between">
                <p className="text-gray-400">
                  Showing {filteredTutorials.length} tutorials
                </p>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {filteredTutorials.map((tutorial) => (
                  <Card
                    key={tutorial.id}
                    className="bg-slate-800/50 border-slate-700 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 cursor-pointer group"
                  >
                    <div className="relative">
                      <img
                        src={tutorial.thumbnail}
                        alt={tutorial.title}
                        className="w-full h-48 object-cover rounded-t-lg"
                      />
                      <div className="absolute inset-0 bg-black/40 rounded-t-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <Button
                          size="lg"
                          className="bg-purple-600 hover:bg-purple-700"
                        >
                          <Play className="h-5 w-5 mr-2" />
                          Start Tutorial
                        </Button>
                      </div>
                      {tutorial.isNew && (
                        <Badge className="absolute top-2 left-2 bg-green-600 text-white">
                          New
                        </Badge>
                      )}
                      {tutorial.isPremium && (
                        <Badge className="absolute top-2 right-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white">
                          Premium
                        </Badge>
                      )}
                    </div>

                    <CardContent className="p-4">
                      <div className="flex items-center justify-between mb-2">
                        <Badge variant="outline" className="text-xs">
                          {tutorial.category}
                        </Badge>
                        <Badge
                          className={`${getDifficultyColor(tutorial.difficulty)} text-white text-xs`}
                        >
                          {tutorial.difficulty}
                        </Badge>
                      </div>

                      <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-purple-400 transition-colors">
                        {tutorial.title}
                      </h3>

                      <p className="text-gray-400 text-sm mb-3 line-clamp-2">
                        {tutorial.description}
                      </p>

                      <div className="flex items-center justify-between text-xs text-gray-500 mb-3">
                        <div className="flex items-center space-x-3">
                          <div className="flex items-center">
                            <Clock className="h-3 w-3 mr-1" />
                            {tutorial.duration}
                          </div>
                          <div className="flex items-center">
                            <User className="h-3 w-3 mr-1" />
                            {tutorial.author}
                          </div>
                        </div>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-3 text-xs text-gray-500">
                          <div className="flex items-center">
                            <Star className="h-3 w-3 mr-1 text-yellow-400" />
                            {tutorial.rating}
                          </div>
                          <div className="flex items-center">
                            <Eye className="h-3 w-3 mr-1" />
                            {tutorial.views}
                          </div>
                          <div className="flex items-center">
                            <Heart className="h-3 w-3 mr-1" />
                            {tutorial.likes}
                          </div>
                        </div>
                        <ChevronRight className="h-4 w-4 text-gray-400 group-hover:text-purple-400 transition-colors" />
                      </div>

                      <div className="flex flex-wrap gap-1 mt-3">
                        {tutorial.tags.slice(0, 3).map((tag) => (
                          <Badge
                            key={tag}
                            variant="outline"
                            className="text-xs"
                          >
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

              {filteredTutorials.length === 0 && (
                <Card className="bg-slate-800/50 border-slate-700">
                  <CardContent className="p-8 text-center">
                    <BookOpen className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-white mb-2">
                      No tutorials found
                    </h3>
                    <p className="text-gray-400">
                      Try adjusting your search terms or filters to find what
                      you're looking for.
                    </p>
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}