import { PageLayout } from "@/components/layout/PageLayout";
import { SearchBar } from "@/components/common/SearchBar";
import { WorkCard } from "@/components/common/WorkCard";
import { AuthorChip } from "@/components/common/AuthorChip";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { useQuery } from "@tanstack/react-query";
import { WorkWithAuthor, AuthorWithWorks } from "@/lib/types";
import { Link } from "wouter";

export default function Home() {
  const { data: featuredAuthors, isLoading: authorsLoading } = useQuery<AuthorWithWorks[]>({
    queryKey: ['/api/authors?limit=4'],
  });

  const { data: trendingWorks, isLoading: worksLoading } = useQuery<WorkWithAuthor[]>({
    queryKey: ['/api/works?limit=3'],
  });

  // Get a random quote for the hero section
  const quotes = [
    { text: "The world is a book and those who do not travel read only one page.", author: "St. Augustine" },
    { text: "In a good book the best is between the lines.", author: "Swedish Proverb" },
    { text: "We read to know we are not alone.", author: "C.S. Lewis" },
    { text: "A reader lives a thousand lives before he dies. The man who never reads lives only one.", author: "George R.R. Martin" },
  ];
  
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

  return (
    <PageLayout>
      {/* Hero Section */}
      <section className="bg-primary/10 dark:bg-primary/20 py-16 md:py-24">
        <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 text-center">
          <div className="max-w-3xl mx-auto mb-8">
            <h1 className="text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-primary dark:text-primary-foreground mb-6">
              Discover the world's literary heritage
            </h1>
            <p className="text-lg md:text-xl text-foreground/80 dark:text-foreground/80 italic font-serif mb-2">
              "{randomQuote.text}"
            </p>
            <p className="text-foreground/60 dark:text-foreground/60">— {randomQuote.author}</p>
          </div>
          
          <SearchBar className="max-w-xl mx-auto" fullWidth />
        </div>
      </section>

      {/* Featured Authors */}
      <section className="py-12 md:py-16">
        <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
              Featured Authors
            </h2>
            <Link href="/authors">
              <Button variant="link" className="text-accent dark:text-accent">
                View all authors
              </Button>
            </Link>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {authorsLoading ? (
              Array.from({ length: 4 }).map((_, i) => (
                <Card key={i} className="bg-card dark:bg-card">
                  <CardContent className="p-6">
                    <div className="flex items-center gap-4 mb-4">
                      <div className="w-16 h-16 rounded-full bg-primary/10 dark:bg-primary/20 animate-pulse"></div>
                      <div className="flex-1">
                        <div className="h-5 bg-primary/10 dark:bg-primary/20 rounded-md w-3/4 mb-2 animate-pulse"></div>
                        <div className="h-4 bg-primary/10 dark:bg-primary/20 rounded-md w-1/2 animate-pulse"></div>
                      </div>
                    </div>
                    <div className="h-20 bg-primary/10 dark:bg-primary/20 rounded-md animate-pulse"></div>
                  </CardContent>
                </Card>
              ))
            ) : (
              featuredAuthors?.map((author) => (
                <Card key={author.id} className="bg-card dark:bg-card hover:shadow-md transition-shadow">
                  <CardContent className="p-6">
                    <AuthorChip author={author} size="lg" withLifeDates className="mb-4" />
                    <p className="text-foreground/80 dark:text-foreground/80 text-sm line-clamp-4 mb-4">
                      {author.biography?.slice(0, 150)}...
                    </p>
                    <Link href={`/authors/${author.slug}`}>
                      <Button size="sm" variant="outline" className="w-full text-primary dark:text-primary border-primary/50 hover:bg-primary/10">
                        Explore works
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              ))
            )}
          </div>
        </div>
      </section>

      {/* Trending Works */}
      <section className="py-12 md:py-16 bg-muted dark:bg-muted">
        <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
              Trending Works
            </h2>
            <Link href="/explore">
              <Button variant="link" className="text-accent dark:text-accent">
                Explore all works
              </Button>
            </Link>
          </div>

          <div className="space-y-6">
            {worksLoading ? (
              Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="h-40 bg-card dark:bg-card rounded-lg animate-pulse"></div>
              ))
            ) : (
              trendingWorks?.map((work) => (
                <WorkCard key={work.id} work={work} />
              ))
            )}
          </div>
        </div>
      </section>

      {/* Recently Translated */}
      <section className="py-12 md:py-16">
        <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
              Recently Translated
            </h2>
            <Link href="/explore?sort=recent">
              <Button variant="link" className="text-accent dark:text-accent">
                See more
              </Button>
            </Link>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {worksLoading ? (
              Array.from({ length: 3 }).map((_, i) => (
                <div key={i} className="h-64 bg-card dark:bg-card rounded-lg animate-pulse"></div>
              ))
            ) : (
              trendingWorks?.map((work) => (
                <WorkCard key={work.id} work={work} grid />
              ))
            )}
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-16 md:py-24 bg-russet text-white">
        <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 text-center">
          <h2 className="text-2xl md:text-3xl font-serif font-bold mb-4">
            Contribute to Literary Heritage
          </h2>
          <p className="text-lg max-w-2xl mx-auto mb-8 text-white/90">
            Share your translations, engage with other readers, and help preserve and spread literary works across languages.
          </p>
          <div className="flex gap-4 justify-center flex-wrap">
            <Link href="/submit">
              <Button size="lg" className="bg-white hover:bg-white/90 text-russet">
                Submit a Translation
              </Button>
            </Link>
            <Link href="/explore">
              <Button size="lg" variant="outline" className="text-white border-white/30 hover:bg-white/10">
                Explore the Archive
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </PageLayout>
  );
}
