'use client';

import { useCart } from '@/context/cart-context';
import { getAssetUrl } from '@/lib/directus';
import Image from 'next/image';
import Link from 'next/link';

export function CartDrawer() {
  const { items, isOpen, closeCart, removeItem, subtotal, itemCount } = useCart();

  if (!isOpen) return null;

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 z-40 bg-black/50"
        onClick={closeCart}
        aria-hidden="true"
      />

      {/* Drawer */}
      <div className="fixed right-0 top-0 z-50 h-full w-full max-w-md bg-white shadow-xl">
        <div className="flex h-full flex-col">
          {/* Header */}
          <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
            <h2 className="text-lg font-medium tracking-wide uppercase">
              Shopping Cart ({itemCount})
            </h2>
            <button
              onClick={closeCart}
              className="p-2 text-gray-500 hover:text-gray-700"
              aria-label="Close cart"
            >
              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          {/* Items */}
          <div className="flex-1 overflow-y-auto px-6 py-4">
            {items.length === 0 ? (
              <div className="flex h-full flex-col items-center justify-center text-center">
                <svg className="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
                <p className="mt-4 text-gray-500">Your cart is empty</p>
                <button
                  onClick={closeCart}
                  className="mt-4 text-sm underline underline-offset-2 hover:no-underline"
                >
                  Continue Shopping
                </button>
              </div>
            ) : (
              <ul className="divide-y divide-gray-200">
                {items.map((item) => (
                  <li key={item.id} className="py-4">
                    <div className="flex gap-4">
                      {/* Image */}
                      <div className="relative h-24 w-24 flex-shrink-0 overflow-hidden bg-gray-100">
                        {item.image ? (
                          <Image
                            src={getAssetUrl(item.image, { width: 200, quality: 80 })}
                            alt={item.title}
                            fill
                            className="object-cover"
                          />
                        ) : (
                          <div className="flex h-full items-center justify-center text-xs text-gray-400">
                            No image
                          </div>
                        )}
                      </div>

                      {/* Details */}
                      <div className="flex flex-1 flex-col">
                        <div className="flex justify-between">
                          <div>
                            <h3 className="text-sm font-medium">{item.title}</h3>
                            {item.artwork.medium && (
                              <p className="mt-1 text-xs text-gray-500">{item.artwork.medium}</p>
                            )}
                          </div>
                          <p className="text-sm font-medium">
                            {item.artwork.currency === 'GBP' ? '£' : '$'}{item.price.toLocaleString()}
                          </p>
                        </div>

                        <div className="mt-auto flex items-center justify-between pt-2">
                          <span className="text-xs text-gray-500">Qty: {item.quantity}</span>
                          <button
                            onClick={() => removeItem(item.id)}
                            className="text-xs text-gray-500 underline underline-offset-2 hover:text-gray-700"
                          >
                            Remove
                          </button>
                        </div>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>

          {/* Footer */}
          {items.length > 0 && (
            <div className="border-t border-gray-200 px-6 py-4">
              <div className="flex justify-between text-base font-medium">
                <span>Subtotal</span>
                <span>${subtotal.toLocaleString()}</span>
              </div>
              <p className="mt-1 text-xs text-gray-500">
                Shipping and taxes calculated at checkout
              </p>

              <div className="mt-4 space-y-2">
                <Link
                  href="/checkout"
                  onClick={closeCart}
                  className="btn btn-primary w-full"
                >
                  Checkout
                </Link>
                <button
                  onClick={closeCart}
                  className="btn btn-secondary w-full"
                >
                  Continue Shopping
                </button>
              </div>

              <p className="mt-4 text-center text-xs text-gray-500">
                or{' '}
                <Link href="/contact" onClick={closeCart} className="underline">
                  contact us
                </Link>{' '}
                for enquiries
              </p>
            </div>
          )}
        </div>
      </div>
    </>
  );
}
