"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Badge } from "@/components/ui/badge"
import { ShoppingCart, Plus, Minus, Trash2 } from "lucide-react"
import { useCart } from "@/lib/cart"

export default function CartSidebar() {
  const [isOpen, setIsOpen] = useState(false)
  const { items, updateQuantity, removeItem, getTotalItems, getTotalPrice } = useCart()

  const totalItems = getTotalItems()
  const totalPrice = getTotalPrice()

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger asChild>
        <Button variant="outline" size="icon" className="relative bg-transparent">
          <ShoppingCart className="w-5 h-5" />
          {totalItems > 0 && (
            <Badge className="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center bg-[var(--dark-red)] text-white text-xs">
              {totalItems}
            </Badge>
          )}
        </Button>
      </SheetTrigger>

      <SheetContent className="w-full sm:max-w-lg">
        <SheetHeader>
          <SheetTitle className="text-right">سلة التسوق ({totalItems} منتج)</SheetTitle>
        </SheetHeader>

        <div className="mt-6 flex flex-col h-full">
          {items.length === 0 ? (
            <div className="flex-1 flex items-center justify-center">
              <div className="text-center">
                <ShoppingCart className="w-16 h-16 mx-auto text-[var(--parg-color)] mb-4" />
                <p className="text-[var(--parg-color)]">سلة التسوق فارغة</p>
                <Button
                  onClick={() => setIsOpen(false)}
                  className="mt-4 bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]"
                >
                  تصفح المنتجات
                </Button>
              </div>
            </div>
          ) : (
            <>
              <div className="flex-1 overflow-y-auto space-y-4">
                {items.map((item) => (
                  <div key={item.product.id} className="flex gap-3 p-3 border border-[var(--border-color)] rounded-lg">
                    <Image
                      src={item.product.image || "/placeholder.svg"}
                      alt={item.product.name}
                      width={80}
                      height={80}
                      className="rounded-md object-cover"
                    />

                    <div className="flex-1">
                      <h4 className="font-medium text-[var(--dark-color)] text-sm line-clamp-2">{item.product.name}</h4>

                      <p className="text-sm text-[var(--name-item)] font-semibold mt-1">{item.product.price} جنيه</p>

                      <div className="flex items-center justify-between mt-2">
                        <div className="flex items-center gap-2">
                          <Button
                            size="icon"
                            variant="outline"
                            className="h-6 w-6 bg-transparent"
                            onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
                          >
                            <Minus className="w-3 h-3" />
                          </Button>

                          <span className="text-sm font-medium w-8 text-center">{item.quantity}</span>

                          <Button
                            size="icon"
                            variant="outline"
                            className="h-6 w-6 bg-transparent"
                            onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
                          >
                            <Plus className="w-3 h-3" />
                          </Button>
                        </div>

                        <Button
                          size="icon"
                          variant="ghost"
                          className="h-6 w-6 text-[var(--dark-red)] hover:text-[var(--dark-red)] hover:bg-red-50"
                          onClick={() => removeItem(item.product.id)}
                        >
                          <Trash2 className="w-3 h-3" />
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="border-t border-[var(--border-color)] pt-4 space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold text-[var(--dark-color)]">
                    المجموع: {totalPrice.toFixed(2)} جنيه
                  </span>
                </div>

                <div className="space-y-2">
                  <Link href="/store/cart" onClick={() => setIsOpen(false)}>
                    <Button variant="outline" className="w-full bg-transparent">
                      عرض السلة
                    </Button>
                  </Link>

                  <Link href="/store/checkout" onClick={() => setIsOpen(false)}>
                    <Button className="w-full bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]">
                      إتمام الطلب
                    </Button>
                  </Link>
                </div>
              </div>
            </>
          )}
        </div>
      </SheetContent>
    </Sheet>
  )
}