folx-tv/client/src/pages/videos.tsx

import { useQuery } from "@tanstack/react-query";
import { Link, useLocation, useSearch } from "wouter";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { usePageMeta } from "@/hooks/use-page-meta";
import { Play, ArrowLeft, ChevronLeft, ChevronRight } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import Header from "@/components/header";
import Footer from "@/components/footer";
import { PageSideAds, TopBannerAd, MultiplexAd } from "@/components/adsense";
import { useEffect } from "react";
import type { YtVideo } from "@/pages/video-detail";
import { dauer } from "@/pages/video-detail";

interface YtResponse {
  items: YtVideo[];
  total: number;
  page: number;
  totalPages: number;
  rubriken: string[];
}

function VideoCard({ v }: { v: YtVideo }) {
  return (
    <Link href={`/video/${v.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-${v.ytId}`}
      >
        <div className="relative rounded-t-md overflow-hidden">
          <img
            src={v.posterUrl}
            alt={v.shortTitle}
            className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
            loading="lazy"
          />
          <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>
          <span className="absolute bottom-2 right-2 rounded bg-black/75 px-1.5 py-0.5 text-[11px] font-medium text-white">
            {dauer(v.durationS)}
          </span>
        </div>
        <div className="p-4 flex flex-col flex-1">
          <span className="text-[10px] font-semibold uppercase tracking-wide text-primary mb-1">{v.rubrik}</span>
          <h3 className="font-semibold text-card-foreground mb-1 line-clamp-2 group-hover:text-primary transition-colors text-sm leading-snug">
            {v.shortTitle}
          </h3>
          {v.teaser && (
            <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{v.teaser}</p>
          )}
          <p className="text-xs text-muted-foreground mt-auto pt-2">
            {format(new Date(v.publishedAt), "d. MMMM yyyy", { locale: de })}
          </p>
        </div>
      </article>
    </Link>
  );
}

function CardSkeleton() {
  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() {
  usePageMeta(
    "Volksmusik & Schlager Videos",
    "Musik News, Interviews und FOLX STADL: alle Videos von FOLX TV auf einen Blick — Volksmusik, Schlager und die groessten Stars.",
  );

  const searchString = useSearch();
  const [, setLocation] = useLocation();
  const params = new URLSearchParams(searchString);
  const currentPage = Math.max(1, parseInt(params.get("page") || "1"));
  const rubrik = params.get("rubrik") || "Alle";
  const limit = 24;

  const { data, isLoading } = useQuery<YtResponse>({
    queryKey: [`/api/yt-videos?page=${currentPage}&limit=${limit}&rubrik=${encodeURIComponent(rubrik)}`],
  });

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [currentPage, rubrik]);

  const go = (page: number, r = rubrik) => {
    const q = new URLSearchParams();
    if (r && r !== "Alle") q.set("rubrik", r);
    if (page > 1) q.set("page", String(page));
    const qs = q.toString();
    setLocation(qs ? `/videos?${qs}` : "/videos");
  };

  const totalPages = data?.totalPages || 1;
  const items = data?.items || [];
  const rubriken = ["Alle", ...(data?.rubriken || [])];

  const pageNumbers = () => {
    const pages: (number | "...")[] = [];
    if (totalPages <= 7) {
      for (let i = 1; i <= totalPages; i++) pages.push(i);
    } else {
      pages.push(1);
      if (currentPage > 3) pages.push("...");
      for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) pages.push(i);
      if (currentPage < totalPages - 2) pages.push("...");
      pages.push(totalPages);
    }
    return pages;
  };

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <PageSideAds />
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <TopBannerAd />
        <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>

        <h1 className="text-2xl font-bold text-foreground mb-4" data-testid="text-videos-title">
          Videos
        </h1>

        {rubriken.length > 1 && (
          <div className="flex flex-wrap gap-2 mb-6" data-testid="videos-rubriken">
            {rubriken.map((r) => (
              <button
                key={r}
                onClick={() => go(1, r)}
                className={`rounded-full px-3.5 py-1.5 text-xs font-semibold transition-colors ${
                  r === rubrik ? "bg-primary text-primary-foreground" : "bg-card border border-card-border text-card-foreground hover:bg-muted/40"
                }`}
                data-testid={`button-rubrik-${r}`}
              >
                {r}
              </button>
            ))}
          </div>
        )}

        {isLoading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
            {Array.from({ length: 8 }).map((_, i) => <CardSkeleton key={i} />)}
          </div>
        ) : items.length === 0 ? (
          <p className="text-muted-foreground text-sm">Zurzeit keine Videos in dieser Rubrik.</p>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
            {items.map((v) => <VideoCard key={v.ytId} v={v} />)}
          </div>
        )}

        <MultiplexAd />

        {totalPages > 1 && (
          <div className="flex justify-center items-center gap-2 mt-8" data-testid="videos-pagination">
            <button
              onClick={() => go(currentPage - 1)}
              disabled={currentPage <= 1}
              className="p-2 rounded-md border border-card-border text-card-foreground disabled:opacity-30"
              aria-label="Zurück"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            {pageNumbers().map((p, i) =>
              p === "..." ? (
                <span key={`e-${i}`} className="px-2 text-muted-foreground">…</span>
              ) : (
                <button
                  key={p}
                  onClick={() => go(p)}
                  className={`min-w-9 rounded-md px-3 py-1.5 text-sm font-semibold ${
                    p === currentPage ? "bg-primary text-primary-foreground" : "border border-card-border text-card-foreground hover:bg-muted/40"
                  }`}
                >
                  {p}
                </button>
              ),
            )}
            <button
              onClick={() => go(currentPage + 1)}
              disabled={currentPage >= totalPages}
              className="p-2 rounded-md border border-card-border text-card-foreground disabled:opacity-30"
              aria-label="Weiter"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}