'use client';

import { useState } from 'react';
import { notFound, useParams } from 'next/navigation';
import Image from 'next/image';
import Link from 'next/link';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';
import { Card } from '@/components/ui/card';
import { gear } from '@/lib/data';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { ShoppingCart, Star } from 'lucide-react';
import { useCart } from '@/hooks/use-cart';
import type { CartItem } from '@/lib/types';

export default function GearDetailPage() {
  const [selectedSize, setSelectedSize] = useState<string | undefined>(
    undefined
  );
  const [selectedColor, setSelectedColor] = useState<string | undefined>(
    undefined
  );
  const params = useParams();
  const id = params.id as string;

  const item = gear.find((g) => g.id === id);
  const { addToCart } = useCart();

  if (!item) {
    notFound();
  }

  const handleAddToCart = () => {
    const cartItem: CartItem = {
      ...item,
      quantity: 1,
      selectedSize,
      selectedColor,
    };
    addToCart(cartItem);
  };

  return (
    <div className="container mx-auto">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <div>
          <Carousel className="w-full">
            <CarouselContent>
              {item.images.map((image, index) => (
                <CarouselItem key={index}>
                  <Card className="overflow-hidden aspect-square">
                    {image.url && (
                      <Image
                        src={image.url}
                        alt={`${item.name} image ${index + 1}`}
                        width={600}
                        height={600}
                        className="object-cover w-full h-full"
                        data-ai-hint={image.hint}
                      />
                    )}
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
            <CarouselPrevious className="left-4" />
            <CarouselNext className="right-4" />
          </Carousel>
        </div>
        <div className="flex flex-col gap-6">
          <div>
            <Badge variant="secondary">{item.category}</Badge>
            <h1 className="text-3xl lg:text-4xl font-bold tracking-tight mt-2">
              {item.name}
            </h1>
            <div className="flex items-center gap-2 mt-2">
              <div className="flex items-center gap-1">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star
                    key={i}
                    className={`w-5 h-5 ${
                      i < Math.floor(item.rating)
                        ? 'text-yellow-400 fill-yellow-400'
                        : 'text-gray-300'
                    }`}
                  />
                ))}
              </div>
              <span className="text-muted-foreground text-sm">
                ({item.reviewCount} reviews)
              </span>
            </div>
          </div>

          <p className="text-3xl font-bold text-primary">
            ${item.price.toFixed(2)}
          </p>

          <p className="text-muted-foreground leading-relaxed">
            {item.description}
          </p>

          <Separator />

          {item.sizes && (
            <div className="space-y-3">
              <h3 className="font-semibold">Size</h3>
              <RadioGroup
                value={selectedSize}
                onValueChange={setSelectedSize}
                className="flex flex-wrap gap-2"
              >
                {item.sizes.map((size) => (
                  <div key={size}>
                    <RadioGroupItem
                      value={size}
                      id={`size-${size}`}
                      className="sr-only"
                    />
                    <Label
                      htmlFor={`size-${size}`}
                      className="flex items-center justify-center rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer px-4 py-2"
                    >
                      {size}
                    </Label>
                  </div>
                ))}
              </RadioGroup>
            </div>
          )}

          {item.colors && (
            <div className="space-y-3">
              <h3 className="font-semibold">Color</h3>
              <RadioGroup
                value={selectedColor}
                onValueChange={setSelectedColor}
                className="flex flex-wrap gap-2"
              >
                {item.colors.map((color) => (
                  <div key={color}>
                    <RadioGroupItem
                      value={color}
                      id={`color-${color}`}
                      className="sr-only"
                    />
                    <Label
                      htmlFor={`color-${color}`}
                      className="flex items-center justify-center rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer px-4 py-2"
                    >
                      {color}
                    </Label>
                  </div>
                ))}
              </RadioGroup>
            </div>
          )}

          <Button size="lg" className="w-full mt-4" onClick={handleAddToCart}>
            <ShoppingCart className="mr-2 h-5 w-5" /> Add to Cart
          </Button>
        </div>
      </div>
    </div>
  );
}