"use client"

import { useState } from "react"
import { Code, Check } from "lucide-react"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import { useTheme } from "next-themes"
import { Box } from "lucide-react"

export function MaterialSection() {
  const [hoveredMaterial, setHoveredMaterial] = useState<string | null>(null)
  const { materials, selectedMaterial, setSelectedMaterial, getThemeAwareClass, getThemeAwareCss } = useMaterial()
  const { theme } = useTheme()

  return (
    <section id="material" className="scroll-mt-16">
      <h2 className="text-4xl font-bold mb-8 text-foreground flex items-center gap-2">
        <Box className="h-7 w-7 text-primary" />
        Material
      </h2>
      <div className="mb-4">
        <p className="text-muted-foreground text-sm mb-2">Select a material to apply it to all cards</p>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
        {materials.map((material) => (
          <div
            key={material.name}
            className="flex flex-col items-center"
            onMouseEnter={() => setHoveredMaterial(material.name)}
            onMouseLeave={() => setHoveredMaterial(null)}
          >
            <div
              className={cn(
                "w-[80px] h-[80px] rounded-lg mb-3 relative overflow-hidden cursor-pointer",
                selectedMaterial?.name === material.name &&
                  "ring-2 ring-foreground ring-offset-2 ring-offset-background",
              )}
              style={{
                background: `linear-gradient(135deg, hsl(var(--pattern-light)) 25%, hsl(var(--pattern-dark)) 25%, hsl(var(--pattern-dark)) 50%, hsl(var(--pattern-light)) 50%, hsl(var(--pattern-light)) 75%, hsl(var(--pattern-dark)) 75%, hsl(var(--pattern-dark)) 100%)`,
                backgroundSize: "20px 20px",
              }}
              onClick={() => setSelectedMaterial(material)}
            >
              {/* Background with pattern */}
              <div className="absolute inset-0 flex items-center justify-center">
                {/* Card with material styling */}
                <div
                  className={`w-[50px] h-[50px] rounded-md ${getThemeAwareClass(material)} flex flex-col items-center justify-center shadow-md`}
                >
                  <div className="w-[30px] h-[4px] bg-foreground/40 rounded-full mb-1"></div>
                  <div className="w-[20px] h-[4px] bg-foreground/40 rounded-full"></div>
                </div>
              </div>

              {/* Selected indicator */}
              {selectedMaterial?.name === material.name && (
                <div className="absolute top-1 right-1 bg-foreground rounded-full p-0.5">
                  <Check className="h-3 w-3 text-background" />
                </div>
              )}

              {/* CSS code overlay on hover */}
              <div
                className={`absolute inset-0 bg-background/90 p-2 transition-opacity duration-300 flex items-center justify-center ${
                  hoveredMaterial === material.name && selectedMaterial?.name !== material.name
                    ? "opacity-100"
                    : "opacity-0"
                }`}
              >
                <div className="absolute top-1 right-1">
                  <Code className="h-3 w-3 text-foreground/50" />
                </div>
                <pre className="text-[6px] text-foreground/90 font-mono overflow-hidden">
                  <code>{getThemeAwareCss(material)}</code>
                </pre>
              </div>
            </div>
            <p
              className={cn(
                "text-foreground text-sm font-medium",
                selectedMaterial?.name === material.name && "text-foreground font-bold",
              )}
            >
              {material.name}
            </p>
          </div>
        ))}
      </div>
    </section>
  )
}