import React from 'react';
import Link from 'next/link';
import {
  formatCurrency,
  MadeDreamsCartItem,
  MadeDreamsCartSummary,
} from '../helpers/madeDreamsCart';

type Props = {
  open: boolean;
  items: MadeDreamsCartItem[];
  totals: MadeDreamsCartSummary;
  onClose: () => void;
  onQuantityChange: (itemId: string, quantity: number) => void;
  onRemove: (itemId: string) => void;
  onClear: () => void;
};

export default function MadeDreamsCartDrawer({
  open,
  items,
  totals,
  onClose,
  onQuantityChange,
  onRemove,
  onClear,
}: Props) {
  return (
    <div className={`fixed inset-0 z-50 ${open ? '' : 'pointer-events-none'}`} aria-hidden={!open}>
      <button
        type="button"
        aria-label="Close cart drawer"
        className={`absolute inset-0 bg-[#130f0d]/60 transition-opacity duration-300 ${
          open ? 'opacity-100' : 'opacity-0'
        }`}
        onClick={onClose}
      />
      <aside
        className={`absolute right-0 top-0 flex h-full w-full max-w-md transform flex-col bg-[#fffaf3] shadow-2xl transition-transform duration-300 ${
          open ? 'translate-x-0' : 'translate-x-full'
        }`}
        role="dialog"
        aria-modal="true"
        aria-label="Shopping cart"
      >
        <div className="flex items-start justify-between border-b border-[#ead8c3] px-6 py-5">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.35em] text-[#a0672a]">Made Dreams</p>
            <h2 className="mt-1 font-serif text-3xl text-[#201713]">Your cart</h2>
          </div>
          <button
            type="button"
            className="rounded-full border border-[#d8b88f] px-4 py-2 text-sm font-semibold text-[#4e3b31] transition hover:bg-[#f5eadc]"
            onClick={onClose}
          >
            Close
          </button>
        </div>

        <div className="flex-1 overflow-y-auto px-6 py-5">
          {items.length === 0 ? (
            <div className="rounded-[2rem] border border-dashed border-[#d8b88f] bg-white/70 p-8 text-center">
              <p className="font-serif text-2xl text-[#201713]">Your cart is empty.</p>
              <p className="mt-3 text-sm leading-6 text-[#6d5546]">
                Add a best seller or create a custom paint by numbers kit to start your order.
              </p>
              <Link
                href="/#products"
                className="mt-6 inline-flex rounded-full bg-[#201713] px-5 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white"
                onClick={onClose}
              >
                Shop products
              </Link>
            </div>
          ) : (
            <div className="space-y-4">
              {items.map((item) => (
                <article key={item.id} className="rounded-[1.6rem] border border-[#ead8c3] bg-white p-4 shadow-sm">
                  <div className="grid grid-cols-[5rem_1fr] gap-4">
                    <div className={`h-20 rounded-2xl bg-gradient-to-br ${item.imageClass} p-2`}>
                      <div className="grid h-full grid-cols-3 gap-1 opacity-70">
                        {Array.from({ length: 9 }).map((_, index) => (
                          <span key={index} className="rounded bg-white/20 text-center text-[9px] text-white">
                            {index + 1}
                          </span>
                        ))}
                      </div>
                    </div>
                    <div>
                      <div className="flex items-start justify-between gap-3">
                        <div>
                          <p className="text-xs font-bold uppercase tracking-[0.22em] text-[#a0672a]">
                            {item.category}
                          </p>
                          <h3 className="mt-1 font-serif text-xl leading-6 text-[#201713]">{item.name}</h3>
                        </div>
                        <p className="font-semibold text-[#201713]">{formatCurrency(item.price)}</p>
                      </div>
                      {item.options && (
                        <p className="mt-2 text-xs leading-5 text-[#6d5546]">
                          {item.options.uploadedFileName && `Photo: ${item.options.uploadedFileName} · `}
                          {item.options.size && `${item.options.size} · `}
                          {item.options.difficulty && `${item.options.difficulty} difficulty`}
                        </p>
                      )}
                    </div>
                  </div>

                  <div className="mt-4 flex items-center justify-between gap-3">
                    <div className="inline-flex items-center rounded-full border border-[#d8b88f] bg-[#fffaf3]">
                      <button
                        type="button"
                        className="px-3 py-2 text-lg text-[#4e3b31] disabled:opacity-40"
                        onClick={() => onQuantityChange(item.id, item.quantity - 1)}
                        disabled={item.quantity <= 1}
                        aria-label={`Decrease quantity for ${item.name}`}
                      >
                        −
                      </button>
                      <span className="min-w-8 px-2 text-center text-sm font-bold text-[#201713]">{item.quantity}</span>
                      <button
                        type="button"
                        className="px-3 py-2 text-lg text-[#4e3b31] disabled:opacity-40"
                        onClick={() => onQuantityChange(item.id, item.quantity + 1)}
                        disabled={Boolean(item.maxInventory && item.quantity >= item.maxInventory)}
                        aria-label={`Increase quantity for ${item.name}`}
                      >
                        +
                      </button>
                    </div>
                    <button
                      type="button"
                      className="text-sm font-semibold text-[#8c3d2b] underline underline-offset-4"
                      onClick={() => onRemove(item.id)}
                    >
                      Remove
                    </button>
                  </div>
                </article>
              ))}
            </div>
          )}
        </div>

        <div className="border-t border-[#ead8c3] bg-[#f8f1e8] px-6 py-5">
          <div className="space-y-2 text-sm text-[#6d5546]">
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span className="font-semibold text-[#201713]">{formatCurrency(totals.subtotal)}</span>
            </div>
            <div className="flex justify-between">
              <span>Shipping</span>
              <span className="font-semibold text-[#201713]">
                {totals.shipping === 0 ? 'Free' : formatCurrency(totals.shipping)}
              </span>
            </div>
            <div className="flex justify-between border-t border-[#e3d0bc] pt-3 text-base font-bold text-[#201713]">
              <span>Total</span>
              <span>{formatCurrency(totals.total)}</span>
            </div>
          </div>

          <div className="mt-5 grid gap-3">
            <Link
              href="/cart"
              className="rounded-full bg-[#201713] px-5 py-3 text-center text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-[#3a2921]"
              onClick={onClose}
            >
              View cart
            </Link>
            {items.length > 0 && (
              <button
                type="button"
                className="text-sm font-semibold text-[#6d5546] underline underline-offset-4"
                onClick={onClear}
              >
                Clear cart
              </button>
            )}
          </div>
        </div>
      </aside>
    </div>
  );
}
