import { products } from "@/lib/products";
import { Container } from "@/components/container";
import { Button } from "@/components/ui/button";
import { Star, ArrowLeft, ShieldCheck, Truck, RefreshCcw } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { notFound } from "next/navigation";
import { Footer } from "@/components/footer";

export default function ProductPage({ params }: { params: { id: string } }) {
  const product = products.find((p) => p.id === params.id);

  if (!product) {
    notFound();
  }

  return (
    <main className="min-h-screen bg-neutral-50">
      <div className="bg-white border-b py-4">
        <Container>
          <Link href="/" className="flex items-center gap-2 text-sm text-neutral-600 hover:text-orange-600 transition-colors">
            <ArrowLeft className="w-4 h-4" />
            Back to Shopping
          </Link>
        </Container>
      </div>

      <section className="py-12">
        <Container>
          <div className="bg-white rounded-2xl overflow-hidden shadow-sm border grid grid-cols-1 lg:grid-cols-2">
            {/* Image Gallery */}
            <div className="p-8 bg-neutral-50 flex items-center justify-center">
              <div className="relative aspect-square w-full max-w-md overflow-hidden rounded-xl bg-white shadow-inner">
                <Image
                  src={product.image}
                  alt={product.name}
                  fill
                  className="object-contain p-4"
                />
              </div>
            </div>

            {/* Product Info */}
            <div className="p-8 md:p-12 flex flex-col">
              <div className="mb-6">
                <span className="inline-block px-3 py-1 rounded-full bg-orange-100 text-orange-600 text-xs font-bold uppercase tracking-wider mb-4">
                  {product.category}
                </span>
                <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-4">
                  {product.name}
                </h1>
                <div className="flex items-center gap-2 mb-6">
                  <div className="flex items-center gap-1">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star
                        key={i}
                        className={`w-4 h-4 ${
                          i < Math.floor(product.rating)
                            ? "fill-orange-400 text-orange-400"
                            : "fill-neutral-200 text-neutral-200"
                        }`}
                      />
                    ))}
                  </div>
                  <span className="text-sm font-medium text-neutral-600">
                    {product.rating} Rating
                  </span>
                </div>
                <p className="text-4xl font-bold text-orange-600 mb-8">
                  {product.price}
                </p>
              </div>

              <div className="prose prose-neutral mb-10">
                <h3 className="text-lg font-bold mb-2">Description</h3>
                <p className="text-neutral-600 leading-relaxed">
                  {product.description}
                </p>
              </div>

              <div className="mt-auto space-y-6">
                <Button asChild size="lg" className="w-full h-14 text-lg bg-orange-600 hover:bg-orange-700 shadow-lg shadow-orange-200">
                  <a href={product.affiliateLink} target="_blank" rel="noopener noreferrer">
                    Shop Now
                  </a>
                </Button>
                
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-8 border-t">
                  <div className="flex items-center gap-3 text-xs text-neutral-500">
                    <ShieldCheck className="w-5 h-5 text-green-500" />
                    <span>Secure Checkout on Partner Site</span>
                  </div>
                  <div className="flex items-center gap-3 text-xs text-neutral-500">
                    <Truck className="w-5 h-5 text-blue-500" />
                    <span>Global Shipping Available</span>
                  </div>
                  <div className="flex items-center gap-3 text-xs text-neutral-500">
                    <RefreshCcw className="w-5 h-5 text-orange-500" />
                    <span>Easy Returns via Retailer</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Affiliate Disclaimer */}
          <div className="mt-8 p-6 bg-neutral-100 rounded-xl border border-neutral-200">
            <p className="text-xs text-neutral-500 text-center leading-relaxed">
              <strong>Affiliate Disclosure:</strong> WORLDWIDE SHOPPERS is an affiliate marketing website. When you click "Shop Now", you will be redirected to a third-party retailer's website to complete your purchase. We may earn a commission from qualifying purchases at no extra cost to you.
            </p>
          </div>
        </Container>
      </section>
      <Footer />
    </main>
  );
}