import { notFound } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { cards } from "@/data/cards"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChevronRight } from "lucide-react"

export function generateStaticParams() {
  return cards.map((card) => ({
    id: card.id,
  }))
}

export default function CardDetailPage({
  params,
}: {
  params: { id: string }
}) {
  const card = cards.find((c) => c.id === params.id)

  if (!card) {
    notFound()
  }

  const categoryName = card.category.charAt(0).toUpperCase() + card.category.slice(1)

  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        {/* Breadcrumb */}
        <nav className="flex items-center gap-2 text-sm text-muted-foreground mb-8">
          <Link href="/" className="hover:text-primary transition-colors">
            Home
          </Link>
          <ChevronRight className="h-4 w-4" />
          <Link href={`/category/${card.category}`} className="hover:text-primary transition-colors">
            {categoryName}
          </Link>
          <ChevronRight className="h-4 w-4" />
          <span className="text-foreground">{card.name}</span>
        </nav>

        <div className="grid md:grid-cols-2 gap-12">
          {/* Product Image */}
          <div className="space-y-4">
            <div className="relative aspect-square bg-card rounded-lg overflow-hidden border">
              <Image
                src={card.image || "/placeholder.svg"}
                alt={card.name}
                fill
                className="object-contain p-8"
                priority
              />
              <div className="absolute top-4 right-4 bg-primary text-primary-foreground px-4 py-2 rounded-md font-semibold">
                ${card.price.toFixed(2)}
              </div>
            </div>
          </div>

          {/* Product Details */}
          <div className="space-y-6">
            <div>
              <h1 className="text-4xl font-bold text-foreground mb-2">{card.name}</h1>
              <p className="text-2xl font-semibold text-primary">${card.price.toFixed(2)}</p>
            </div>

            {/* Product Information */}
            <div className="space-y-3 text-muted-foreground">
              <p>
                <span className="font-semibold text-foreground">Order Code:</span> {card.orderCode}
              </p>
              {card.description && (
                <p>
                  <span className="font-semibold text-foreground">Details:</span> {card.description}
                </p>
              )}
              <p>
                <span className="font-semibold text-foreground">Dimensions:</span> 12 cm × 12 cm
              </p>
              <p>
                <span className="font-semibold text-foreground">Weight:</span> 25 grams
              </p>
            </div>

            {/* Color Selection */}
            <div className="space-y-2">
              <Label htmlFor="color">Available Colors:</Label>
              <Select defaultValue="red">
                <SelectTrigger id="color" className="w-full">
                  <SelectValue placeholder="Select a color" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="red">Red</SelectItem>
                  <SelectItem value="green">Green</SelectItem>
                  <SelectItem value="blue">Blue</SelectItem>
                  <SelectItem value="brown">Brown</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Quantity Selection */}
            <div className="space-y-2">
              <Label htmlFor="quantity">Quantity:</Label>
              <Input id="quantity" type="number" min="1" defaultValue="1" className="w-24" />
            </div>

            {/* Add to Cart Button */}
            <Button size="lg" className="w-full">
              Add To Cart
            </Button>

            {/* Additional Info */}
            <div className="border-t pt-6 space-y-2 text-sm text-muted-foreground">
              <p>All cards are handcrafted 3D pop-up greeting cards made with premium materials.</p>
              <p>Each card comes with a matching envelope.</p>
              <p>Satisfaction Guaranteed - Quality you can trust.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}