import { useState } from "react";
import { useLocation } from "wouter";
import { ChefHat, Clock, Users } from "lucide-react";

interface WidgetRecipe {
  title: string;
  image: string;
  time: string;
  servings: string;
}

const WIDGET_RECIPES: WidgetRecipe[] = [
  { title: "Kaiserschmarrn", image: "/uploads/recipe-kaiserschmarrn.jpg", time: "25 Min.", servings: "2" },
  { title: "Wiener Schnitzel", image: "/uploads/recipe-wiener-schnitzel.jpg", time: "30 Min.", servings: "4" },
  { title: "Apfelstrudel", image: "/uploads/recipe-apfelstrudel.jpg", time: "60 Min.", servings: "6" },
  { title: "Schweinshaxe", image: "/uploads/recipe-schweinshaxe.jpg", time: "180 Min.", servings: "4" },
  { title: "Käsespätzle", image: "/uploads/recipe-kaesespaetzle.jpg", time: "45 Min.", servings: "4" },
  { title: "Sachertorte", image: "/uploads/recipe-sachertorte.jpg", time: "90 Min.", servings: "8" },
  { title: "Maultaschen", image: "/uploads/recipe-maultaschen.jpg", time: "90 Min.", servings: "4" },
  { title: "Schlutzkrapfen", image: "/uploads/recipe-schlutzkrapfen.jpg", time: "60 Min.", servings: "4" },
];

export function RecipeWidget() {
  const [, navigate] = useLocation();
  const dayIndex = Math.floor(Date.now() / 86400000) % WIDGET_RECIPES.length;
  const recipe = WIDGET_RECIPES[dayIndex];

  return (
    <button
      onClick={() => navigate("/rezepte")}
      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.image}
          alt={recipe.title}
          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/80 via-black/20 to-transparent" />
        <div className="absolute bottom-0 left-0 right-0 p-3">
          <h4 className="text-white font-bold text-base">{recipe.title}</h4>
          <p className="text-white/60 text-xs mt-0.5 flex items-center gap-2">
            <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{recipe.time}</span>
            <span className="flex items-center gap-1"><Users className="w-3 h-3" />{recipe.servings}</span>
          </p>
          <p className="text-[10px] text-primary mt-1 group-hover:underline">Alle Rezepte ansehen</p>
        </div>
      </div>
    </button>
  );
}