"use client";

import { useState, useMemo } from "react";
import { Button } from "@heroui/react";
import { Heart } from "lucide-react";
import { useTranslations } from "next-intl";
import { useFavorites } from "@/lib/clientQueries";
import HorseCard from "@/components/hourse-card";

export default function FavoritesSection() {
  const t = useTranslations("DASHBOARD.FAVORITES");
  const [type, setType] = useState<"offer" | "auction">("offer");
  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } =
    useFavorites(type);

  const items = useMemo(() => {
    const pages = (data?.pages as any[]) ?? [];
    return pages.flatMap((p) => p?.data ?? []);
  }, [data]);

  return (
    <section className="space-y-5">
      {/* Header */}
      <div className="flex flex-col gap-2 pb-3 border-b border-slate-100">
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-2">
            <div>
              <h2 className="text-xl sm:text-2xl font-extrabold text-slate-900">
                {t("title")}
              </h2>
              <p className="text-xs sm:text-sm text-slate-500">
                {t("subtitle")}
              </p>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div className="mt-3 inline-flex w-full bg-slate-100/80 p-1 text-xs sm:text-sm">
          <button
            type="button"
            onClick={() => setType("offer")}
            className={`px-3 sm:px-4 py-1.5 w-full font-medium transition-colors ${
              type === "offer"
                ? "bg-white text-slate-900 shadow-sm"
                : "text-slate-500 hover:text-slate-700"
            }`}
          >
            {t("offers_tab") ?? "Offers"}
          </button>
          <button
            type="button"
            onClick={() => setType("auction")}
            className={`px-3 sm:px-4 py-1.5 w-full font-medium transition-colors ${
              type === "auction"
                ? "bg-white text-slate-900 shadow-sm"
                : "text-slate-500 hover:text-slate-700"
            }`}
          >
            {t("auctions_tab") ?? "Auctions"}
          </button>
        </div>
      </div>

      {/* Content */}
      <div className="space-y-6">
        {isLoading ? (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                className="border rounded-2xl overflow-hidden bg-white shadow-sm"
              >
                <div className="h-40 w-full bg-slate-200 animate-pulse" />
                <div className="p-4 space-y-3">
                  <div className="h-4 w-3/4 bg-slate-200 rounded animate-pulse" />
                  <div className="h-3 w-1/2 bg-slate-200 rounded animate-pulse" />
                  <div className="h-3 w-2/3 bg-slate-200 rounded animate-pulse" />
                  <div className="h-9 w-full bg-slate-200 rounded-xl animate-pulse" />
                </div>
              </div>
            ))}
          </div>
        ) : items.length === 0 ? (
          <div className="p-8 text-center border border-dashed rounded-2xl text-slate-500 text-sm bg-slate-50/60">
            {type === "offer"
              ? (t("empty_offers") ?? t("empty"))
              : (t("empty_auctions") ?? t("empty"))}
          </div>
        ) : (
          <>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
              {items.map((x: any) => (
                <HorseCard
                  key={x.id}
                  sarIcon="/Riyal.svg"
                  horse={{
                    id: x.id,
                    title: x.title,
                    type: x.animal_usage || "",
                    img: x.main_image?.url || "/no-image.png",
                    price: Number(x.price) || 0,
                    breed: x.breed || "—",
                    city: x.state || "—",
                    country: x.country || "—",
                    coat: x.animal_color || "—",
                  }}
                />
              ))}
            </div>

            <div className="pt-2 text-center">
              {hasNextPage && (
                <Button
                  variant="flat"
                  color="primary"
                  size="sm"
                  isLoading={isFetchingNextPage}
                  onPress={() => fetchNextPage()}
                >
                  {isFetchingNextPage ? t("loading") : t("load_more")}
                </Button>
              )}
            </div>
          </>
        )}
      </div>
    </section>
  );
}