"use client";

import { KomgaSeries } from "@/types/komga";
import Image from "next/image";
import { useState } from "react";
import { ImageOff } from "lucide-react";
import { cn } from "@/lib/utils";

interface HeroSectionProps {
  series: KomgaSeries[];
}

export function HeroSection({ series }: HeroSectionProps) {
  console.log("HeroSection - Séries reçues:", {
    count: series?.length || 0,
    firstSeries: series?.[0],
  });

  return (
    <div className="relative h-[500px] -mx-4 sm:-mx-8 lg:-mx-14 overflow-hidden">
      {/* Grille de couvertures en arrière-plan */}
      <div className="absolute inset-0 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 p-4 opacity-10">
        {series?.map((series) => (
          <CoverImage key={series.id} series={series} />
        ))}
      </div>

      {/* Overlay gradient */}
      <div className="absolute inset-0 bg-gradient-to-b from-background/50 to-background" />

      {/* Contenu */}
      <div className="relative h-full container flex flex-col items-center justify-center text-center space-y-4">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
          Bienvenue sur StripStream
        </h1>
        <p className="text-xl text-muted-foreground max-w-[600px]">
          Votre bibliothèque numérique pour lire vos BD, mangas et comics préférés.
        </p>
      </div>
    </div>
  );
}

interface CoverImageProps {
  series: KomgaSeries;
}

function CoverImage({ series }: CoverImageProps) {
  const [imageError, setImageError] = useState(false);

  return (
    <div className="relative aspect-[2/3] bg-muted rounded-lg overflow-hidden">
      {!imageError ? (
        <Image
          src={`/api/komga/images/series/${series.id}/thumbnail`}
          alt={`Couverture de ${series.metadata.title}`}
          fill
          className="object-cover"
          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 16.666vw"
          onError={() => setImageError(true)}
        />
      ) : (
        <div className="w-full h-full flex items-center justify-center">
          <ImageOff className="w-8 h-8" />
        </div>
      )}
    </div>
  );
}