import { Fragment, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { useCartStore } from '../../stores/cart';
import CartItems from './CartItems';
import CartSummary from './CartSummary';
import { X } from 'lucide-react';

export default function CartDrawer() {
  const { isOpen, toggleCart, items } = useCartStore();

  return (
    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-50" onClose={toggleCart}>
        <Transition.Child
          as={Fragment}
          enter="ease-in-out duration-500"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in-out duration-500"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-hidden">
          <div className="absolute inset-0 overflow-hidden">
            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
              <Transition.Child
                as={Fragment}
                enter="transform transition ease-in-out duration-500"
                enterFrom="translate-x-full"
                enterTo="translate-x-0"
                leave="transform transition ease-in-out duration-500"
                leaveFrom="translate-x-0"
                leaveTo="translate-x-full"
              >
                <Dialog.Panel className="pointer-events-auto w-screen max-w-md">
                  <div className="flex h-full flex-col bg-white shadow-xl">
                    <div className="flex items-center justify-between px-4 py-6 border-b">
                      <Dialog.Title className="text-lg font-medium">
                        ตะกร้าสินค้า ({items.length})
                      </Dialog.Title>
                      <button onClick={toggleCart} className="text-gray-400 hover:text-gray-500">
                        <X className="w-6 h-6" />
                      </button>
                    </div>

                    <div className="flex-1 overflow-y-auto px-4 py-6">
                      {items.length === 0 ? (
                        <p className="text-center text-gray-500 py-12">ตะกร้าสินค้าว่างเปล่า</p>
                      ) : (
                        <CartItems />
                      )}
                    </div>

                    {items.length > 0 && (
                      <div className="border-t px-4 py-6">
                        <CartSummary />
                        <a
                          href="/checkout"
                          className="mt-4 w-full bg-blue-600 text-white py-3 px-4 rounded-lg text-center block hover:bg-blue-700"
                        >
                          ชำระเงิน
                        </a>
                      </div>
                    )}
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </div>
      </Dialog>
    </Transition.Root>
  );
}
