"use client"

import { useState, useEffect, useCallback } 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 { Skeleton } from "@/components/ui/skeleton"
import { Search, Eye, Filter, X, Loader2, RefreshCw } from "lucide-react"
import Link from "next/link"

interface Comparison {
  id: string
  title: string
  summary: string
  slug: string
  tags: string[]
  items: string[]
  viewCount: number
  createdAt: string
}

interface ComparisonsResponse {
  comparisons: Comparison[]
  total: number
  page: number
  limit: number
}

export default function ExplorePage() {
  const [comparisons, setComparisons] = useState<Comparison[]>([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [debouncedSearch, setDebouncedSearch] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("All")

  const limit = 20

  const fetchComparisons = useCallback(async (pageNum: number, search: string, append = false) => {
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams({
        page: pageNum.toString(),
        limit: limit.toString(),
        ...(search && { search }),
      })
      const res = await fetch(`/api/comparisons?${params}`)
      if (!res.ok) throw new Error("Failed to fetch comparisons")
      const data: ComparisonsResponse = await res.json()
      setComparisons(prev => append ? [...prev, ...data.comparisons] : data.comparisons)
      setTotal(data.total)
      setPage(pageNum)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong")
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearch(searchQuery)
      setPage(1)
      fetchComparisons(1, searchQuery)
    }, 300)
    return () => clearTimeout(timer)
  }, [searchQuery, fetchComparisons])

  useEffect(() => {
    fetchComparisons(1, "")
  }, [fetchComparisons])

  const categories = ["All", ...Array.from(new Set(comparisons.flatMap(c => c.tags)))]

  const filteredComparisons = comparisons.filter((comparison) => {
    const matchesCategory =
      selectedCategory === "All" ||
      comparison.tags.some((tag) => tag.toLowerCase() === selectedCategory.toLowerCase())
    return matchesCategory
  })

  const loadMore = () => {
    fetchComparisons(page + 1, debouncedSearch, true)
  }

  const hasMore = comparisons.length < total

  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 && comparisons.length === 0 ? (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {[...Array(6)].map((_, i) => (
            <Card key={i} className="h-full">
              <CardHeader className="pb-3">
                <Skeleton className="h-5 w-3/4 mb-2" />
                <Skeleton className="h-4 w-full" />
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex gap-1.5">
                  <Skeleton className="h-5 w-12" />
                  <Skeleton className="h-5 w-12" />
                </div>
                <Skeleton className="h-4 w-full" />
              </CardContent>
            </Card>
          ))}
        </div>
      ) : error ? (
        <Card className="p-8 text-center">
          <div className="flex flex-col items-center gap-4">
            <div className="size-12 rounded-full bg-destructive/10 flex items-center justify-center">
              <X className="size-6 text-destructive" />
            </div>
            <div>
              <p className="font-medium">Failed to load comparisons</p>
              <p className="text-sm text-muted-foreground">{error}</p>
            </div>
            <Button onClick={() => fetchComparisons(page, debouncedSearch)} className="gap-2">
              <RefreshCw className="size-4" />
              Retry
            </Button>
          </div>
        </Card>
      ) : 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.slug}`}>
              <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.summary}
                  </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 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.viewCount.toLocaleString()}
                      </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>
      )}

      {loading && comparisons.length > 0 && (
        <div className="flex justify-center py-4">
          <Loader2 className="size-6 animate-spin text-muted-foreground" />
        </div>
      )}

      {!loading && hasMore && (
        <div className="flex justify-center">
          <Button variant="outline" onClick={loadMore} className="gap-2">
            Load More
          </Button>
        </div>
      )}
    </div>
  )
}