import { PageLayout } from "@/components/layout/PageLayout";
import { useQuery } from "@tanstack/react-query";
import { Collection } from "@shared/schema";
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { BookOpen, User, Calendar, Plus } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { SearchBar } from "@/components/common/SearchBar";
import { useState } from "react";

export default function Collections() {
  const [searchQuery, setSearchQuery] = useState("");
  
  const { data: collections, isLoading } = useQuery<Collection[]>({
    queryKey: ['/api/collections'],
  });
  
  const filteredCollections = collections?.filter(collection => {
    if (!searchQuery) return true;
    return collection.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
           collection.description?.toLowerCase().includes(searchQuery.toLowerCase());
  });

  return (
    <PageLayout>
      <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 py-8">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold font-serif text-navy dark:text-cream">Collections</h1>
            <p className="text-navy/70 dark:text-cream/70 mt-1">Curated sets of works organized by theme, author, or genre</p>
          </div>
          <div className="flex items-center gap-3">
            <SearchBar 
              placeholder="Search collections..." 
              onSearch={query => setSearchQuery(query)}
            />
            <Link href="/collections/create">
              <Button className="bg-russet hover:bg-russet/90 text-white">
                <Plus className="mr-1 h-4 w-4" /> Create
              </Button>
            </Link>
          </div>
        </div>

        {isLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: 6 }).map((_, i) => (
              <Card key={i} className="bg-cream dark:bg-dark-surface">
                <CardHeader>
                  <Skeleton className="h-7 w-3/4 mb-2" />
                  <Skeleton className="h-4 w-full" />
                </CardHeader>
                <CardContent>
                  <Skeleton className="h-16 w-full" />
                </CardContent>
                <CardFooter>
                  <Skeleton className="h-8 w-full" />
                </CardFooter>
              </Card>
            ))}
          </div>
        ) : filteredCollections?.length ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredCollections.map(collection => (
              <Card key={collection.id} className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow">
                <CardHeader>
                  <CardTitle className="font-serif">{collection.name}</CardTitle>
                  <CardDescription>
                    {collection.description?.slice(0, 100)}{collection.description?.length > 100 ? "..." : ""}
                  </CardDescription>
                </CardHeader>
                <CardContent className="text-sm text-navy/70 dark:text-cream/70 space-y-2">
                  <div className="flex items-center gap-2">
                    <User className="h-4 w-4" />
                    <span>Created by User {collection.userId}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <BookOpen className="h-4 w-4" />
                    <span>{Math.floor(Math.random() * 20) + 1} works</span> {/* In a real app, we'd have the actual count */}
                  </div>
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4" />
                    <span>Updated {new Date(collection.createdAt).toLocaleDateString()}</span>
                  </div>
                </CardContent>
                <CardFooter>
                  <Link href={`/collections/${collection.slug}`} className="w-full">
                    <Button variant="outline" className="w-full text-russet border-russet/30">
                      Explore Collection
                    </Button>
                  </Link>
                </CardFooter>
              </Card>
            ))}
          </div>
        ) : (
          <div className="text-center py-12">
            <h2 className="text-xl font-serif mb-2">No collections found</h2>
            <p className="text-navy/70 dark:text-cream/70 mb-6">
              {searchQuery ? `No collections matching "${searchQuery}"` : "There are no collections yet"}
            </p>
            <Link href="/collections/create">
              <Button>Create a Collection</Button>
            </Link>
          </div>
        )}
      </div>
    </PageLayout>
  );
}
