"use client";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { FolderOpen, Flame } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { NewCollectionButton } from "@/components/social/new-collection-button";
import { cn } from "@/lib/utils";

type Collection = {
  id: string;
  name: string;
  description: string | null;
  isPublic: boolean;
  recipeCount: number;
};

type Props = {
  collections: Collection[];
};

export function CollectionsPageContent({ collections }: Props) {
  const t = useTranslations("collections");

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
        </div>
        <div className="flex items-center gap-2">
          <Link href="/collections/explore" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-1.5")}>
            <Flame className="h-4 w-4 text-orange-500" />
            {t("discoverTitle")}
          </Link>
          <NewCollectionButton />
        </div>
      </div>

      {collections.length === 0 ? (
        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
          <FolderOpen className="h-12 w-12 text-muted-foreground/40" />
          <p className="text-muted-foreground text-sm">{t("empty")}</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
          {collections.map((col) => (
            <Link key={col.id} href={`/collections/${col.id}`} className="group rounded-xl border p-4 hover:shadow-sm transition-shadow space-y-2">
              <div className="flex items-start justify-between gap-2">
                <h2 className="font-semibold group-hover:text-primary transition-colors line-clamp-1">{col.name}</h2>
                {col.isPublic && <Badge variant="secondary" className="text-xs shrink-0">{t("public")}</Badge>}
              </div>
              {col.description && <p className="text-sm text-muted-foreground line-clamp-2">{col.description}</p>}
              <p className="text-xs text-muted-foreground">
                {col.recipeCount !== 1 ? t("recipeCountPlural", { count: col.recipeCount }) : t("recipeCount", { count: col.recipeCount })}
              </p>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}