"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";
import { Badge } from "@/components/ui/badge";
import { Clock, ChefHat, Star } from "lucide-react";
import { cn } from "@/lib/utils";

const DIFFICULTY_COLORS: Record<string, string> = {
  easy: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
  medium: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
  hard: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
};

export type SearchResultRecipe = {
  id: string;
  title: string;
  description?: string | null;
  difficulty: string | null;
  prepMins: number | null;
  cookMins: number | null;
  authorName: string | null;
  avgRating?: number | null;
  ratingCount?: number;
};

/**
 * Shared card for lightweight recipe search results (no cover photo/visibility
 * data available) — used by the search and explore pages, which previously
 * each had their own near-identical inline copy of this component.
 */
export function SearchResultCard({ recipe, className }: { recipe: SearchResultRecipe; className?: string }) {
  const t = useTranslations("recipe");
  const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
  const difficultyLabel = recipe.difficulty === "easy" || recipe.difficulty === "medium" || recipe.difficulty === "hard"
    ? t(`difficulty.${recipe.difficulty}`)
    : recipe.difficulty;

  return (
    <Link
      href={`/recipes/${recipe.id}`}
      className={cn(
        "group block rounded-lg border bg-card p-4 shadow-sm transition-shadow hover:shadow-md",
        className
      )}
    >
      <h3 className="font-semibold text-sm leading-tight text-card-foreground group-hover:text-primary line-clamp-2">
        {recipe.title}
      </h3>
      {recipe.difficulty && (
        <Badge
          variant="secondary"
          className={`mt-1.5 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
        >
          {difficultyLabel}
        </Badge>
      )}
      {recipe.description && (
        <p className="mt-1 text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
      )}
      {!!recipe.ratingCount && recipe.avgRating != null && (
        <div className="mt-1.5 flex items-center gap-1 text-xs text-muted-foreground">
          <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
          <span className="font-medium text-foreground">{recipe.avgRating.toFixed(1)}</span>
          <span>({recipe.ratingCount})</span>
        </div>
      )}
      <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
        {totalMins > 0 && (
          <span className="flex items-center gap-1">
            <Clock className="h-3.5 w-3.5" />
            {t("total", { mins: totalMins })}
          </span>
        )}
        {recipe.authorName && (
          <span className="flex items-center gap-1">
            <ChefHat className="h-3.5 w-3.5" />
            {recipe.authorName}
          </span>
        )}
      </div>
    </Link>
  );
}