import { getWishlist } from "@/lib/actions/wishlist";
import ProductCard from "@/components/common/ProductCard";
import { Button } from "@/components/ui/button";
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { RiHeartLine, RiShoppingCartLine } from "@remixicon/react";
import Link from "next/link";

export const dynamic = "force-dynamic";

export default async function WishlistPage() {
  const wishlistItems = await getWishlist();

  return (
    <main className="mx-auto max-w-container-max px-gutter py-8 md:py-12">
      <div className="mb-6 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
        <div>
          <p className="text-sm font-semibold uppercase tracking-[0.24em] text-primary">
            Saved for later
          </p>
          <h1 className="text-3xl font-bold tracking-tight text-foreground">
            My Wishlist
          </h1>
        </div>

        <span className="rounded-full bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
          {wishlistItems.length} item{wishlistItems.length === 1 ? "" : "s"}
        </span>
      </div>

      {wishlistItems.length === 0 ? (
        <Empty className="py-16">
          <EmptyHeader>
            <EmptyMedia variant="icon">
              <RiHeartLine />
            </EmptyMedia>
            <EmptyTitle>Your wishlist is empty</EmptyTitle>
            <EmptyDescription>
              Save products you love and come back to them later. Browse the
              catalogue and tap the heart on any product.
            </EmptyDescription>
          </EmptyHeader>
          <EmptyContent>
            <Link href="/products">
              <Button>
                <RiShoppingCartLine data-icon="inline-start" />
                Browse Products
              </Button>
            </Link>
          </EmptyContent>
        </Empty>
      ) : (
        <section className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
          {wishlistItems.map((product) => (
            <ProductCard
              key={product.id}
              productId={product.productId}
              title={product.title}
              description={product.description}
              price={product.price}
              imageUrl={product.imageUrl}
              link={product.link}
              wishlisted
            />
          ))}
        </section>
      )}
    </main>
  );
}