BackgroundImageTexture

"use client"

import { useState } from "react"
import { Download } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { BackgroundImageTexture } from "@/components/ui/bg-image-texture"
import type { TextureVariant } from "@/components/ui/bg-image-texture"

const textureVariants: TextureVariant[] = [
  "fabric-of-squares",
  "grid-noise",
  "inflicted",
  "debut-light",
  "groovepaper",
  "none",
]

const textureMap: Record<Exclude<TextureVariant, "none">, string> = {
  "fabric-of-squares": "/textures/fabric-of-squares.png",
  "grid-noise": "/textures/grid-noise.png",
  inflicted: "/textures/inflicted.png",
  "debut-light": "/textures/debut-light.png",
  groovepaper: "/textures/groovepaper.png",
}

async function downloadTexture(variant: Exclude<TextureVariant, "none">) {
  const url = textureMap[variant]
  try {
    const response = await fetch(url)
    const blob = await response.blob()
    const blobUrl = window.URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.href = blobUrl
    link.download = `${variant}.png`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(blobUrl)
  } catch {
    // Fallback to direct link if fetch fails
    const link = document.createElement("a")
    link.href = url
    link.download = `${variant}.png`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

export function BackgroundImageTextureDemo() {
  const [selectedVariant, setSelectedVariant] =
    useState<TextureVariant>("fabric-of-squares")
  const [opacity, setOpacity] = useState([0.5])

  return (
    <div className="space-y-8 p-6">
      {/* Controls */}
      <Card>
        <CardHeader>
          <CardTitle>Texture Controls</CardTitle>
          <CardDescription>
            Select a texture variant and adjust the opacity
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label>Texture Variant</Label>
            <div className="flex flex-wrap gap-2">
              {textureVariants.map((variant) => (
                <Button
                  key={variant}
                  variant={selectedVariant === variant ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedVariant(variant)}
                >
                  {variant === "none" ? "None" : variant}
                </Button>
              ))}
            </div>
          </div>
          <div className="space-y-2">
            <Label>Opacity: {opacity[0].toFixed(2)}</Label>
            <Slider
              value={opacity}
              onValueChange={setOpacity}
              min={0}
              max={1}
              step={0.01}
              className="w-full"
            />
          </div>
        </CardContent>
      </Card>

      {/* Preview with Content */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Preview with Content</CardTitle>
              <CardDescription>
                See how the texture looks with content on top
              </CardDescription>
            </div>
            {selectedVariant !== "none" && (
              <Button
                variant="outline"
                size="sm"
                onClick={() => downloadTexture(selectedVariant)}
                className="gap-2"
              >
                <Download className="h-4 w-4" />
                Download Texture
              </Button>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <BackgroundImageTexture
            variant={selectedVariant}
            opacity={opacity[0]}
            className="rounded-lg border border-border p-8 min-h-[400px]"
          >
            <div className="space-y-6">
              <div>
                <h3 className="text-3xl font-bold text-foreground mb-2">
                  Texture Background
                </h3>
                <p className="text-muted-foreground text-lg">
                  This content sits on top of the texture layer. Adjust the
                  opacity slider to see how the texture affects the background.
                  The texture is fully interactive and customizable.
                </p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="p-4 rounded-lg bg-card/50 border border-border">
                  <h4 className="font-semibold mb-2">Feature 1</h4>
                  <p className="text-sm text-muted-foreground">
                    Content with texture background
                  </p>
                </div>
                <div className="p-4 rounded-lg bg-card/50 border border-border">
                  <h4 className="font-semibold mb-2">Feature 2</h4>
                  <p className="text-sm text-muted-foreground">
                    More content examples
                  </p>
                </div>
              </div>
            </div>
          </BackgroundImageTexture>
        </CardContent>
      </Card>

      {/* All Variants Showcase */}
      <div className="space-y-4">
        <h3 className="text-2xl font-semibold">All Texture Variants</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {textureVariants
            .filter((v) => v !== "none")
            .map((variant) => (
              <Card key={variant}>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg capitalize">
                      {variant.replace(/-/g, " ")}
                    </CardTitle>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => downloadTexture(variant)}
                      className="h-8 w-8 p-0"
                      title={`Download ${variant}.png`}
                    >
                      <Download className="h-4 w-4" />
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <BackgroundImageTexture
                    variant={variant}
                    opacity={0.5}
                    className="rounded-lg border border-border p-6 h-48 flex items-center justify-center"
                  >
                    <div className="text-center">
                      <p className="text-sm font-medium text-foreground">
                        {variant}
                      </p>
                      <p className="text-xs text-muted-foreground mt-1">
                        Opacity: 0.5
                      </p>
                    </div>
                  </BackgroundImageTexture>
                </CardContent>
              </Card>
            ))}
        </div>
      </div>

      {/* Opacity Variations */}
      <div className="space-y-4">
        <h3 className="text-2xl font-semibold">Opacity Variations</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[0.2, 0.5, 0.8].map((opacityValue) => (
            <Card key={opacityValue}>
              <CardHeader>
                <CardTitle className="text-lg">
                  Opacity: {opacityValue}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <BackgroundImageTexture
                  variant="grid-noise"
                  opacity={opacityValue}
                  className="rounded-lg border border-border p-6 h-48 flex items-center justify-center"
                >
                  <div className="text-center">
                    <p className="text-sm font-medium text-foreground">
                      grid-noise texture
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">
                      Opacity: {opacityValue}
                    </p>
                  </div>
                </BackgroundImageTexture>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Use Case Examples */}
      <div className="space-y-4">
        <h3 className="text-2xl font-semibold">Use Case Examples</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {/* Card with Texture */}
          <Card>
            <CardHeader>
              <CardTitle>Card with Texture</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <BackgroundImageTexture
                variant="debut-light"
                opacity={0.3}
                className="rounded-b-lg p-6"
              >
                <div className="space-y-2">
                  <h4 className="font-semibold">Beautiful Card</h4>
                  <p className="text-sm text-muted-foreground">
                    Cards look great with subtle texture backgrounds
                  </p>
                </div>
              </BackgroundImageTexture>
            </CardContent>
          </Card>

          {/* Hero Section */}
          <Card>
            <CardHeader>
              <CardTitle>Hero Section</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <BackgroundImageTexture
                variant="groovepaper"
                opacity={0.4}
                className="rounded-b-lg p-6 min-h-[200px] flex items-center justify-center"
              >
                <div className="text-center space-y-2">
                  <h4 className="text-2xl font-bold">Hero Title</h4>
                  <p className="text-sm text-muted-foreground">
                    Perfect for hero sections and banners
                  </p>
                </div>
              </BackgroundImageTexture>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}