"use client"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Minus, Plus, ShoppingCart, Truck, Shield, ChevronDown, ChevronUp, CreditCard, Banknote } from "lucide-react"
import type { Product } from "@/lib/data"
import { useCart } from "@/lib/cart-context"

interface ProductDetailProps {
  product: Product
}

export function ProductDetail({ product }: ProductDetailProps) {
  const router = useRouter()
  const [quantity, setQuantity] = useState(1)
  const [ingredientsOpen, setIngredientsOpen] = useState(true)
  const { addToCart } = useCart()

  const discount = product.discountPercent || Math.round(((product.mrp - product.price) / product.mrp) * 100)

  const increaseQuantity = () => setQuantity((prev) => prev + 1)
  const decreaseQuantity = () => setQuantity((prev) => Math.max(1, prev - 1))

  const handleAddToCart = () => {
    addToCart(product, quantity)
  }

  const handleBuyCOD = () => {
    addToCart(product, quantity)
    router.push("/checkout?type=cod")
  }

  const handleBuyNow = () => {
    addToCart(product, quantity)
    router.push("/checkout?type=online")
  }

  return (
    <div className="bg-background min-h-screen">
      <div className="container mx-auto px-4 py-8">
        {/* Top Section - Image and Purchase Options */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
          {/* Product Image */}
          <div className="bg-white rounded-2xl p-6 flex items-center justify-center relative border border-border shadow-sm">
            {discount > 0 && (
              <span className="absolute top-4 left-4 bg-accent text-accent-foreground text-lg font-bold px-4 py-2 rounded-lg z-10 shadow-lg">
                {discount}% OFF
              </span>
            )}
            <div className="aspect-square w-full max-w-lg overflow-hidden rounded-xl">
              <img
                src={product.image || "/placeholder.svg"}
                alt={product.name}
                className="w-full h-full object-cover"
              />
            </div>
          </div>

          {/* Product Info & Purchase Section */}
          <div className="space-y-6">
            <div>
              <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-3">{product.name}</h1>
              <p className="text-muted-foreground text-sm">SKU: VKT-{product.id.padStart(6, "0")}</p>
            </div>

            {/* Pricing */}
            <div className="bg-muted/30 rounded-xl p-4 border border-border">
              <div className="flex items-baseline gap-4 flex-wrap mb-2">
                <span className="text-3xl font-bold text-success">Rs. {product.price.toLocaleString()}</span>
                <span className="text-xl text-muted-foreground line-through">Rs. {product.mrp.toLocaleString()}</span>
              </div>
              {discount > 0 && (
                <span className="inline-block bg-success/10 text-success px-3 py-1 rounded text-sm font-semibold">
                  You Save Rs. {(product.mrp - product.price).toLocaleString()} ({discount}% OFF)
                </span>
              )}
            </div>

            {/* Stock Status */}
            <div className="flex items-center gap-2">
              <div className={`w-3 h-3 rounded-full ${product.inStock ? "bg-success" : "bg-destructive"}`} />
              <span className={`font-medium ${product.inStock ? "text-success" : "text-destructive"}`}>
                {product.inStock ? "In Stock - Ready to Ship" : "Out of Stock"}
              </span>
            </div>

            {/* Quantity Selector */}
            <div className="flex items-center gap-4">
              <span className="font-medium text-foreground">Quantity:</span>
              <div className="flex items-center border border-border rounded-lg bg-white">
                <button
                  onClick={decreaseQuantity}
                  className="w-12 h-12 flex items-center justify-center hover:bg-muted transition-colors rounded-l-lg"
                >
                  <Minus className="w-5 h-5" />
                </button>
                <span className="w-16 text-center font-semibold text-lg border-x border-border">{quantity}</span>
                <button
                  onClick={increaseQuantity}
                  className="w-12 h-12 flex items-center justify-center hover:bg-muted transition-colors rounded-r-lg"
                >
                  <Plus className="w-5 h-5" />
                </button>
              </div>
            </div>

            <div className="space-y-3">
              <button
                onClick={handleAddToCart}
                disabled={!product.inStock}
                className="w-full bg-primary hover:bg-primary/90 text-primary-foreground py-4 px-6 rounded-full font-semibold text-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl"
              >
                <ShoppingCart className="w-5 h-5" />
                <span>Add to Cart</span>
              </button>

              <button
                onClick={handleBuyCOD}
                disabled={!product.inStock}
                className="w-full bg-foreground hover:bg-foreground/90 text-background py-4 px-6 rounded-full font-semibold text-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <Banknote className="w-5 h-5" />
                <span>Buy with Cash on Delivery</span>
              </button>

              <button
                onClick={handleBuyNow}
                disabled={!product.inStock}
                className="w-full bg-blue-600 hover:bg-blue-700 text-white py-4 px-6 rounded-full font-semibold text-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl"
              >
                <CreditCard className="w-5 h-5" />
                <span>Buy it now</span>
              </button>
            </div>

            {/* Quick Features */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-border">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                  <Truck className="w-5 h-5 text-primary" />
                </div>
                <div>
                  <p className="font-medium text-sm">Free Delivery</p>
                  <p className="text-xs text-muted-foreground">Orders above Rs. 3000</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                  <Shield className="w-5 h-5 text-primary" />
                </div>
                <div>
                  <p className="font-medium text-sm">Discreet Packaging</p>
                  <p className="text-xs text-muted-foreground">100% Private</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center">
                  <svg className="w-5 h-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <p className="font-medium text-sm">100% Genuine</p>
                  <p className="text-xs text-muted-foreground">Authentic Products</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-2xl border border-border shadow-sm p-6 md:p-8 mb-8">
          <h2 className="text-xl md:text-2xl font-bold text-foreground mb-4">Product Description</h2>
          <p className="text-foreground leading-relaxed text-base md:text-lg">
            {product.longDescription || product.description}
          </p>
        </div>

        {product.ingredientBenefits && product.ingredientBenefits.length > 0 && (
          <div className="bg-white rounded-2xl border border-border shadow-sm overflow-hidden mb-8">
            <button
              onClick={() => setIngredientsOpen(!ingredientsOpen)}
              className="w-full flex items-center justify-between p-6 md:p-8 text-left hover:bg-muted/30 transition-colors"
            >
              <h2 className="text-xl md:text-2xl font-bold text-foreground">
                {product.name} Key Ingredients and Their Benefits
              </h2>
              {ingredientsOpen ? (
                <ChevronUp className="w-6 h-6 text-muted-foreground flex-shrink-0" />
              ) : (
                <ChevronDown className="w-6 h-6 text-muted-foreground flex-shrink-0" />
              )}
            </button>

            {ingredientsOpen && (
              <div className="px-6 md:px-8 pb-6 md:pb-8 space-y-6">
                {product.ingredientBenefits.map((ingredient, index) => (
                  <div key={index} className="border-t border-border pt-6 first:border-t-0 first:pt-0">
                    <h3 className="text-lg font-bold text-primary mb-3">{ingredient.name}</h3>
                    <ul className="space-y-2">
                      {ingredient.benefits.map((benefit, benefitIndex) => (
                        <li key={benefitIndex} className="flex items-start gap-3 text-foreground">
                          <span className="text-primary font-bold mt-1">•</span>
                          <span className="leading-relaxed">{benefit}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        <div className="bg-white rounded-2xl border border-border shadow-sm p-6 md:p-8 mb-8">
          <h2 className="text-xl md:text-2xl font-bold text-foreground mb-4">Directions to Use</h2>
          <p className="text-foreground leading-relaxed text-base md:text-lg">{product.directions}</p>
        </div>

        <div className="bg-white rounded-2xl border border-border shadow-sm p-6 md:p-8">
          <h2 className="text-xl md:text-2xl font-bold text-foreground mb-4">Key Benefits</h2>
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {product.benefits.map((benefit, index) => (
              <li key={index} className="flex items-start gap-3">
                <span className="w-6 h-6 rounded-full bg-success/10 text-success flex items-center justify-center text-sm font-bold flex-shrink-0 mt-0.5">
                  ✓
                </span>
                <span className="text-foreground">{benefit}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}
