"use client";

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

export default function CartDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
  const { items, removeItem, updateQuantity, subtotal } = useCart();

  return (
    <div className={`fixed inset-0 z-50 ${open ? "" : "pointer-events-none"}`} aria-hidden={!open}>
      <div
        className={`absolute inset-0 bg-black/30 transition-opacity ${open ? "opacity-100" : "opacity-0"}`}
        onClick={onClose}
      />
      <aside
        className={`absolute right-0 top-0 flex h-full w-full max-w-sm flex-col bg-white shadow-xl transition-transform ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex items-center justify-between border-b border-rose-100 px-4 py-4">
          <h2 className="font-[family-name:var(--font-heading)] text-lg font-semibold text-stone-800">Your cart</h2>
          <button onClick={onClose} className="rounded-md p-1 text-stone-500 hover:bg-stone-100" aria-label="Close cart">
            ✕
          </button>
        </div>

        <div className="flex-1 overflow-y-auto px-4 py-4">
          {items.length === 0 ? (
            <p className="mt-8 text-center text-sm text-stone-500">Your cart is empty.</p>
          ) : (
            <ul className="space-y-4">
              {items.map((item) => (
                <li key={item.key} className="flex gap-3">
                  <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-md bg-rose-50">
                    <Image src={item.image} alt={item.name} fill className="object-cover" sizes="64px" />
                  </div>
                  <div className="flex-1">
                    <div className="text-sm font-medium text-stone-800">{item.name}</div>
                    {item.variantName && <div className="text-xs text-stone-500">{item.variantName}</div>}
                    {item.personalization && (
                      <div className="text-xs text-stone-500">Personalize: “{item.personalization}”</div>
                    )}
                    <div className="mt-1 flex items-center gap-2">
                      <CartQuantityInput
                        quantity={item.quantity}
                        minOrderQty={item.minOrderQty || 1}
                        onChange={(q) => updateQuantity(item.key, q)}
                        className="w-14 rounded border border-stone-200 px-1 py-0.5 text-sm"
                      />
                      <span className="text-sm text-stone-600">{formatPaise(item.unitPrice * item.quantity)}</span>
                    </div>
                  </div>
                  <button onClick={() => removeItem(item.key)} className="self-start text-xs text-stone-400 hover:text-rose-700">
                    Remove
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>

        {items.length > 0 && (
          <div className="border-t border-rose-100 px-4 py-4">
            <div className="flex items-center justify-between text-sm font-medium text-stone-700">
              <span>Subtotal</span>
              <span>{formatPaise(subtotal)}</span>
            </div>
            <Link
              href="/checkout"
              onClick={onClose}
              className="mt-3 block w-full rounded-md bg-rose-700 py-2.5 text-center text-sm font-semibold text-white hover:bg-rose-800"
            >
              Checkout
            </Link>
          </div>
        )}
      </aside>
    </div>
  );
}