"use client";
import { products } from "@/lib/data";
import { useCart } from "@/lib/use-cart";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Button } from "@/components/ui/button";
import { Footer } from "@/components/footer";
import { Star, ShieldCheck, Truck, RotateCcw, ShoppingCart } from "lucide-react";
import { useParams } from "next/navigation";
import Link from "next/link";

export default function ProductDetailPage() {
  const params = useParams();
  const product = products.find((p) => p.id === params.id);
  const { addToCart } = useCart();

  if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <Heading>Product not found</Heading>
          <Button asChild className="mt-4"><Link href="/products">Back to Products</Link></Button>
        </div>
      </div>
    );
  }

  return (
    <main className="min-h-screen bg-white">
      <Container className="py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          {/* Image Gallery */}
          <div className="space-y-4">
            <div className="aspect-square rounded-3xl overflow-hidden bg-neutral-100 border">
              <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
            </div>
            <div className="grid grid-cols-4 gap-4">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="aspect-square rounded-xl overflow-hidden bg-neutral-100 border cursor-pointer hover:opacity-80 transition-opacity">
                  <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
                </div>
              ))}
            </div>
          </div>

          {/* Product Info */}
          <div className="flex flex-col">
            <div className="mb-2">
              <span className="text-sm font-medium text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
                {product.category}
              </span>
            </div>
            <Heading className="text-3xl md:text-4xl font-bold mb-4">{product.name}</Heading>
            
            <div className="flex items-center gap-4 mb-6">
              <div className="flex items-center text-yellow-400">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className={`w-4 h-4 ${i < Math.floor(product.rating) ? "fill-current" : "text-neutral-300"}`} />
                ))}
                <span className="ml-2 text-sm font-bold text-neutral-900">{product.rating}</span>
              </div>
              <span className="text-sm text-neutral-500">{product.reviews} Reviews</span>
            </div>

            <div className="mb-8">
              <div className="flex items-baseline gap-3">
                <span className="text-4xl font-bold text-neutral-900">₹{product.price}</span>
                {product.originalPrice && (
                  <>
                    <span className="text-xl text-neutral-400 line-through">₹{product.originalPrice}</span>
                    <span className="text-green-600 font-bold">
                      {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF
                    </span>
                  </>
                )}
              </div>
              <p className="text-sm text-neutral-500 mt-1">Inclusive of all taxes</p>
            </div>

            <p className="text-neutral-600 leading-relaxed mb-8">
              {product.description} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 mb-10">
              <Button 
                size="lg" 
                className="flex-1 rounded-full py-7 text-lg"
                onClick={() => addToCart(product)}
              >
                <ShoppingCart className="w-5 h-5 mr-2" /> Add to Cart
              </Button>
              <Button size="lg" variant="outline" className="flex-1 rounded-full py-7 text-lg">
                Buy Now
              </Button>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8 border-t">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center">
                  <Truck className="w-5 h-5 text-neutral-600" />
                </div>
                <div className="text-xs">
                  <p className="font-bold">Free Delivery</p>
                  <p className="text-neutral-500">Orders over ₹499</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center">
                  <RotateCcw className="w-5 h-5 text-neutral-600" />
                </div>
                <div className="text-xs">
                  <p className="font-bold">7 Days Return</p>
                  <p className="text-neutral-500">Easy returns policy</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center">
                  <ShieldCheck className="w-5 h-5 text-neutral-600" />
                </div>
                <div className="text-xs">
                  <p className="font-bold">Secure Payment</p>
                  <p className="text-neutral-500">100% safe checkout</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Container>
      <Footer />
    </main>
  );
}