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 { Play, ArrowLeft } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import Header from "@/components/header";
import Footer from "@/components/footer";
import { ArticleCardAd } from "@/components/adsense";

function VideoCard({ article }: { article: Article }) {
  const thumbSrc = article.coverImage
    ? article.coverImage.replace(".webp", "-thumb.webp")
    : "/images/article-1.png";

  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-video-${article.id}`}
      >
        <div className="relative rounded-t-md">
          <div className="overflow-hidden rounded-t-md">
            <img
              src={thumbSrc}
              alt={article.title}
              className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
              loading="lazy"
            />
          </div>
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
              <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
            </div>
          </div>
        </div>
        <div className="p-4 flex flex-col flex-1">
          <h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
            {article.title}
          </h3>
          <p className="text-xs text-muted-foreground mt-auto">
            {format(new Date(article.publishedAt), "d. MMMM yyyy", { locale: de })}
          </p>
        </div>
      </article>
    </Link>
  );
}

function VideoCardSkeleton() {
  return (
    <div className="bg-card rounded-md border border-card-border">
      <Skeleton className="w-full aspect-video rounded-t-md" />
      <div className="p-4 space-y-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-3 w-1/2" />
      </div>
    </div>
  );
}

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

  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">
        <Link href="/">
          <button className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-6 text-sm" data-testid="button-back">
            <ArrowLeft className="w-4 h-4" />
            Zurück
          </button>
        </Link>

        {isLoading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
            {Array.from({ length: 4 }).map((_, i) => (
              <VideoCardSkeleton key={i} />
            ))}
          </div>
        ) : articles && articles.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
            {articles.flatMap((article, index) => {
              const items = [
                <VideoCard key={article.id} article={article} />,
              ];
              if (index === 2) {
                items.push(<ArticleCardAd key="ad-video-1" />);
              }
              return items;
            })}
          </div>
        ) : (
          <div className="text-center py-16">
            <p className="text-muted-foreground">Noch keine Videos vorhanden.</p>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}