import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Image from 'next/image';
import { Star } from 'lucide-react';
import Link from 'next/link';
import { gear } from '@/lib/data';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

export default function MarketplacePage() {
  const categories = ['Apparel', 'Protective Gear', 'Bike Parts'];

  return (
    <div className="container mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold tracking-tight">Gear Marketplace</h1>
        <p className="text-muted-foreground">
          Find the best gear for your next ride, from bikes to leathers.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
        <aside className="md:col-span-1">
          <Card>
            <CardHeader>
              <CardTitle>Filters</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <h3 className="font-semibold mb-2">Sort by</h3>
                <Select defaultValue="popular">
                  <SelectTrigger>
                    <SelectValue placeholder="Sort by" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="popular">Popularity</SelectItem>
                    <SelectItem value="newest">Newest</SelectItem>
                    <SelectItem value="price-asc">Price: Low to High</SelectItem>
                    <SelectItem value="price-desc">Price: High to Low</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <h3 className="font-semibold mb-4">Category</h3>
                <div className="space-y-2">
                  {categories.map((category) => (
                    <div key={category} className="flex items-center space-x-2">
                      <Checkbox id={category} />
                      <Label htmlFor={category} className="font-normal">
                        {category}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

               <div>
                <Button className="w-full bg-accent text-accent-foreground hover:bg-accent/90">Apply Filters</Button>
              </div>
            </CardContent>
          </Card>
        </aside>

        <main className="md:col-span-3">
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
            {gear.map((item) => (
              <Card key={item.id} className="overflow-hidden group">
                <Link href={`/marketplace/${item.id}`} className="block">
                  {item.images[0].url && (
                    <Image
                      src={item.images[0].url}
                      alt={item.name}
                      width={500}
                      height={500}
                      className="w-full object-cover aspect-square group-hover:scale-105 transition-transform duration-300"
                      data-ai-hint={item.images[0].hint}
                    />
                  )}
                </Link>
                <CardHeader>
                  <CardTitle className="text-lg line-clamp-1">{item.name}</CardTitle>
                  <div className="flex items-center justify-between">
                    <p className="text-lg font-semibold text-primary">
                      ${item.price.toFixed(2)}
                    </p>
                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span>{item.rating}</span>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <Button asChild className="w-full">
                    <Link href={`/marketplace/${item.id}`}>View Details</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}