"use client";

import { useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { X, Plus, Minus, ShoppingBag, ArrowRight, Trash2 } from "lucide-react";
import { useCartStore } from "@/store/cart";
import { formatPrice } from "@/lib/utils";

export default function CartSidebar() {
  const { items, isOpen, closeCart, removeItem, updateQuantity, total } = useCartStore();
  const cartTotal = total();

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [isOpen]);

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

      {/* Sidebar */}
      <div
        className={`fixed right-0 top-0 h-full w-full sm:w-96 bg-white z-50 flex flex-col shadow-2xl transition-transform duration-300 ease-out ${isOpen ? "translate-x-0" : "translate-x-full"}`}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 bg-gradient-to-r from-sky-600 to-sky-500">
          <div className="flex items-center gap-2 text-white">
            <ShoppingBag className="w-5 h-5" />
            <span className="font-bold text-lg">My Cart</span>
            {items.length > 0 && (
              <span className="bg-white/20 text-white text-xs px-2 py-0.5 rounded-full font-medium">
                {items.length} {items.length === 1 ? "item" : "items"}
              </span>
            )}
          </div>
          <button onClick={closeCart} className="p-1.5 rounded-lg bg-white/20 hover:bg-white/30 text-white transition-colors">
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Items */}
        {items.length === 0 ? (
          <div className="flex-1 flex flex-col items-center justify-center gap-4 p-6">
            <div className="w-24 h-24 rounded-full bg-sky-50 flex items-center justify-center">
              <ShoppingBag className="w-12 h-12 text-sky-300" />
            </div>
            <div className="text-center">
              <p className="font-semibold text-slate-700 text-lg">Your cart is empty</p>
              <p className="text-slate-400 text-sm mt-1">Add some products to get started</p>
            </div>
            <button
              onClick={closeCart}
              className="mt-2 bg-sky-500 text-white px-6 py-2.5 rounded-xl hover:bg-sky-600 transition-colors font-medium"
            >
              Continue Shopping
            </button>
          </div>
        ) : (
          <>
            <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3">
              {items.map((item) => (
                <div key={item.id} className="flex gap-3 bg-slate-50 rounded-xl p-3 group">
                  <div className="relative w-20 h-20 rounded-lg overflow-hidden bg-white border border-slate-100 shrink-0">
                    <Image
                      src={item.image || "/images/placeholder.png"}
                      alt={item.name}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div className="flex-1 min-w-0">
                    <Link
                      href={`/products/${item.slug}`}
                      onClick={closeCart}
                      className="text-sm font-semibold text-slate-800 hover:text-sky-600 line-clamp-2 transition-colors"
                    >
                      {item.name}
                    </Link>
                    <p className="text-sky-600 font-bold text-sm mt-1">{formatPrice(item.price)}</p>
                    <div className="flex items-center gap-2 mt-2">
                      <div className="flex items-center border border-slate-200 rounded-lg bg-white">
                        <button
                          onClick={() => updateQuantity(item.id, item.quantity - 1)}
                          className="p-1.5 hover:bg-sky-50 rounded-l-lg transition-colors"
                        >
                          <Minus className="w-3 h-3 text-slate-600" />
                        </button>
                        <span className="px-3 text-sm font-semibold text-slate-800 min-w-8 text-center">
                          {item.quantity}
                        </span>
                        <button
                          onClick={() => updateQuantity(item.id, item.quantity + 1)}
                          className="p-1.5 hover:bg-sky-50 rounded-r-lg transition-colors"
                          disabled={item.quantity >= item.stock}
                        >
                          <Plus className="w-3 h-3 text-slate-600" />
                        </button>
                      </div>
                      <button
                        onClick={() => removeItem(item.id)}
                        className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </div>
                  <div className="text-right shrink-0">
                    <span className="text-sm font-bold text-slate-800">
                      {formatPrice(item.price * item.quantity)}
                    </span>
                  </div>
                </div>
              ))}
            </div>

            {/* Footer */}
            <div className="border-t border-slate-100 p-4 space-y-3">
              <div className="flex justify-between items-center">
                <span className="text-slate-600 text-sm">Subtotal</span>
                <span className="font-bold text-slate-800">{formatPrice(cartTotal)}</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-600 text-sm">Delivery</span>
                <span className="text-green-600 text-sm font-medium">Calculated at checkout</span>
              </div>
              <div className="flex justify-between items-center pt-2 border-t border-slate-100">
                <span className="font-bold text-slate-800">Total</span>
                <span className="font-black text-xl text-sky-600">{formatPrice(cartTotal)}</span>
              </div>
              <Link
                href="/checkout"
                onClick={closeCart}
                className="flex items-center justify-center gap-2 w-full bg-gradient-to-r from-sky-600 to-sky-500 text-white py-3.5 rounded-xl font-bold hover:from-sky-700 hover:to-sky-600 transition-all shadow-lg shadow-sky-200"
              >
                Proceed to Checkout <ArrowRight className="w-4 h-4" />
              </Link>
              <button
                onClick={closeCart}
                className="w-full border-2 border-sky-200 text-sky-600 py-2.5 rounded-xl font-medium hover:bg-sky-50 transition-colors text-sm"
              >
                Continue Shopping
              </button>
            </div>
          </>
        )}
      </div>
    </>
  );
}