import { X, Trash2, Plus, Minus, ShoppingBag } from "lucide-react";
import { Link } from "react-router-dom";
import { useCartStore } from "@/stores/cartStore";

export default function CartDrawer() {
  const { items, isDrawerOpen, closeDrawer, removeFromCart, updateQuantity, totalPrice, totalItems } =
    useCartStore();

  return (
    <>
      {/* Backdrop */}
      {isDrawerOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-50 backdrop-blur-sm"
          onClick={closeDrawer}
        />
      )}

      {/* Drawer */}
      <div
        className={`fixed top-0 left-0 h-full w-full sm:w-96 bg-white z-50 shadow-2xl flex flex-col cart-drawer ${
          isDrawerOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        {/* Header */}
        <div className="flex items-center justify-between p-5 border-b bg-orange-50">
          <div className="flex items-center gap-2">
            <ShoppingBag className="text-orange-500" size={22} />
            <h2 className="text-lg font-black text-gray-800">سلة التسوق</h2>
            {totalItems > 0 && (
              <span className="bg-orange-500 text-white text-xs font-bold w-6 h-6 rounded-full flex items-center justify-center">
                {totalItems}
              </span>
            )}
          </div>
          <button
            onClick={closeDrawer}
            className="w-9 h-9 rounded-xl bg-white hover:bg-gray-100 flex items-center justify-center transition-colors shadow-sm"
          >
            <X size={18} />
          </button>
        </div>

        {/* Items */}
        <div className="flex-1 overflow-y-auto p-4 space-y-3">
          {items.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-full text-center gap-4 py-16">
              <div className="w-20 h-20 bg-orange-50 rounded-full flex items-center justify-center">
                <ShoppingBag size={36} className="text-orange-300" />
              </div>
              <div>
                <p className="text-gray-700 font-bold text-lg">السلة فارغة</p>
                <p className="text-gray-400 text-sm mt-1">ابدأ التسوق الآن!</p>
              </div>
              <Link to="/products" onClick={closeDrawer} className="btn-primary text-sm">
                تسوق الآن
              </Link>
            </div>
          ) : (
            items.map((item) => {
              const itemPrice = item.variant ? item.variant.price : item.product.price;
              const itemKey = item.variantKey || item.product.id;
              return (
                <div
                  key={itemKey}
                  className="flex gap-3 bg-white border border-gray-100 rounded-xl p-3 shadow-sm"
                >
                  <Link to={`/products/${item.product.id}`} onClick={closeDrawer}>
                    <img
                      src={item.product.image}
                      alt={item.product.name}
                      className="w-[72px] h-[72px] object-cover rounded-xl bg-gray-50"
                    />
                  </Link>
                  <div className="flex-1 min-w-0">
                    <Link
                      to={`/products/${item.product.id}`}
                      onClick={closeDrawer}
                      className="text-sm font-bold text-gray-800 line-clamp-2 hover:text-orange-500 transition-colors"
                    >
                      {item.product.name}
                    </Link>

                    {/* Variant details */}
                    {item.variant && (
                      <div className="flex items-center gap-1.5 mt-1 flex-wrap">
                        {item.variant.colorHex && (
                          <span
                            className="w-3.5 h-3.5 rounded-full border border-gray-300 inline-block shrink-0"
                            style={{ backgroundColor: item.variant.colorHex }}
                          />
                        )}
                        {item.variant.color && (
                          <span className="text-xs text-gray-500">{item.variant.color}</span>
                        )}
                        {item.variant.size && (
                          <span className="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded-md font-semibold">
                            {item.variant.size}
                          </span>
                        )}
                      </div>
                    )}

                    <p className="text-orange-500 font-black text-sm mt-1">
                      {(itemPrice * item.quantity).toLocaleString()} ر.ي
                    </p>

                    <div className="flex items-center justify-between mt-2">
                      <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
                        <button
                          onClick={() => updateQuantity(itemKey, item.quantity + 1)}
                          className="w-7 h-7 bg-white rounded-md flex items-center justify-center hover:bg-orange-50 hover:text-orange-500 transition-colors shadow-sm"
                        >
                          <Plus size={14} />
                        </button>
                        <span className="w-8 text-center text-sm font-bold">{item.quantity}</span>
                        <button
                          onClick={() => updateQuantity(itemKey, item.quantity - 1)}
                          className="w-7 h-7 bg-white rounded-md flex items-center justify-center hover:bg-orange-50 hover:text-orange-500 transition-colors shadow-sm"
                        >
                          <Minus size={14} />
                        </button>
                      </div>

                      <button
                        onClick={() => removeFromCart(itemKey)}
                        className="w-7 h-7 rounded-lg bg-red-50 text-red-400 hover:bg-red-100 hover:text-red-500 flex items-center justify-center transition-colors"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  </div>
                </div>
              );
            })
          )}
        </div>

        {/* Footer */}
        {items.length > 0 && (
          <div className="border-t p-5 space-y-3 bg-gray-50">
            <div className="flex justify-between items-center">
              <span className="text-gray-600 font-semibold">الإجمالي</span>
              <span className="text-xl font-black text-orange-500">
                {totalPrice.toLocaleString()} ر.ي
              </span>
            </div>
            <Link
              to="/cart"
              onClick={closeDrawer}
              className="btn-primary w-full text-center block"
            >
              متابعة الدفع
            </Link>
            <button onClick={closeDrawer} className="btn-secondary w-full text-sm">
              متابعة التسوق
            </button>
          </div>
        )}
      </div>
    </>
  );
}
