Holographic Card

import { useState } from "react"
import { HolographicCard, HolographicItem, type HolographicTheme } from "@/components/ui/holographic-card"
import { Sparkles, Palette, Wifi, Shield } from "lucide-react"

function hexToRgba(hex: string, alpha: number) {
  const clean = hex.replace("#", "")
  const r = parseInt(clean.substring(0, 2), 16) || 0
  const g = parseInt(clean.substring(2, 4), 16) || 0
  const b = parseInt(clean.substring(4, 6), 16) || 0
  return `rgba(${r}, ${g}, ${b}, ${alpha})`
}

export default function HolographicCardDemo() {
  const [theme, setTheme] = useState<HolographicTheme>("obsidian")
  const [maxTilt, setMaxTilt] = useState(14)
  const [glareOpacity, setGlareOpacity] = useState(0.45)
  const [showFoil, setShowFoil] = useState(true)

  // Custom Color Customization Mode
  const [useCustomColors, setUseCustomColors] = useState(false)
  const [customFoilColor1, setCustomFoilColor1] = useState("#8b5cf6")
  const [customFoilColor2, setCustomFoilColor2] = useState("#ec4899")
  const [customFoilColor3, setCustomFoilColor3] = useState("#06b6d4")

  // Convert hex values to translucent RGBA with identical soft alpha ratios as the luxury presets
  const customFoilArray = useCustomColors
    ? [
        "rgba(255, 255, 255, 0.75)",
        hexToRgba(customFoilColor1, 0.42),
        hexToRgba(customFoilColor2, 0.3),
        hexToRgba(customFoilColor3, 0.18),
        "transparent",
      ]
    : undefined

  const customBorderGlow = useCustomColors
    ? hexToRgba(customFoilColor1, 0.5)
    : undefined

  // Theme accents for typography and chips
  const themeAccents = {
    obsidian: {
      name: "Titanium Black",
      chipBg: "from-neutral-300 via-neutral-100 to-neutral-400",
      chipBorder: "border-neutral-400/40",
      holoSeal: "from-white/30 via-cyan-400/20 to-purple-400/20",
      pill: "bg-white/10 text-white border-white/20",
    },
    aurora: {
      name: "Cosmic Aurora",
      chipBg: "from-amber-200 via-yellow-100 to-amber-300",
      chipBorder: "border-amber-400/40",
      holoSeal: "from-indigo-400/40 via-violet-400/30 to-pink-400/30",
      pill: "bg-indigo-500/20 text-indigo-200 border-indigo-500/30",
    },
    emerald: {
      name: "Cyber Emerald",
      chipBg: "from-emerald-200 via-emerald-100 to-teal-300",
      chipBorder: "border-emerald-400/40",
      holoSeal: "from-emerald-400/40 via-teal-400/30 to-cyan-400/30",
      pill: "bg-emerald-500/20 text-emerald-200 border-emerald-500/30",
    },
    gold: {
      name: "Midnight Gold",
      chipBg: "from-amber-300 via-yellow-200 to-amber-400",
      chipBorder: "border-amber-400/50",
      holoSeal: "from-amber-400/40 via-yellow-300/30 to-orange-400/30",
      pill: "bg-amber-500/20 text-amber-200 border-amber-500/30",
    },
  }[theme]

  return (
    <div className="flex flex-col items-center gap-6 w-full max-w-lg">
      {/* Palette Selector */}
      <div className="flex flex-wrap items-center justify-center gap-1.5 p-1 rounded-xl bg-neutral-900/60 border border-white/10 backdrop-blur-md text-xs">
        {(["obsidian", "aurora", "emerald", "gold"] as HolographicTheme[]).map((t) => (
          <button
            key={t}
            onClick={() => {
              setTheme(t)
              setUseCustomColors(false)
            }}
            className={`px-3 py-1.5 rounded-lg font-medium transition-all ${
              theme === t && !useCustomColors
                ? "bg-white/20 text-white font-semibold shadow-sm"
                : "text-neutral-400 hover:text-neutral-200"
            }`}
          >
            {t === "obsidian" ? "Titanium Black" : t === "aurora" ? "Aurora" : t === "emerald" ? "Emerald" : "Gold"}
          </button>
        ))}

        <button
          onClick={() => setUseCustomColors(!useCustomColors)}
          className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg font-medium transition-all ${
            useCustomColors
              ? "bg-indigo-600 text-white font-semibold shadow-sm"
              : "text-neutral-400 hover:text-neutral-200"
          }`}
        >
          <Palette className="w-3.5 h-3.5" />
          <span>Personalizado</span>
        </button>
      </div>

      {/* ========================================================= */}
      {/* THE LUXURY BLACK METAL CREDIT CARD ARCHETYPE */}
      {/* ========================================================= */}
      <HolographicCard
        theme={theme}
        foilColors={customFoilArray}
        borderGlowColor={customBorderGlow}
        maxTiltAngle={maxTilt}
        glareOpacity={glareOpacity}
        showRainbowFoil={showFoil}
        borderRadius="1.35rem"
        className="p-8 w-full aspect-[1.586/1] min-h-[300px] flex flex-col justify-between relative overflow-hidden shadow-2xl"
      >
        {/* Subtle Brushed Metal Surface Texture */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 opacity-15 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:16px_16px]"
        />

        {/* Top Row: Issuer Logo & Contactless Waves */}
        <HolographicItem depth={35} className="flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-7 h-7 rounded-lg bg-gradient-to-tr from-white/20 to-white/5 border border-white/20 flex items-center justify-center shadow-inner">
              <Shield className="w-4 h-4 text-white" />
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-bold tracking-wider text-white font-mono leading-none">
                NEXUS VAULT
              </span>
              <span className="text-[9px] text-neutral-400 font-mono tracking-widest uppercase">
                World Elite Metal
              </span>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <Wifi className="w-5 h-5 text-neutral-400 rotate-90" />
            <span
              className={`text-[10px] font-bold px-2.5 py-0.5 rounded-full border ${
                useCustomColors ? "bg-white/10 text-white border-white/20" : themeAccents.pill
              }`}
            >
              {useCustomColors ? "CUSTOM PRISM" : themeAccents.name.toUpperCase()}
            </span>
          </div>
        </HolographicItem>

        {/* Middle Row: EMV Microchip with metallic texture + Available Credit */}
        <HolographicItem depth={60} className="py-2 flex items-center justify-between">
          {/* Realistic EMV Smart Chip */}
          <div className={`w-12 h-9 rounded-md bg-gradient-to-br ${themeAccents.chipBg} border ${themeAccents.chipBorder} p-1 relative shadow-md overflow-hidden`}>
            <div className="w-full h-full border border-black/20 rounded-[3px] grid grid-cols-2 gap-1 relative">
              <div className="border-r border-black/20" />
              <div className="border-l border-black/20" />
              <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px bg-black/25" />
            </div>
          </div>

          {/* Floating Balance Badge in 3D Parallax */}
          <div className="flex flex-col items-end">
            <span className="text-[10px] text-neutral-400 font-mono">Available Credit</span>
            <span className="text-xl font-bold font-mono tracking-tight text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.8)]">
              $128,450.00
            </span>
          </div>
        </HolographicItem>

        {/* Card Number */}
        <HolographicItem depth={50}>
          <p className="font-mono text-xl sm:text-2xl tracking-[0.22em] text-neutral-100 font-semibold drop-shadow-[0_2px_6px_rgba(0,0,0,0.9)]">
            4582 •••• •••• 8931
          </p>
        </HolographicItem>

        {/* Bottom Row: Holder Name, Expiry & Holographic Security Seal */}
        <HolographicItem depth={45} className="flex items-end justify-between pt-1">
          <div className="space-y-0.5">
            <div className="flex items-center gap-3 text-[10px] text-neutral-400 font-mono uppercase tracking-wider">
              <span>CARDHOLDER</span>
              <span>VALID THRU 09/29</span>
            </div>
            <p className="font-mono text-sm font-bold tracking-widest text-neutral-200">
              PAULO RIVEROS
            </p>
          </div>

          {/* Optical Holographic Security Seal (Refracts light as card tilts) */}
          <div className="relative flex items-center justify-center">
            <div
              className={`w-10 h-10 rounded-full bg-gradient-to-tr ${
                useCustomColors
                  ? "from-white/30 via-indigo-400/20 to-pink-400/20"
                  : themeAccents.holoSeal
              } border border-white/25 flex items-center justify-center backdrop-blur-md shadow-lg shadow-black/40`}
            >
              <Sparkles className="w-5 h-5 text-white/80 animate-pulse" />
            </div>
          </div>
        </HolographicItem>
      </HolographicCard>

      {/* Controls Drawer */}
      <div className="w-full bg-neutral-900/60 backdrop-blur-md rounded-2xl p-4 border border-white/10 space-y-3 text-xs">
        {/* Soft Translucent Color Pickers */}
        {useCustomColors && (
          <div className="space-y-2 border-b border-white/10 pb-3">
            <span className="text-white font-semibold flex items-center gap-1.5">
              <Palette className="w-3.5 h-3.5 text-indigo-400" />
              Tonos del reflejo translúcido (Foil):
            </span>
            <div className="flex items-center gap-4">
              <label className="flex items-center gap-1.5 text-neutral-300 cursor-pointer">
                <span>Tono 1:</span>
                <input
                  type="color"
                  value={customFoilColor1}
                  onChange={(e) => setCustomFoilColor1(e.target.value)}
                  className="w-6 h-6 rounded cursor-pointer border-0 bg-transparent"
                />
              </label>
              <label className="flex items-center gap-1.5 text-neutral-300 cursor-pointer">
                <span>Tono 2:</span>
                <input
                  type="color"
                  value={customFoilColor2}
                  onChange={(e) => setCustomFoilColor2(e.target.value)}
                  className="w-6 h-6 rounded cursor-pointer border-0 bg-transparent"
                />
              </label>
              <label className="flex items-center gap-1.5 text-neutral-300 cursor-pointer">
                <span>Tono 3:</span>
                <input
                  type="color"
                  value={customFoilColor3}
                  onChange={(e) => setCustomFoilColor3(e.target.value)}
                  className="w-6 h-6 rounded cursor-pointer border-0 bg-transparent"
                />
              </label>
            </div>
          </div>
        )}

        <div className="flex items-center justify-between">
          <span className="text-neutral-400 font-medium">Inclinación 3D: {maxTilt}°</span>
          <input
            type="range"
            min={6}
            max={24}
            value={maxTilt}
            onChange={(e) => setMaxTilt(Number(e.target.value))}
            className="w-28 accent-indigo-500 cursor-pointer"
          />
        </div>

        <div className="flex items-center justify-between">
          <span className="text-neutral-400 font-medium">Intensidad Reflejo: {glareOpacity}</span>
          <input
            type="range"
            min={0.1}
            max={0.8}
            step={0.05}
            value={glareOpacity}
            onChange={(e) => setGlareOpacity(Number(e.target.value))}
            className="w-28 accent-indigo-500 cursor-pointer"
          />
        </div>

        <div className="flex items-center justify-between pt-1">
          <span className="text-neutral-400 font-medium">Capa Iridiscente (Foil):</span>
          <button
            onClick={() => setShowFoil(!showFoil)}
            className={`px-2.5 py-1 rounded text-[11px] font-semibold transition-colors ${
              showFoil ? "bg-white/20 text-white border border-white/20" : "bg-neutral-800 text-neutral-400"
            }`}
          >
            {showFoil ? "Activada" : "Desactivada"}
          </button>
        </div>
      </div>
    </div>
  )
}

export { HolographicCardDemo }