'use client';

import { motion } from 'framer-motion';
import { useMemo, useState, useEffect } from 'react';

interface InkDropProps {
  size?: number;
  opacity?: number;
  color?: string;
  blur?: number;
  delay?: number;
  duration?: number;
  className?: string;
}

export function InkDrop({ 
  size = 20, 
  opacity = 0.15, 
  color = '#1C1C1C',
  blur = 0,
  delay = 0,
  duration: _duration = 8,
  className = ''
}: InkDropProps) {
  return (
    <motion.div
      className={`absolute rounded-full ${className}`}
      style={{
        width: size,
        height: size,
        backgroundColor: color,
        opacity,
        filter: blur > 0 ? `blur(${blur}px)` : 'none',
      }}
      initial={{ scale: 0, opacity: 0 }}
      animate={{
        scale: [0.8, 1.2, 1],
        opacity: [0, opacity, opacity],
      }}
      transition={{
        duration: 1.5,
        delay,
        ease: [0.16, 1, 0.3, 1],
      }}
    />
  );
}

interface InkSplashProps {
  size?: number;
  color?: string;
  opacity?: number;
  delay?: number;
  className?: string;
}

export function InkSplash({ 
  size = 60, 
  color = '#C41E3A',
  opacity = 0.2,
  delay = 0,
  className = ''
}: InkSplashProps) {
  return (
    <motion.svg
      viewBox="0 0 100 100"
      width={size}
      height={size}
      className={`absolute ${className}`}
      initial={{ opacity: 0, scale: 0 }}
      animate={{ opacity, scale: 1 }}
      transition={{ duration: 1.2, delay, ease: [0.16, 1, 0.3, 1] }}
    >
      <motion.path
        d="M50 10 Q30 25 35 50 Q30 75 50 90 Q70 75 65 50 Q70 25 50 10"
        fill={color}
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{ duration: 2, delay: delay + 0.3, ease: [0.16, 1, 0.3, 1] }}
      />
    </motion.svg>
  );
}

interface SealStampProps {
  size?: number;
  color?: string;
  opacity?: number;
  delay?: number;
  className?: string;
}

export function SealStamp({ 
  size = 40, 
  color = '#C41E3A',
  opacity = 0.15,
  delay = 0,
  className = ''
}: SealStampProps) {
  return (
    <motion.div
      className={`absolute ${className}`}
      style={{
        width: size,
        height: size,
        border: `2px solid ${color}`,
        borderRadius: '4px',
        opacity: 0,
        transform: 'rotate(-8deg)',
      }}
      initial={{ opacity: 0, scale: 1.5, rotate: -20 }}
      animate={{ opacity, scale: 1, rotate: -8 }}
      transition={{
        type: 'spring',
        stiffness: 200,
        damping: 15,
        delay,
      }}
    >
      <motion.div
        className="absolute inset-1 border border-current"
        style={{ borderColor: color, opacity: 0.5 }}
        initial={{ scale: 0.8 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.5, delay: delay + 0.3 }}
      />
    </motion.div>
  );
}

interface InkStainProps {
  size?: number;
  color?: string;
  opacity?: number;
  blur?: number;
  delay?: number;
  className?: string;
}

export function InkStain({ 
  size = 100, 
  color = '#1C1C1C',
  opacity = 0.05,
  blur = 20,
  delay = 0,
  className = ''
}: InkStainProps) {
  return (
    <motion.div
      className={`absolute ${className}`}
      style={{
        width: size,
        height: size * 0.8,
        backgroundColor: color,
        borderRadius: '50% 40% 60% 45%',
        opacity: 0,
        filter: `blur(${blur}px)`,
      }}
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity, scale: 1 }}
      transition={{ duration: 2, delay, ease: [0.16, 1, 0.3, 1] }}
    />
  );
}

interface InkLineProps {
  width?: number;
  height?: number;
  color?: string;
  opacity?: number;
  delay?: number;
  className?: string;
}

export function InkLine({ 
  width = 200, 
  height = 2,
  color = '#1C1C1C',
  opacity = 0.1,
  delay = 0,
  className = ''
}: InkLineProps) {
  return (
    <motion.div
      className={`absolute ${className}`}
      style={{
        width,
        height,
        backgroundColor: color,
        opacity: 0,
        borderRadius: height / 2,
      }}
      initial={{ opacity: 0, scaleX: 0 }}
      animate={{ opacity, scaleX: 1 }}
      transition={{ duration: 1.5, delay, ease: [0.16, 1, 0.3, 1] }}
    />
  );
}

interface BrushStrokeProps {
  width?: number;
  height?: number;
  color?: string;
  opacity?: number;
  delay?: number;
  className?: string;
}

