"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Search, Eye, BarChart3, Filter, X, Loader2 } from "lucide-react"
import Link from "next/link"

const allComparisons = [
  {
    id: "1",
    title: "React vs Vue vs Svelte",
    description: "Frontend framework comparison for modern web development",
    items: ["React", "Vue", "Svelte"],
    tags: ["Tech", "JavaScript"],
    author: "Alex Johnson",
    overallScore: 8.5,
    views: 1247,
  },
  {
    id: "2",
    title: "GPT-4 vs Claude vs Gemini",
    description: "Comparing top AI language models for reasoning tasks",
    items: ["GPT-4", "Claude 3", "Gemini Pro"],
    tags: ["AI", "Products"],
    author: "Sarah Chen",
    overallScore: 8.8,
    views: 3891,
  },
  {
    id: "3",
    title: "Notion vs Obsidian vs Roam",
    description: "Knowledge management tools for productivity",
    items: ["Notion", "Obsidian", "Roam Research"],
    tags: ["Productivity", "Tools"],
    author: "Mike Peters",
    overallScore: 7.5,
    views: 892,
  },
  {
    id: "4",
    title: "AWS vs GCP vs Azure",
    description: "Cloud platform comparison for enterprise infrastructure",
    items: ["AWS", "Google Cloud", "Microsoft Azure"],
    tags: ["Tech", "Cloud"],
    author: "Emma Wilson",
    overallScore: 9.0,
    views: 2156,
  },
  {
    id: "5",
    title: "iPhone 15 Pro vs Samsung S24 Ultra",
    description: "Flagship smartphone comparison with camera and performance benchmarks",
    items: ["iPhone 15 Pro", "Samsung S24 Ultra"],
    tags: ["Products", "Mobile"],
    author: "James Lee",
    overallScore: 8.2,
    views: 3421,
  },
  {
    id: "6",
    title: "Python vs Rust vs Go",
    description: "Systems programming languages compared for performance and productivity",
    items: ["Python", "Rust", "Go"],
    tags: ["Tech", "Programming"],
    author: "Anna Kim",
    overallScore: 8.4,
    views: 1873,
  },
]

const categories = ["All", "Tech", "Products", "AI", "Cloud", "Productivity"]

export default function ExplorePage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("All")
  const [loading, setLoading] = useState(false)

  const filteredComparisons = allComparisons.filter((comparison) => {
    const matchesSearch =
      searchQuery === "" ||
      comparison.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      comparison.items.some((item) =>
        item.toLowerCase().includes(searchQuery.toLowerCase())
      )
    const matchesCategory =
      selectedCategory === "All" ||
      comparison.tags.some((tag) => tag.toLowerCase() === selectedCategory.toLowerCase())
    return matchesSearch && matchesCategory
  })

  return (
    <div className="max-w-6xl mx-auto p-4 sm:p-6 space-y-6">
      <div className="space-y-4">
        <h1 className="text-2xl font-bold">Explore Comparisons</h1>

        <div className="flex flex-col sm:flex-row gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
            <Input
              type="search"
              placeholder="Search comparisons..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
        </div>

        <div className="flex flex-wrap gap-2">
          {categories.map((category) => (
            <Button
              key={category}
              variant={selectedCategory === category ? "default" : "outline"}
              size="sm"
              onClick={() => setSelectedCategory(category)}
              className="rounded-full"
            >
              {category}
            </Button>
          ))}
        </div>
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-12">
          <Loader2 className="size-8 animate-spin text-primary" />
        </div>
      ) : filteredComparisons.length > 0 ? (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {filteredComparisons.map((comparison) => (
            <Link key={comparison.id} href={`/compare/${comparison.id}`}>
              <Card className="h-full transition-all hover:border-primary hover:shadow-md">
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between gap-2">
                    <CardTitle className="text-base line-clamp-1 flex-1">
                      {comparison.title}
                    </CardTitle>
                  </div>
                  <CardDescription className="text-sm line-clamp-2">
                    {comparison.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex flex-wrap gap-1.5">
                    {comparison.tags.map((tag) => (
                      <Badge key={tag} variant="secondary" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>

                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
                    <Avatar className="size-6">
                      <AvatarFallback className="text-[10px]">
                        {comparison.author.split(" ").map((n) => n[0]).join("")}
                      </AvatarFallback>
                    </Avatar>
                    <span className="text-xs">{comparison.author}</span>
                  </div>

                  <div className="flex items-center justify-between pt-2 border-t">
                    <span className="text-sm text-muted-foreground">
                      {comparison.items.join(" vs ")}
                    </span>
                    <div className="flex items-center gap-3 text-sm">
                      <span className="flex items-center gap-1 text-muted-foreground">
                        <Eye className="size-3.5" />
                        {comparison.views.toLocaleString()}
                      </span>
                      <span className="font-semibold text-foreground bg-primary/10 px-2 py-0.5 rounded">
                        {comparison.overallScore}/10
                      </span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      ) : (
        <Card className="p-8 text-center">
          <div className="flex flex-col items-center gap-4">
            <div className="size-12 rounded-full bg-muted flex items-center justify-center">
              <Search className="size-6 text-muted-foreground" />
            </div>
            <div>
              <p className="font-medium">No comparisons found</p>
              <p className="text-sm text-muted-foreground">
                Try adjusting your search or filters
              </p>
            </div>
            <Button
              variant="outline"
              onClick={() => {
                setSearchQuery("")
                setSelectedCategory("All")
              }}
            >
              Clear Filters
            </Button>
          </div>
        </Card>
      )}

      <div className="flex justify-center">
        <Button variant="outline" className="gap-2">
          Load More
        </Button>
      </div>
    </div>
  )
}