"use client";

import Link from "next/link";
import Image from "next/image";
import { useWishlist } from "@/lib/wishlist-context";
import { useCart } from "@/lib/cart-context";
import { formatPaise } from "@/lib/format";

export default function WishlistPage() {
  const { items, remove } = useWishlist();
  const { addItem } = useCart();

  if (items.length === 0) {
    return (
      <div className="mx-auto max-w-3xl px-4 py-16 text-center sm:px-6">
        <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Your wishlist is empty</h1>
        <p className="mt-2 text-sm text-stone-500">Tap the heart on any product to save it here.</p>
        <Link href="/shop" className="mt-4 inline-block rounded-md bg-rose-700 px-6 py-3 text-sm font-semibold text-white hover:bg-rose-800">
          Browse gifts
        </Link>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-4xl px-4 py-10 sm:px-6">
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Your wishlist</h1>

      <ul className="mt-6 divide-y divide-rose-100 rounded-xl border border-rose-100 bg-white">
        {items.map((item) => (
          <li key={item.productId} className="flex items-center gap-4 p-4">
            <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-md bg-rose-50">
              <Image src={item.image} alt={item.name} fill className="object-cover" sizes="80px" />
            </div>
            <div className="flex-1">
              <Link href={`/product/${item.slug}`} className="text-sm font-medium text-stone-800 hover:text-rose-700">
                {item.name}
              </Link>
              <div className="mt-1 text-sm font-semibold text-rose-800">{formatPaise(item.basePrice)}</div>
              {item.minOrderQty > 1 && <div className="mt-0.5 text-xs text-stone-500">Minimum order: {item.minOrderQty}</div>}
            </div>
            <button
              onClick={() =>
                addItem({
                  productId: item.productId,
                  name: item.name,
                  slug: item.slug,
                  image: item.image,
                  unitPrice: item.basePrice,
                  quantity: item.minOrderQty || 1,
                  minOrderQty: item.minOrderQty || 1,
                })
              }
              className="rounded-md bg-rose-700 px-3 py-2 text-xs font-semibold text-white hover:bg-rose-800"
            >
              Add to cart
            </button>
            <button onClick={() => remove(item.productId)} className="text-xs text-stone-400 hover:text-red-700">
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}