"use client";

import React from "react";
import { motion } from "framer-motion";
import { DesignAnimation } from "../types/table";
import { Particles, type ParticleConfig } from "@/components/ui/particles";

interface AnimationProps {
  primaryColor: string;
  secondaryColor: string;
  intensity: number; // 5-50, represents opacity percentage (20 = 0.2 opacity)
}

// Tailwind color palette with all shades
const tailwindColors: Record<string, Record<string, string>> = {
  slate: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617" },
  gray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5db", 400: "#9ca3af", 500: "#6b7280", 600: "#4b5563", 700: "#374151", 800: "#1f2937", 900: "#111827", 950: "#030712" },
  zinc: { 50: "#fafafa", 100: "#f4f4f5", 200: "#e4e4e7", 300: "#d4d4d8", 400: "#a1a1aa", 500: "#71717a", 600: "#52525b", 700: "#3f3f46", 800: "#27272a", 900: "#18181b", 950: "#09090b" },
  neutral: { 50: "#fafafa", 100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a3a3a3", 500: "#737373", 600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717", 950: "#0a0a0a" },
  stone: { 50: "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c", 600: "#57534e", 700: "#44403c", 800: "#292524", 900: "#1c1917", 950: "#0c0a09" },
  red: { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d", 950: "#450a0a" },
  orange: { 50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74", 400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c", 800: "#9a3412", 900: "#7c2d12", 950: "#431407" },
  amber: { 50: "#fffbeb", 100: "#fef3c7", 200: "#fde68a", 300: "#fcd34d", 400: "#fbbf24", 500: "#f59e0b", 600: "#d97706", 700: "#b45309", 800: "#92400e", 900: "#78350f", 950: "#451a03" },
  yellow: { 50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 300: "#fde047", 400: "#facc15", 500: "#eab308", 600: "#ca8a04", 700: "#a16207", 800: "#854d0e", 900: "#713f12", 950: "#422006" },
  lime: { 50: "#f7fee7", 100: "#ecfccb", 200: "#d9f99d", 300: "#bef264", 400: "#a3e635", 500: "#84cc16", 600: "#65a30d", 700: "#4d7c0f", 800: "#3f6212", 900: "#365314", 950: "#1a2e05" },
  green: { 50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac", 400: "#4ade80", 500: "#22c55e", 600: "#16a34a", 700: "#15803d", 800: "#166534", 900: "#14532d", 950: "#052e16" },
  emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", 950: "#022c22" },
  teal: { 50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4", 400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e", 800: "#115e59", 900: "#134e4a", 950: "#042f2e" },
  cyan: { 50: "#ecfeff", 100: "#cffafe", 200: "#a5f3fc", 300: "#67e8f9", 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2", 700: "#0e7490", 800: "#155e75", 900: "#164e63", 950: "#083344" },
  sky: { 50: "#f0f9ff", 100: "#e0f2fe", 200: "#bae6fd", 300: "#7dd3fc", 400: "#38bdf8", 500: "#0ea5e9", 600: "#0284c7", 700: "#0369a1", 800: "#075985", 900: "#0c4a6e", 950: "#082f49" },
  blue: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a", 950: "#172554" },
  indigo: { 50: "#eef2ff", 100: "#e0e7ff", 200: "#c7d2fe", 300: "#a5b4fc", 400: "#818cf8", 500: "#6366f1", 600: "#4f46e5", 700: "#4338ca", 800: "#3730a3", 900: "#312e81", 950: "#1e1b4b" },
  violet: { 50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd", 400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9", 800: "#5b21b6", 900: "#4c1d95", 950: "#2e1065" },
  purple: { 50: "#faf5ff", 100: "#f3e8ff", 200: "#e9d5ff", 300: "#d8b4fe", 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", 800: "#6b21a8", 900: "#581c87", 950: "#3b0764" },
  fuchsia: { 50: "#fdf4ff", 100: "#fae8ff", 200: "#f5d0fe", 300: "#f0abfc", 400: "#e879f9", 500: "#d946ef", 600: "#c026d3", 700: "#a21caf", 800: "#86198f", 900: "#701a75", 950: "#4a044e" },
  pink: { 50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4", 400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d", 800: "#9d174d", 900: "#831843", 950: "#500724" },
  rose: { 50: "#fff1f2", 100: "#ffe4e6", 200: "#fecdd3", 300: "#fda4af", 400: "#fb7185", 500: "#f43f5e", 600: "#e11d48", 700: "#be123c", 800: "#9f1239", 900: "#881337", 950: "#4c0519" },
};

// Default shades for base color names (500 shade)
const defaultColorMap: Record<string, string> = {
  emerald: "#10b981",
  cyan: "#06b6d4",
  purple: "#a855f7",
  blue: "#3b82f6",
  pink: "#ec4899",
  amber: "#f59e0b",
  red: "#ef4444",
  green: "#22c55e",
  indigo: "#6366f1",
  violet: "#8b5cf6",
  teal: "#14b8a6",
  orange: "#f97316",
  rose: "#f43f5e",
  fuchsia: "#d946ef",
  lime: "#84cc16",
  sky: "#0ea5e9",
  yellow: "#eab308",
  slate: "#64748b",
  gray: "#6b7280",
  zinc: "#71717a",
  neutral: "#737373",
  stone: "#78716c",
  primary: "hsl(var(--primary))",
};

const getColor = (color: string) => {
  // If it's already a hex color, rgb, or hsl value, return as-is
  if (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl")) {
    return color;
  }

  // Check if it's a color with a shade number (e.g., "emerald-600", "blue-400")
  const colorWithShadeMatch = color.match(/^([a-z]+)-(\d+)$/);
  if (colorWithShadeMatch) {
    const [, colorName, shade] = colorWithShadeMatch;
    if (tailwindColors[colorName] && tailwindColors[colorName][shade]) {
      return tailwindColors[colorName][shade];
    }
  }

  // Otherwise look it up in the default color map (base color names)
  return defaultColorMap[color] || defaultColorMap.primary;
};

// Convert intensity (5-50) to opacity (0.05-0.5)
const getOpacity = (intensity: number) => {
  return Math.min(Math.max(intensity, 5), 50) / 100;
};

// 1. Orbs Animation - Default floating gradient orbs with interactive particles
export function OrbsAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const secondary = getColor(secondaryColor);
  const opacity = getOpacity(intensity);

  const particleConfig: ParticleConfig = {
    count: 35,
    primaryColor,
    secondaryColor,
    size: { min: 2, max: 6 },
    opacity: { min: opacity * 2, max: opacity * 4 },
    glow: true,
    interactive: true,
    interactionRadius: 120,
    repelStrength: 0.8,
    rising: true,
    speed: 0.6,
  };

  return (
    <>
      {/* Background orbs */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: opacity, scale: 1 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="absolute -top-40 -right-40 w-80 h-80 rounded-full blur-3xl"
        style={{ backgroundColor: primary }}
      />
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: opacity, scale: 1 }}
        transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
        className="absolute -bottom-20 -left-20 w-60 h-60 rounded-full blur-3xl"
        style={{ backgroundColor: secondary }}
      />
      {/* Interactive rising particles */}
      <Particles config={particleConfig} />
    </>
  );
}

// 2. Waves Animation - Animated wave patterns
export function WavesAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const secondary = getColor(secondaryColor);
  const opacity = getOpacity(intensity);

  return (
    <>
      {[...Array(3)].map((_, i) => (
        <motion.div
          key={i}
          className="absolute inset-x-0 h-32"
          style={{
            top: `${30 + i * 20}%`,
            borderRadius: "50%",
            transform: "scaleX(1.5)",
            backgroundColor: i % 2 === 0 ? primary : secondary,
            opacity: opacity * 0.5,
          }}
          animate={{
            y: [0, -15, 0],
            scaleX: [1.5, 1.6, 1.5],
          }}
          transition={{
            duration: 4 + i,
            repeat: Infinity,
            ease: "easeInOut",
            delay: i * 0.5,
          }}
        />
      ))}
    </>
  );
}

// 3. Particles Animation - Interactive rising particles
export function ParticlesAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const opacity = getOpacity(intensity);

  const particleConfig: ParticleConfig = {
    count: 45,
    primaryColor,
    secondaryColor,
    size: { min: 2, max: 7 },
    opacity: { min: opacity * 2, max: opacity * 5 },
    glow: true,
    interactive: true,
    interactionRadius: 150,
    repelStrength: 1.2,
    rising: true,
    speed: 0.8,
  };

  return <Particles config={particleConfig} />;
}

// 4. Aurora Animation - Northern lights with particles
export function AuroraAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const secondary = getColor(secondaryColor);
  const opacity = getOpacity(intensity);

  const particleConfig: ParticleConfig = {
    count: 50,
    primaryColor,
    secondaryColor,
    size: { min: 1, max: 4 },
    opacity: { min: opacity * 1.5, max: opacity * 3 },
    glow: true,
    interactive: true,
    rising: true,
    speed: 0.5,
  };

  return (
    <>
      {/* Aurora gradient layers */}
      <motion.div
        className="absolute -top-1/2 left-0 right-0 h-full blur-3xl"
        style={{
          borderRadius: "50%",
          backgroundColor: primary,
          opacity: opacity * 0.5,
        }}
        animate={{
          x: [-100, 100, -100],
          scale: [1, 1.2, 1],
        }}
        transition={{
          duration: 8,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />
      <motion.div
        className="absolute -top-1/2 left-1/4 right-0 h-full blur-3xl"
        style={{
          borderRadius: "50%",
          backgroundColor: secondary,
          opacity: opacity * 0.5,
        }}
        animate={{
          x: [100, -100, 100],
          scale: [1.2, 1, 1.2],
        }}
        transition={{
          duration: 10,
          repeat: Infinity,
          ease: "easeInOut",
          delay: 1,
        }}
      />
      {/* Interactive particles */}
      <Particles config={particleConfig} />
    </>
  );
}

// 5. Mesh Animation - Gradient mesh background
export function MeshAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const secondary = getColor(secondaryColor);
  const opacity = getOpacity(intensity);

  return (
    <>
      {[...Array(4)].map((_, i) => (
        <motion.div
          key={i}
          className="absolute w-96 h-96 rounded-full blur-3xl"
          style={{
            left: `${(i % 2) * 50}%`,
            top: `${Math.floor(i / 2) * 50}%`,
            backgroundColor: i % 2 === 0 ? primary : secondary,
            opacity: opacity * 0.75,
          }}
          animate={{
            scale: [1, 1.3, 1],
            x: [0, 30, 0],
            y: [0, -30, 0],
          }}
          transition={{
            duration: 6 + i * 2,
            repeat: Infinity,
            ease: "easeInOut",
            delay: i * 1.5,
          }}
        />
      ))}
    </>
  );
}

// 6. Spotlight Animation - Moving spotlight effect
export function SpotlightAnimation({ primaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const opacity = getOpacity(intensity);

  return (
    <>
      <motion.div
        className="absolute w-[600px] h-[600px] rounded-full blur-3xl"
        style={{
          backgroundColor: primary,
          opacity: opacity * 0.5,
        }}
        animate={{
          x: [-200, 200, -200],
          y: [-100, 100, -100],
        }}
        transition={{
          duration: 10,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />
      <motion.div
        className="absolute inset-0 bg-linear-to-b from-transparent via-background/50 to-background"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
      />
    </>
  );
}

// 7. Ripples Animation - Expanding ripple circles
export function RipplesAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const secondary = getColor(secondaryColor);
  const opacity = getOpacity(intensity);

  return (
    <>
      {[...Array(3)].map((_, i) => (
        <motion.div
          key={i}
          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2"
          style={{
            borderColor: i % 2 === 0 ? primary : secondary,
            opacity: opacity * 1.5,
          }}
          initial={{ width: 0, height: 0, opacity: opacity * 2.5 }}
          animate={{
            width: [0, 800],
            height: [0, 800],
            opacity: [opacity * 2.5, 0],
          }}
          transition={{
            duration: 4,
            repeat: Infinity,
            delay: i * 1.3,
            ease: "easeOut",
          }}
        />
      ))}
      <div
        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full"
        style={{ backgroundColor: primary, opacity: opacity * 2.5 }}
      />
    </>
  );
}

// 8. Geometric Animation - Animated geometric shapes
export function GeometricAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const secondary = getColor(secondaryColor);
  const opacity = getOpacity(intensity);

  const shapes = [
    { size: "w-16 h-16", position: { left: "10%", top: "20%" } },
    { size: "w-12 h-12 rounded-full", position: { right: "15%", top: "30%" } },
    { size: "w-20 h-20 rotate-45", position: { left: "30%", bottom: "20%" } },
    { size: "w-14 h-14", position: { right: "25%", bottom: "30%" } },
  ];

  return (
    <>
      {shapes.map((shape, i) => (
        <motion.div
          key={i}
          className={`absolute ${shape.size}`}
          style={{
            ...shape.position,
            backgroundColor: i % 2 === 0 ? primary : secondary,
            opacity: opacity * 0.5,
          }}
          animate={{
            rotate: [0, 360],
            scale: [1, 1.1, 1],
          }}
          transition={{
            rotate: { duration: 20 + i * 5, repeat: Infinity, ease: "linear" },
            scale: { duration: 3, repeat: Infinity, ease: "easeInOut" },
          }}
        />
      ))}
    </>
  );
}

// 9. Glow Animation - Pulsing glow effect
export function GlowAnimation({ primaryColor, secondaryColor, intensity }: AnimationProps) {
  const primary = getColor(primaryColor);
  const secondary = getColor(secondaryColor);
  const opacity = getOpacity(intensity);

  return (
    <>
      <motion.div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full blur-3xl"
        style={{ backgroundColor: primary }}
        animate={{
          opacity: [opacity * 0.5, opacity * 1.25, opacity * 0.5],
          scale: [0.8, 1.1, 0.8],
        }}
        transition={{
          duration: 4,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />
      <motion.div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] rounded-full blur-2xl"
        style={{ backgroundColor: secondary }}
        animate={{
          opacity: [opacity * 0.75, opacity * 1.5, opacity * 0.75],
          scale: [1, 0.8, 1],
        }}
        transition={{
          duration: 3,
          repeat: Infinity,
          ease: "easeInOut",
          delay: 0.5,
        }}
      />
    </>
  );
}

// 10. Prism Animation - Prismatic light refraction
export function PrismAnimation({ intensity }: AnimationProps) {
  const colors = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#6366f1", "#8b5cf6"];
  const opacity = getOpacity(intensity);

  return (
    <>
      {colors.map((color, i) => (
        <motion.div
          key={i}
          className="absolute h-1 blur-sm"
          style={{
            left: "-10%",
            right: "-10%",
            top: `${20 + i * 10}%`,
            transform: `rotate(${-5 + i * 2}deg)`,
            backgroundColor: color,
          }}
          animate={{
            opacity: [opacity * 0.5, opacity * 1.5, opacity * 0.5],
            x: [-20, 20, -20],
          }}
          transition={{
            duration: 5,
            repeat: Infinity,
            ease: "easeInOut",
            delay: i * 0.2,
          }}
        />
      ))}
    </>
  );
}

// Main component that renders the selected animation
export function DesignAnimationRenderer({
  animation = "orbs",
  primaryColor = "primary",
  secondaryColor = "purple",
  intensity = 20,
}: {
  animation?: DesignAnimation;
  primaryColor?: string;
  secondaryColor?: string;
  intensity?: number;
}) {
  const props = { primaryColor, secondaryColor, intensity };

  const animations: Record<DesignAnimation, React.ReactNode> = {
    orbs: <OrbsAnimation {...props} />,
    waves: <WavesAnimation {...props} />,
    particles: <ParticlesAnimation {...props} />,
    aurora: <AuroraAnimation {...props} />,
    mesh: <MeshAnimation {...props} />,
    spotlight: <SpotlightAnimation {...props} />,
    ripples: <RipplesAnimation {...props} />,
    geometric: <GeometricAnimation {...props} />,
    glow: <GlowAnimation {...props} />,
    prism: <PrismAnimation {...props} />,
  };

  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {animations[animation]}
    </div>
  );
}