"use client";
import { cn } from "../shared/utils";
import React, { useState } from "react";
import { AuroraBackground } from "./AuroraBackground";
import { MovingBackground } from "./MovingBackground";
import { BackgroundGradientAnimation } from "./BackgroundGradientAnimation";

interface BackgroundShowcaseProps {
  className?: string;
}

export const BackgroundShowcase = ({ className }: BackgroundShowcaseProps) => {
  const [activeBackground, setActiveBackground] = useState<'aurora' | 'moving' | 'gradient'>('aurora');

  const backgrounds = {
    aurora: {
      name: "Aurora Background",
      description: "Beautiful animated aurora effect with radial masking",
      component: (
        <AuroraBackground showRadialGradient={true}>
          <div className="text-center z-10">
            <h1 className="text-6xl font-bold text-white mb-4">
              Aurora Magic
            </h1>
            <p className="text-xl text-white/80 max-w-md mx-auto">
              Experience the stunning aurora background with smooth animations and beautiful gradients
            </p>
          </div>
        </AuroraBackground>
      )
    },
    moving: {
      name: "Moving Background",
      description: "Interactive moving elements with custom animations",
      component: (
        <MovingBackground showAllAnimations={true}>
          <div className="text-center z-10">
            <h1 className="text-6xl font-bold text-foreground mb-4">
              Moving Elements
            </h1>
            <p className="text-xl text-foreground/80 max-w-md mx-auto">
              Watch as elements move in circles, vertically, and horizontally with smooth animations
            </p>
          </div>
        </MovingBackground>
      )
    },
    gradient: {
      name: "Gradient Animation",
      description: "Interactive gradient background with mouse tracking",
      component: (
        <BackgroundGradientAnimation
          gradientBackgroundStart="rgb(108, 0, 162)"
          gradientBackgroundEnd="rgb(0, 17, 82)"
          firstColor="18, 113, 255"
          secondColor="221, 74, 255"
          thirdColor="100, 220, 255"
          fourthColor="200, 50, 50"
          fifthColor="180, 180, 50"
          pointerColor="140, 100, 255"
          size="80%"
          blendingValue="hard-light"
          interactive={true}
        >
          <div className="text-center z-10">
            <h1 className="text-6xl font-bold text-white mb-4">
              Gradient Magic
            </h1>
            <p className="text-xl text-white/80 max-w-md mx-auto">
              Move your mouse to interact with the animated gradient background
            </p>
          </div>
        </BackgroundGradientAnimation>
      )
    }
  };

  return (
    <div className={cn("min-h-screen bg-background", className)}>
      {/* Navigation */}
      <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50">
        <div className="flex space-x-2 bg-background/80 backdrop-blur-md rounded-lg p-2 border border-border">
          {Object.entries(backgrounds).map(([key, bg]) => (
            <button
              key={key}
              onClick={() => setActiveBackground(key as keyof typeof backgrounds)}
              className={cn(
                "px-4 py-2 rounded-md text-sm font-medium transition-all duration-200",
                activeBackground === key
                  ? "bg-primary text-primary-foreground shadow-lg"
                  : "bg-muted text-muted-foreground hover:bg-muted/80"
              )}
            >
              {bg.name}
            </button>
          ))}
        </div>
      </div>

      {/* Active Background */}
      <div className="relative">
        {backgrounds[activeBackground].component}
      </div>

      {/* Info Panel */}
      <div className="fixed bottom-4 left-4 z-50 max-w-sm">
        <div className="bg-background/90 backdrop-blur-md rounded-lg p-4 border border-border shadow-lg">
          <h3 className="text-lg font-semibold text-foreground mb-2">
            {backgrounds[activeBackground].name}
          </h3>
          <p className="text-sm text-muted-foreground mb-3">
            {backgrounds[activeBackground].description}
          </p>
          
          <div className="space-y-2 text-xs text-muted-foreground">
            <div className="flex justify-between">
              <span>Animation:</span>
              <span className="font-mono">
                {activeBackground === 'aurora' && 'animate-aurora'}
                {activeBackground === 'moving' && 'animate-first, animate-second, etc.'}
                {activeBackground === 'gradient' && 'Custom keyframes'}
              </span>
            </div>
            <div className="flex justify-between">
              <span>Interactive:</span>
              <span>{activeBackground === 'gradient' ? 'Yes' : 'No'}</span>
            </div>
            <div className="flex justify-between">
              <span>Performance:</span>
              <span>Optimized</span>
            </div>
          </div>
        </div>
      </div>

      {/* Usage Instructions */}
      <div className="fixed top-4 right-4 z-50 max-w-xs">
        <div className="bg-background/90 backdrop-blur-md rounded-lg p-4 border border-border shadow-lg">
          <h4 className="text-sm font-semibold text-foreground mb-2">
            Usage Instructions
          </h4>
          <ul className="text-xs text-muted-foreground space-y-1">
            <li>• Click buttons to switch backgrounds</li>
            <li>• Move mouse over gradient for interaction</li>
            <li>• All backgrounds are fully responsive</li>
            <li>• Customizable via props</li>
          </ul>
        </div>
      </div>
    </div>
  );
};