export function BrushStroke({ 
  width = 150, 
  height = 30,
  color = '#C41E3A',
  opacity = 0.12,
  delay = 0,
  className = ''
}: BrushStrokeProps) {
  return (
    <motion.svg
      viewBox="0 0 150 30"
      width={width}
      height={height}
      className={`absolute ${className}`}
      initial={{ opacity: 0 }}
      animate={{ opacity }}
      transition={{ duration: 1, delay }}
    >
      <motion.path
        d="M0 15 Q20 5 40 15 Q60 25 80 15 Q100 5 120 15 Q135 20 150 15"
        fill="none"
        stroke={color}
        strokeWidth="3"
        strokeLinecap="round"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 2, delay: delay + 0.5, ease: [0.16, 1, 0.3, 1] }}
      />
    </motion.svg>
  );
}

interface FloatingInkProps {
  count?: number;
  className?: string;
}

export function FloatingInk({ count = 15, className = '' }: FloatingInkProps) {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const elements = useMemo(() => {
    if (!isMounted) {return [];}
    const items = [];
    
    for (let i = 0; i < count; i++) {
      const type = i % 5;
      const baseDelay = i * 0.15;
      
      items.push({
        id: i,
        type,
        delay: baseDelay,
        props: {
          left: `${10 + Math.random() * 80}%`,
          top: `${10 + Math.random() * 80}%`,
        },
        animX: Math.random() * 10 - 5,
        animDuration: 6 + Math.random() * 4,
        size: type === 0 ? 8 + Math.random() * 16 : 
                type === 1 ? 4 + Math.random() * 8 :
                type === 2 ? 20 + Math.random() * 30 :
                type === 3 ? 60 + Math.random() * 80 : 80 + Math.random() * 100,
        opacity: type === 0 ? 0.08 + Math.random() * 0.1 :
                 type === 1 ? 0.1 + Math.random() * 0.15 :
                 type === 2 ? 0.08 + Math.random() * 0.08 :
                 type === 3 ? 0.03 + Math.random() * 0.04 : 0.06 + Math.random() * 0.08,
        blur: type === 0 ? Math.random() * 2 : 0,
        height: type === 4 ? 15 + Math.random() * 20 : undefined,
      });
    }
    
    return items;
  }, [count, isMounted]);

  return (
    <div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
      {elements.map((el) => (
        <motion.div
          key={el.id}
          className="absolute"
          style={el.props}
          animate={{
            y: [0, -20, 0],
            x: [0, el.animX, 0],
          }}
          transition={{
            duration: el.animDuration,
            delay: el.delay,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        >
          {el.type === 0 && (
            <InkDrop 
              size={el.size} 
              opacity={el.opacity} 
              blur={el.blur}
              delay={el.delay}
            />
          )}
          {el.type === 1 && (
            <InkDrop 
              size={el.size} 
              opacity={el.opacity} 
              color="#C41E3A"
              delay={el.delay}
            />
          )}
          {el.type === 2 && (
            <SealStamp 
              size={el.size} 
              opacity={el.opacity}
              delay={el.delay}
            />
          )}
          {el.type === 3 && (
            <InkStain 
              size={el.size} 
              opacity={el.opacity}
              delay={el.delay}
            />
          )}
          {el.type === 4 && (
            <BrushStroke 
              width={el.size} 
              height={el.height}
              opacity={el.opacity}
              delay={el.delay}
            />
          )}
        </motion.div>
      ))}
    </div>
  );
}

interface InkDecorationProps {
  variant?: 'minimal' | 'balanced' | 'rich';
  className?: string;
}

interface DropPosition {
  left: string;
  top: string;
  size: number;
  opacity: number;
  blur: number;
  isRed: boolean;
  duration: number;
}

interface SplashPosition {
  left: string;
  top: string;
  size: number;
  duration: number;
}

interface SealPosition {
  left: string;
  top: string;
  size: number;
  duration: number;
}

interface StainPosition {
  left: string;
  top: string;
  size: number;
  duration: number;
}

interface StrokePosition {
  left: string;
  top: string;
  width: number;
  duration: number;
}

export function InkDecoration({ variant = 'balanced', className = '' }: InkDecorationProps) {
  const [dropPositions, setDropPositions] = useState<DropPosition[]>([]);
  const [splashPositions, setSplashPositions] = useState<SplashPosition[]>([]);
  const [sealPositions, setSealPositions] = useState<SealPosition[]>([]);
  const [stainPositions, setStainPositions] = useState<StainPosition[]>([]);
  const [strokePositions, setStrokePositions] = useState<StrokePosition[]>([]);

  const config = {
    minimal: { drops: 3, splashes: 1, seals: 1, stains: 1, strokes: 1 },
    balanced: { drops: 5, splashes: 2, seals: 2, stains: 2, strokes: 2 },
    rich: { drops: 8, splashes: 3, seals: 3, stains: 3, strokes: 3 },
  };

  const { drops, splashes, seals, stains, strokes } = config[variant];

  useEffect(() => {
    setDropPositions(Array.from({ length: drops }, (_, i) => ({
      left: `${15 + (i * 70 / drops)}%`,
      top: `${20 + Math.random() * 60}%`,
      size: 6 + Math.random() * 14,
      opacity: 0.06 + Math.random() * 0.1,
      blur: Math.random() * 3,
      isRed: i % 3 === 0,
      duration: 5 + Math.random() * 3,
    })));
    
    setSplashPositions(Array.from({ length: splashes }, (_, i) => ({
      left: `${20 + (i * 60 / splashes)}%`,
      top: `${15 + Math.random() * 70}%`,
      size: 40 + Math.random() * 40,
      duration: 7 + Math.random() * 3,
    })));
    
    setSealPositions(Array.from({ length: seals }, (_, i) => ({
      left: `${25 + (i * 50 / seals)}%`,
      top: `${25 + Math.random() * 50}%`,
      size: 25 + Math.random() * 25,
      duration: 6 + Math.random() * 2,
    })));
    
    setStainPositions(Array.from({ length: stains }, (_, i) => ({
      left: `${10 + (i * 80 / stains)}%`,
      top: `${30 + Math.random() * 40}%`,
      size: 80 + Math.random() * 60,
      duration: 8 + Math.random() * 4,
    })));
    
    setStrokePositions(Array.from({ length: strokes }, (_, i) => ({
      left: `${15 + (i * 70 / strokes)}%`,
      top: `${40 + Math.random() * 30}%`,
      width: 100 + Math.random() * 100,
      duration: 6 + Math.random() * 3,
    })));
  }, [drops, splashes, seals, stains, strokes]);

  return (
    <div className={`absolute inset-0 pointer-events-none overflow-hidden ${className}`}>
      {dropPositions.map((pos, i) => (
        <motion.div
          key={`drop-${i}`}
          className="absolute"
          style={{ left: pos.left, top: pos.top }}
          animate={{
            y: [0, -15, 0],
            scale: [1, 1.1, 1],
          }}
          transition={{
            duration: pos.duration,
            delay: i * 0.2,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        >
          <InkDrop
            size={pos.size}
            opacity={pos.opacity}
            blur={pos.blur}
            color={pos.isRed ? '#C41E3A' : '#1C1C1C'}
            delay={i * 0.1}
          />
        </motion.div>
      ))}

      {splashPositions.map((pos, i) => (
        <motion.div
          key={`splash-${i}`}
          className="absolute"
          style={{ left: pos.left, top: pos.top }}
          animate={{
            y: [0, -10, 0],
            rotate: [0, 5, -5, 0],
          }}
          transition={{
            duration: pos.duration,
            delay: i * 0.3,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        >
          <InkSplash size={pos.size} opacity={0.12} delay={i * 0.15} />
        </motion.div>
      ))}

      {sealPositions.map((pos, i) => (
        <motion.div
          key={`seal-${i}`}
          className="absolute"
          style={{ left: pos.left, top: pos.top }}
          animate={{
            y: [0, -8, 0],
            rotate: [-8, -5, -10, -8],
          }}
          transition={{
            duration: pos.duration,
            delay: i * 0.25,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        >
          <SealStamp size={pos.size} opacity={0.1} delay={i * 0.2} />
        </motion.div>
      ))}

      {stainPositions.map((pos, i) => (
        <motion.div
          key={`stain-${i}`}
          className="absolute"
          style={{ left: pos.left, top: pos.top }}
          animate={{
            scale: [1, 1.05, 1],
            opacity: [0.04, 0.06, 0.04],
          }}
          transition={{
            duration: pos.duration,
            delay: i * 0.35,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        >
          <InkStain size={pos.size} opacity={0.05} delay={i * 0.1} />
        </motion.div>
      ))}

      {strokePositions.map((pos, i) => (
        <motion.div
          key={`stroke-${i}`}
          className="absolute"
          style={{ left: pos.left, top: pos.top }}
          animate={{
            x: [0, 10, 0],
            opacity: [0.08, 0.12, 0.08],
          }}
          transition={{
            duration: pos.duration,
            delay: i * 0.3,
            repeat: Infinity,
            ease: 'easeInOut',
          }}
        >
          <BrushStroke width={pos.width} opacity={0.1} delay={i * 0.15} />
        </motion.div>
      ))}
    </div>
  );
}

export function InkBackground() {
  return (
    <div className="absolute inset-0 pointer-events-none overflow-hidden">
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 2 }}
        className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-[radial-gradient(ellipse_at_center,rgba(28,28,28,0.02)_0%,transparent_70%)]"
      />
      
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 2, delay: 0.3 }}
        className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-[radial-gradient(ellipse_at_center,rgba(196,30,58,0.03)_0%,transparent_60%)]"
      />
      
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 2, delay: 0.6 }}
        className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[radial-gradient(ellipse_at_center,rgba(28,28,28,0.015)_0%,transparent_50%)]"
      />
    </div>
  );
}