"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { ProductCard } from "@/components/store/product-card";
import { useWishlist } from "@/lib/wishlist";
import type { SanityProductCard } from "@/lib/sanity/queries";

export function FavorisView() {
  const { handles } = useWishlist();
  const [products, setProducts] = useState<SanityProductCard[]>([]);
  const [status, setStatus] = useState<"idle" | "loading" | "loaded" | "error">("idle");

  useEffect(() => {
    if (handles.length === 0) {
      return;
    }

    const controller = new AbortController();

    const timeout = setTimeout(async () => {
      setStatus("loading");
      try {
        const response = await fetch("/api/wishlist", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ handles }),
          signal: controller.signal,
        });

        if (!response.ok) {
          throw new Error("request_failed");
        }

        const data = (await response.json()) as { products?: SanityProductCard[] };
        setProducts(data.products || []);
        setStatus("loaded");
      } catch {
        if (!controller.signal.aborted) {
          setStatus("error");
        }
      }
    }, 0);

    return () => {
      clearTimeout(timeout);
      controller.abort();
    };
  }, [handles]);

  if (handles.length === 0) {
    return (
      <div className="space-y-3 rounded-2xl border border-[#ffe1e1] bg-[var(--surface)] p-5 text-sm text-[var(--muted)]">
        <p>Vous n&apos;avez pas encore ajouté de produit à vos favoris.</p>
        <Link
          href="/boutique"
          className="inline-flex rounded-xl border border-[var(--line)] bg-white px-4 py-2 text-xs font-semibold uppercase tracking-[0.1em] text-[var(--foreground)] hover:border-[var(--accent-3)]"
        >
          Voir tous les produits
        </Link>
      </div>
    );
  }

  if (status === "idle" || status === "loading") {
    const skeletonCount = Math.min(handles.length, 6);
    return (
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
        {Array.from({ length: skeletonCount }).map((_, index) => (
          <div key={index} className="space-y-3">
            <div className="aspect-[4/5] animate-pulse rounded-2xl bg-[var(--surface-2)]" />
            <div className="h-3.5 w-3/4 animate-pulse rounded-full bg-[var(--surface-2)]" />
          </div>
        ))}
      </div>
    );
  }

  if (status === "error") {
    return (
      <p className="rounded-2xl border border-[#ffe1e1] bg-[var(--surface)] p-5 text-sm text-[var(--muted)]">
        Impossible de charger vos favoris pour le moment. Réessayez plus tard.
      </p>
    );
  }

  if (products.length === 0) {
    return (
      <p className="rounded-2xl border border-[#ffe1e1] bg-[var(--surface)] p-5 text-sm text-[var(--muted)]">
        Les produits que vous aviez ajoutés ne sont plus disponibles.
      </p>
    );
  }

  return (
    <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {products.map((product, index) => (
        <ProductCard key={product._id} product={product} index={index} />
      ))}
    </section>
  );
}