"use client"

import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Slider } from "@/components/ui/slider"
import { Checkbox } from "@/components/ui/checkbox"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import { Search, ShoppingCart, Heart, User, Menu, Filter, Star, StarHalf, ChevronDown } from "lucide-react"

export function EcommerceExample() {
  const { selectedMaterial, getThemeAwareClass } = useMaterial()
  const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""

  const products = [
    {
      name: "Modern Desk Lamp",
      price: "$89.99",
      rating: 4.5,
      image: "/modern-desk-lamp.png",
      sale: false,
    },
    {
      name: "Ergonomic Office Chair",
      price: "$299.99",
      originalPrice: "$399.99",
      rating: 5,
      image: "/ergonomic-office-chair.png",
      sale: true,
    },
    {
      name: "Minimalist Bookshelf",
      price: "$149.99",
      rating: 4,
      image: "/placeholder.svg?key=4ove3",
      sale: false,
    },
    {
      name: "Smart Home Speaker",
      price: "$129.99",
      originalPrice: "$179.99",
      rating: 4.5,
      image: "/smart-home-speaker.png",
      sale: true,
    },
  ]

  return (
    <div className="w-full h-full bg-background-secondary overflow-auto flex flex-col">
      {/* Header */}
      <div className={cn("flex justify-between items-center p-4 border-b", materialClass)}>
        <div className="flex items-center gap-2">
          <ShoppingCart className="h-5 w-5 text-primary" />
          <h1 className="text-lg font-semibold">ShopEase</h1>
        </div>
        <div className="flex items-center gap-3">
          <div className="relative hidden md:flex items-center">
            <Search className="h-4 w-4 absolute left-2.5 text-muted-foreground" />
            <Input placeholder="Search products..." className="pl-8 w-[200px] h-9" />
          </div>
          <Button variant="ghost" size="icon">
            <Heart className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon">
            <ShoppingCart className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon">
            <User className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon" className="md:hidden">
            <Menu className="h-5 w-5" />
          </Button>
        </div>
      </div>

      <div className="flex flex-col md:flex-row h-[calc(100%-64px)]">
        {/* Sidebar Filters */}
        <div className={cn("w-full md:w-64 p-4 border-r hidden md:block", materialClass)}>
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-medium">Filters</h2>
            <Button variant="ghost" size="sm" className="h-8 text-xs">
              Clear All
            </Button>
          </div>

          <div className="space-y-6">
            {/* Price Range */}
            <div>
              <h3 className="text-sm font-medium mb-3">Price Range</h3>
              <Slider defaultValue={[0, 75]} max={100} step={1} className="mb-2" />
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>$0</span>
                <span>$1000</span>
              </div>
            </div>

            {/* Categories */}
            <div>
              <h3 className="text-sm font-medium mb-3">Categories</h3>
              <div className="space-y-2">
                {["Furniture", "Lighting", "Decor", "Kitchen", "Electronics"].map((category) => (
                  <div key={category} className="flex items-center space-x-2">
                    <Checkbox id={`category-${category}`} />
                    <label htmlFor={`category-${category}`} className="text-sm">
                      {category}
                    </label>
                  </div>
                ))}
              </div>
            </div>

            {/* Ratings */}
            <div>
              <h3 className="text-sm font-medium mb-3">Ratings</h3>
              <div className="space-y-2">
                {[5, 4, 3, 2, 1].map((rating) => (
                  <div key={rating} className="flex items-center space-x-2">
                    <Checkbox id={`rating-${rating}`} />
                    <label htmlFor={`rating-${rating}`} className="text-sm flex items-center">
                      {Array.from({ length: rating }).map((_, i) => (
                        <Star key={i} className="h-3 w-3 fill-primary text-primary" />
                      ))}
                      {Array.from({ length: 5 - rating }).map((_, i) => (
                        <Star key={i} className="h-3 w-3 text-muted-foreground" />
                      ))}
                      <span className="ml-1">& Up</span>
                    </label>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Product Grid */}
        <div className="flex-1 p-4 overflow-auto">
          <div className="flex items-center justify-between mb-4">
            <h2 className="font-medium">Featured Products</h2>
            <div className="flex items-center gap-4">
              <Button variant="outline" size="sm" className="h-8 md:hidden">
                <Filter className="h-3.5 w-3.5 mr-1" />
                Filters
              </Button>
              <Button variant="outline" size="sm" className="h-8">
                Sort by
                <ChevronDown className="h-3.5 w-3.5 ml-1" />
              </Button>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-4 h-full overflow-auto">
            {products.map((product, i) => (
              <Card key={i} className={cn(materialClass)}>
                <CardContent className="p-4">
                  <div className="aspect-square relative mb-3 bg-muted/30 rounded-md flex items-center justify-center">
                    <img
                      src={product.image || "/placeholder.svg"}
                      alt={product.name}
                      className="object-cover h-full w-full rounded-md"
                    />
                    {product.sale && <Badge className="absolute top-2 left-2 bg-red-500">Sale</Badge>}
                    <Button
                      variant="ghost"
                      size="icon"
                      className="absolute top-2 right-2 h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm"
                    >
                      <Heart className="h-4 w-4" />
                    </Button>
                  </div>
                  <h3 className="font-medium mb-1">{product.name}</h3>
                  <div className="flex items-center mb-2">
                    {Array.from({ length: Math.floor(product.rating) }).map((_, i) => (
                      <Star key={i} className="h-3 w-3 fill-primary text-primary" />
                    ))}
                    {product.rating % 1 !== 0 && <StarHalf className="h-3 w-3 fill-primary text-primary" />}
                    <span className="text-xs text-muted-foreground ml-1">({Math.floor(Math.random() * 100) + 10})</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="font-medium">{product.price}</span>
                    {product.originalPrice && (
                      <span className="text-sm text-muted-foreground line-through">{product.originalPrice}</span>
                    )}
                  </div>
                </CardContent>
                <CardFooter className="p-4 pt-0">
                  <Button className="w-full">Add to Cart</Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}