import { useState, useEffect } from "react";
import { useLocation } from "wouter";
import { useQuery } from "@tanstack/react-query";
import { ChefHat } from "lucide-react";

interface DailyRecipe {
  id: number;
  dateStr: string;
  name: string;
  intro?: string;
  imageUrl?: string | null;
}

export function RecipeWidget() {
  const [, navigate] = useLocation();
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);

  const { data = [] } = useQuery<DailyRecipe[]>({
    queryKey: ["/api/recipes"],
    staleTime: 1000 * 60 * 30,
  });

  const pool = data.filter((r) => r.imageUrl).slice(0, 10);

  useEffect(() => {
    if (paused || pool.length <= 1) return;
    const t = setInterval(() => setIndex((i) => (i + 1) % pool.length), 8000);
    return () => clearInterval(t);
  }, [paused, pool.length]);

  if (pool.length === 0) return null;
  const recipe = pool[index % pool.length];

  return (
    <button
      onClick={() => navigate("/rezepte")}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      className="bg-card rounded-lg border border-card-border overflow-hidden h-full w-full text-left cursor-pointer group hover:border-primary/50 transition-colors flex flex-col min-h-[320px]"
      data-testid="widget-recipe"
    >
      <div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
        <ChefHat className="w-4 h-4 text-primary" />
        <h3 className="font-bold text-card-foreground text-sm">Rezept des Tages</h3>
      </div>
      <div className="relative flex-1">
        <img
          src={recipe.imageUrl as string}
          alt={recipe.name}
          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
          loading="lazy"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/25 to-transparent" />
        <div className="absolute bottom-0 left-0 right-0 p-3">
          <h4 className="text-white font-bold text-base leading-snug line-clamp-2">{recipe.name}</h4>
          {recipe.intro && (
            <p className="text-white/60 text-xs mt-1 line-clamp-2">{recipe.intro}</p>
          )}
          <p className="text-[10px] text-primary mt-1 group-hover:underline">Alle Rezepte ansehen</p>
        </div>
        {pool.length > 1 && (
          <div className="absolute top-2 right-2 flex gap-1">
            {pool.slice(0, 6).map((_, i) => (
              <span
                key={i}
                className={`h-1 rounded-full transition-all ${i === index % 6 ? "bg-primary w-3" : "bg-white/40 w-1"}`}
              />
            ))}
          </div>
        )}
      </div>
    </button>
  );
}