import { notFound } from "next/navigation"
import Image from "next/image"
import { getProductById } from "@/lib/products"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Star, Truck, Shield, RotateCcw } from "lucide-react"
import AddToCartButton from "@/components/store/add-to-cart-button"

interface ProductPageProps {
  params: {
    id: string
  }
}

export default function ProductPage({ params }: ProductPageProps) {
  const product = getProductById(params.id)

  if (!product) {
    notFound()
  }

  return (
    <div className="min-h-screen bg-[var(--bg-color)]">
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Product Images */}
          <div className="space-y-4">
            <div className="relative">
              {product.isOnSale && (
                <Badge className="absolute top-4 right-4 z-10 bg-[var(--dark-red)] text-white">
                  خصم {product.discount}%
                </Badge>
              )}
              <Image
                src={product.image || "/placeholder.svg"}
                alt={product.name}
                width={600}
                height={600}
                className="w-full rounded-lg object-cover"
              />
            </div>

            {product.images && product.images.length > 0 && (
              <div className="grid grid-cols-3 gap-4">
                {product.images.map((image, index) => (
                  <Image
                    key={index}
                    src={image || "/placeholder.svg"}
                    alt={`${product.name} ${index + 1}`}
                    width={200}
                    height={200}
                    className="w-full h-32 object-cover rounded-lg cursor-pointer hover:opacity-80 transition-opacity"
                  />
                ))}
              </div>
            )}
          </div>

          {/* Product Info */}
          <div className="space-y-6">
            <div>
              <h1 className="text-3xl font-bold text-[var(--dark-color)] mb-2">{product.name}</h1>
              <p className="text-[var(--parg-color)] text-lg">{product.description}</p>
            </div>

            {/* Rating */}
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <div className="flex">
                  {[...Array(5)].map((_, i) => (
                    <Star
                      key={i}
                      className={`w-5 h-5 ${
                        i < Math.floor(product.rating)
                          ? "fill-[var(--main-color)] text-[var(--main-color)]"
                          : "text-gray-300"
                      }`}
                    />
                  ))}
                </div>
                <span className="font-medium text-[var(--dark-color)]">{product.rating}</span>
              </div>
              <span className="text-[var(--p-color)]">({product.reviewCount} تقييم)</span>
            </div>

            {/* Price */}
            <div className="flex items-center gap-4">
              <span className="text-3xl font-bold text-[var(--dark-color)]">{product.price} جنيه</span>
              {product.originalPrice && (
                <span className="text-xl text-[var(--p-color)] line-through">{product.originalPrice} جنيه</span>
              )}
            </div>

            {/* Stock Status */}
            <div className="flex items-center gap-2">
              <span className={`font-medium ${product.inStock ? "text-green-600" : "text-[var(--dark-red)]"}`}>
                {product.inStock ? `متوفر في المخزن (${product.stockQuantity} قطعة)` : "غير متوفر"}
              </span>
            </div>

            {/* Brand */}
            <div>
              <span className="text-[var(--parg-color)]">الماركة: </span>
              <span className="font-medium text-[var(--name-item)]">{product.brand}</span>
            </div>

            {/* Add to Cart */}
            <AddToCartButton product={product} />

            {/* Features */}
            <Card className="border-[var(--border-color)]">
              <CardContent className="p-6">
                <h3 className="font-semibold text-[var(--dark-color)] mb-4">المزايا الرئيسية</h3>
                <ul className="space-y-2">
                  {product.features.map((feature, index) => (
                    <li key={index} className="flex items-center gap-2 text-[var(--parg-color)]">
                      <div className="w-2 h-2 bg-[var(--main-color)] rounded-full" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>

            {/* Service Icons */}
            <div className="grid grid-cols-3 gap-4">
              <div className="text-center p-4">
                <Truck className="w-8 h-8 mx-auto mb-2 text-[var(--name-item)]" />
                <p className="text-sm text-[var(--parg-color)]">شحن مجاني</p>
              </div>
              <div className="text-center p-4">
                <Shield className="w-8 h-8 mx-auto mb-2 text-[var(--name-item)]" />
                <p className="text-sm text-[var(--parg-color)]">ضمان الجودة</p>
              </div>
              <div className="text-center p-4">
                <RotateCcw className="w-8 h-8 mx-auto mb-2 text-[var(--name-item)]" />
                <p className="text-sm text-[var(--parg-color)]">إرجاع مجاني</p>
              </div>
            </div>
          </div>
        </div>

        {/* Specifications */}
        <div className="mt-12">
          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <h3 className="text-2xl font-bold text-[var(--dark-color)] mb-6">المواصفات التقنية</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {Object.entries(product.specifications).map(([key, value]) => (
                  <div key={key} className="flex justify-between py-2 border-b border-[var(--border-color)]">
                    <span className="font-medium text-[var(--dark-color)]">{key}</span>
                    <span className="text-[var(--parg-color)]">{value}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}