import { useQuery } from "@tanstack/react-query";
import { Link } from "wouter";
import { type Article } from "@shared/schema";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { Eye, Clock } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import Header from "@/components/header";
import Footer from "@/components/footer";

function FeaturedSection({ articles }: { articles: Article[] }) {
  if (articles.length === 0) return null;

  const hero = articles[0];
  const side = articles.slice(1, 3);

  return (
    <section className="mb-12" data-testid="featured-carousel">
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-5">
        <Link href={`/article/${hero.slug}`} className="lg:col-span-3">
          <div
            className="relative group cursor-pointer rounded-md overflow-hidden h-full"
            data-testid={`card-featured-${hero.id}`}
          >
            <div className="relative h-full min-h-[320px] md:min-h-[420px]">
              <img
                src={hero.coverImage || "/images/article-1.png"}
                alt={hero.title}
                className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
                loading="lazy"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-5 md:p-7">
                <span className="text-white/70 text-sm">
                  {format(new Date(hero.publishedAt), "d. MMMM yyyy", { locale: de })}
                </span>
                <h3 className="text-white font-bold text-xl md:text-2xl mt-2 leading-tight line-clamp-3">
                  {hero.title}
                </h3>
                <p className="text-white/60 text-sm mt-2 line-clamp-2 max-w-lg">
                  {hero.excerpt}
                </p>
              </div>
            </div>
          </div>
        </Link>

        <div className="lg:col-span-2 grid grid-cols-1 gap-5">
          {side.map((article) => (
            <Link key={article.id} href={`/article/${article.slug}`}>
              <div
                className="relative group cursor-pointer rounded-md overflow-hidden"
                data-testid={`card-featured-${article.id}`}
              >
                <div className="relative min-h-[200px]">
                  <img
                    src={article.coverImage || "/images/article-1.png"}
                    alt={article.title}
                    className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105"
                    loading="lazy"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
                  <div className="absolute bottom-0 left-0 right-0 p-4 md:p-5">
                    <span className="text-white/70 text-xs">
                      {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
                    </span>
                    <h3 className="text-white font-semibold text-base mt-1 leading-snug line-clamp-2">
                      {article.title}
                    </h3>
                  </div>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function ArticleCard({ article }: { article: Article }) {
  return (
    <Link href={`/article/${article.slug}`}>
      <article
        className="group cursor-pointer bg-card rounded-md border border-card-border transition-all duration-300 h-full flex flex-col"
        data-testid={`card-article-${article.id}`}
      >
        <div className="relative rounded-t-md">
          <div className="overflow-hidden rounded-t-md">
            <img
              src={article.coverImage || "/images/article-1.png"}
              alt={article.title}
              className="w-full aspect-[16/10] object-cover transition-transform duration-500 group-hover:scale-105"
              loading="lazy"
            />
          </div>
        </div>
        <div className="p-5 flex flex-col flex-1">
          <div className="flex items-center gap-2 text-muted-foreground text-xs mb-3">
            <span>{article.author}</span>
            <span>·</span>
            <span>{format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}</span>
          </div>
          <h3 className="font-semibold text-card-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors text-base leading-snug">
            {article.title}
          </h3>
          <p className="text-muted-foreground text-sm line-clamp-3 mb-4 flex-1">
            {article.excerpt}
          </p>
          <div className="flex items-center justify-between gap-2 mt-auto">
            <div className="flex items-center gap-3 text-xs text-muted-foreground">
              <span className="flex items-center gap-1">
                <Eye className="w-3.5 h-3.5" />
                {article.views.toLocaleString()}
              </span>
            </div>
            <Button size="sm" data-testid={`button-read-${article.id}`}>
              Weiterlesen
            </Button>
          </div>
        </div>
      </article>
    </Link>
  );
}

function PopularSidebar({ articles }: { articles: Article[] }) {
  return (
    <aside className="bg-card rounded-md border border-card-border p-5 sticky top-20" data-testid="sidebar-popular">
      <h3 className="font-semibold text-card-foreground mb-5 text-base">
        Beliebte Artikel
      </h3>
      <div className="space-y-5">
        {articles.map((article, index) => (
          <Link key={article.id} href={`/article/${article.slug}`}>
            <div
              className="flex gap-4 cursor-pointer group"
              data-testid={`card-popular-${article.id}`}
            >
              <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm">
                {index + 1}
              </div>
              <div className="flex-1 min-w-0">
                <h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
                  {article.title}
                </h4>
                <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1.5">
                  <Clock className="w-3 h-3" />
                  {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
                </div>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </aside>
  );
}

function ArticleCardSkeleton() {
  return (
    <div className="bg-card rounded-md border border-card-border">
      <Skeleton className="w-full aspect-[16/10] rounded-t-md" />
      <div className="p-5 space-y-3">
        <Skeleton className="h-3 w-2/3" />
        <Skeleton className="h-5 w-full" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-3/4" />
      </div>
    </div>
  );
}

export default function Home() {
  const { data: articles, isLoading } = useQuery<Article[]>({
    queryKey: ["/api/articles"],
  });

  const { data: featured } = useQuery<Article[]>({
    queryKey: ["/api/articles/featured"],
  });

  const { data: popular } = useQuery<Article[]>({
    queryKey: ["/api/articles/popular"],
  });

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {featured && featured.length > 0 && (
          <FeaturedSection articles={featured} />
        )}

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            {isLoading ? (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {Array.from({ length: 4 }).map((_, i) => (
                  <ArticleCardSkeleton key={i} />
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {(articles || []).map((article) => (
                  <ArticleCard key={article.id} article={article} />
                ))}
              </div>
            )}
          </div>

          <div className="lg:col-span-1">
            {popular && popular.length > 0 && (
              <PopularSidebar articles={popular} />
            )}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}
