"use client"

import Image from "next/image"
import { useState } from "react"
import type { Product } from "@/types/product"
import { formatPrice } from "@/lib/formatters"
import { useCart } from "@/hooks/useCart"
import { Button } from "@/components/ui/Button"
import { Badge } from "@/components/ui/Badge"

type ProductDetailProps = {
  product: Product
}

export function ProductDetail({ product }: ProductDetailProps) {
  const [selectedSize, setSelectedSize] = useState(product.sizes[0] ?? "")
  const [selectedColor, setSelectedColor] = useState(product.colors[0] ?? "")
  const [added, setAdded] = useState(false)
  const { addItem } = useCart()

  function handleAddToCart() {
    if (!selectedSize || !selectedColor || product.stock === 0) return
    addItem(product, selectedSize, selectedColor)
    setAdded(true)
    setTimeout(() => setAdded(false), 1500)
  }

  return (
    <div className="grid gap-10 lg:grid-cols-2">
      <div className="relative aspect-square overflow-hidden rounded-xl bg-surface">
        <Image
          src={product.image}
          alt={product.name}
          fill
          className="object-cover"
          priority
        />
      </div>

      <div className="flex flex-col gap-5">
        <div>
          <Badge className="capitalize">{product.category}</Badge>
          <h1 className="mt-2 text-3xl font-bold tracking-tight text-white">
            {product.name}
          </h1>
          <p className="mt-2 text-2xl font-semibold text-white">
            {formatPrice(product.price)}
          </p>
          <p className="mt-1 text-sm text-silver">
            ⭐ {product.rating} ({product.reviewCount} reviews)
          </p>
        </div>

        <p className="leading-relaxed text-silver">{product.description}</p>

        <div>
          <h3 className="mb-2 text-sm font-semibold text-white">Size</h3>
          <div className="flex flex-wrap gap-2">
            {product.sizes.map((size) => (
              <button
                key={size}
                onClick={() => setSelectedSize(size)}
                className={`rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors ${
                  selectedSize === size
                    ? "border-gold bg-gold text-black"
                    : "border-white/20 text-silver hover:border-gold hover:text-white"
                }`}
              >
                {size}
              </button>
            ))}
          </div>
        </div>

        <div>
          <h3 className="mb-2 text-sm font-semibold text-white">Color</h3>
          <div className="flex flex-wrap gap-2">
            {product.colors.map((color) => (
              <button
                key={color}
                onClick={() => setSelectedColor(color)}
                className={`rounded-lg border px-3 py-1.5 text-sm font-medium capitalize transition-colors ${
                  selectedColor === color
                    ? "border-gold bg-gold text-black"
                    : "border-white/20 text-silver hover:border-gold hover:text-white"
                }`}
              >
                {color}
              </button>
            ))}
          </div>
        </div>

        <Button
          onClick={handleAddToCart}
          size="lg"
          disabled={product.stock === 0}
          className="mt-2"
        >
          {product.stock === 0 ? "Sold Out" : added ? "Added!" : "Add to Cart"}
        </Button>

        {product.stock > 0 && product.stock < 10 && (
          <p className="text-sm text-gold">Only {product.stock} left in stock!</p>
        )}
      </div>
    </div>
  )
}