"use client"

import { useCart } from "@/lib/cart"
import Header from "@/components/layout/header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Minus, Trash2, ShoppingCart } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

export default function CartPage() {
  const { items, updateQuantity, removeItem, getTotalItems, getTotalPrice, clearCart } = useCart()

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

  return (
    <div className="min-h-screen bg-[var(--bg-color)]">
      <Header />

      <div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-[var(--dark-color)] mb-2">سلة التسوق</h1>
          <p className="text-[var(--parg-color)]">({totalItems} منتج)</p>
        </div>

        {items.length === 0 ? (
          <div className="text-center py-16">
            <ShoppingCart className="w-24 h-24 mx-auto text-[var(--parg-color)] mb-6" />
            <h2 className="text-2xl font-semibold text-[var(--dark-color)] mb-4">سلة التسوق فارغة</h2>
            <p className="text-[var(--parg-color)] mb-8">لم تقم بإضافة أي منتجات إلى سلة التسوق بعد</p>
            <Link href="/store">
              <Button className="bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)] font-medium">
                تصفح المنتجات
              </Button>
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Cart Items */}
            <div className="lg:col-span-2 space-y-4">
              {items.map((item) => (
                <Card key={item.product.id} className="border-[var(--border-color)]">
                  <CardContent className="p-6">
                    <div className="flex gap-4">
                      <Image
                        src={item.product.image || "/placeholder.svg"}
                        alt={item.product.name}
                        width={120}
                        height={120}
                        className="rounded-lg object-cover"
                      />

                      <div className="flex-1">
                        <Link href={`/store/products/${item.product.id}`}>
                          <h3 className="font-semibold text-[var(--dark-color)] mb-2 hover:text-[var(--name-item)] transition-colors">
                            {item.product.name}
                          </h3>
                        </Link>

                        <p className="text-[var(--parg-color)] text-sm mb-3 line-clamp-2">{item.product.description}</p>

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

                            <span className="font-medium text-[var(--dark-color)] w-8 text-center">
                              {item.quantity}
                            </span>

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

                          <div className="flex items-center gap-4">
                            <span className="font-bold text-[var(--dark-color)]">
                              {(item.product.price * item.quantity).toFixed(2)} جنيه
                            </span>

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

              <div className="flex justify-between items-center pt-4">
                <Button
                  variant="outline"
                  onClick={clearCart}
                  className="text-[var(--dark-red)] border-[var(--dark-red)] hover:bg-red-50 bg-transparent"
                >
                  إفراغ السلة
                </Button>

                <Link href="/store">
                  <Button variant="outline">متابعة التسوق</Button>
                </Link>
              </div>
            </div>

            {/* Order Summary */}
            <div className="lg:col-span-1">
              <Card className="border-[var(--border-color)] sticky top-24">
                <CardHeader>
                  <CardTitle className="text-[var(--dark-color)]">ملخص الطلب</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex justify-between">
                    <span className="text-[var(--parg-color)]">المجموع الفرعي:</span>
                    <span className="font-medium text-[var(--dark-color)]">{totalPrice.toFixed(2)} جنيه</span>
                  </div>

                  <div className="flex justify-between">
                    <span className="text-[var(--parg-color)]">الشحن:</span>
                    <span className="font-medium text-green-600">مجاني</span>
                  </div>

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

                  <Link href="/store/checkout">
                    <Button className="w-full bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)] font-medium">
                      إتمام الطلب
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}