'use client'

import React, { useState } from 'react'
import './PivoineDocsIcon.css'

interface PivoineDocsIconProps {
  size?: string
  interactive?: boolean
  className?: string
  showLabel?: boolean
}

export default function PivoineDocsIcon({ 
  size = '256px', 
  interactive = true,
  className = '',
  showLabel = false
}: PivoineDocsIconProps) {
  const [isHovered, setIsHovered] = useState(false)
  const [isClicked, setIsClicked] = useState(false)

  const handleMouseEnter = () => {
    if (!interactive) return
    setIsHovered(true)
  }

  const handleMouseLeave = () => {
    if (!interactive) return
    setIsHovered(false)
  }

  const handleClick = () => {
    if (!interactive) return

    setIsClicked(true)
    setTimeout(() => {
      setIsClicked(false)
    }, 1200)
  }

  const handleTouch = (e: React.TouchEvent) => {
    if (!interactive) return
    e.preventDefault()
    setIsHovered(true)
    
    setTimeout(() => {
      handleClick()
    }, 50)

    setTimeout(() => {
      setIsHovered(false)
    }, 1500)
  }

  const wrapperClasses = [
    'pivoine-docs-icon-wrapper',
    isHovered && 'is-hovered',
    isClicked && 'is-clicked',
    interactive && 'is-interactive',
    className
  ].filter(Boolean).join(' ')

  // Generate bloom particles with varied properties
  const bloomParticles = Array.from({ length: 12 }, (_, i) => ({
    id: i,
    angle: (360 / 12) * i,
    distance: 80 + Math.random() * 20,
    size: 2 + Math.random() * 2,
    delay: i * 0.08,
  }))

  return (
    <div
      className={wrapperClasses}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      onClick={handleClick}
      onTouchStart={handleTouch}
      style={{ width: size, height: size, rotate: '5deg' }}
    >
      <svg
        className="pivoine-docs-icon"
        viewBox="0 0 256 256"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          {/* Enhanced Gradients for natural peony colors */}
          <radialGradient id="petal-gradient-1" cx="30%" cy="30%">
            <stop offset="0%" style={{ stopColor: '#fdf4ff', stopOpacity: 1 }} />
            <stop offset="40%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
            <stop offset="70%" style={{ stopColor: '#f0abfc', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#d946ef', stopOpacity: 0.95 }} />
          </radialGradient>

          <radialGradient id="petal-gradient-2" cx="30%" cy="30%">
            <stop offset="0%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
            <stop offset="40%" style={{ stopColor: '#f3e8ff', stopOpacity: 1 }} />
            <stop offset="70%" style={{ stopColor: '#e9d5ff', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#c084fc', stopOpacity: 0.95 }} />
          </radialGradient>

          <radialGradient id="petal-gradient-3" cx="30%" cy="30%">
            <stop offset="0%" style={{ stopColor: '#fdf4ff', stopOpacity: 1 }} />
            <stop offset="40%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
            <stop offset="70%" style={{ stopColor: '#f0abfc', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#d946ef', stopOpacity: 0.95 }} />
          </radialGradient>

          <radialGradient id="petal-gradient-4" cx="30%" cy="30%">
            <stop offset="0%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
            <stop offset="40%" style={{ stopColor: '#f3e8ff', stopOpacity: 1 }} />
            <stop offset="70%" style={{ stopColor: '#e9d5ff', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#c084fc', stopOpacity: 0.95 }} />
          </radialGradient>

          <radialGradient id="center-gradient" cx="50%" cy="50%">
            <stop offset="0%" style={{ stopColor: '#fef3c7', stopOpacity: 1 }} />
            <stop offset="30%" style={{ stopColor: '#fde68a', stopOpacity: 1 }} />
            <stop offset="60%" style={{ stopColor: '#fbbf24', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#f59e0b', stopOpacity: 1 }} />
          </radialGradient>

          <radialGradient id="center-inner-gradient" cx="50%" cy="50%">
            <stop offset="0%" style={{ stopColor: '#fffbeb', stopOpacity: 1 }} />
            <stop offset="50%" style={{ stopColor: '#fef3c7', stopOpacity: 1 }} />
            <stop offset="100%" style={{ stopColor: '#fde68a', stopOpacity: 1 }} />
          </radialGradient>

          <linearGradient id="page-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style={{ stopColor: '#ffffff', stopOpacity: 0.98 }} />
            <stop offset="100%" style={{ stopColor: '#f3f4f6', stopOpacity: 0.98 }} />
          </linearGradient>

          {/* Enhanced Filters */}
          <filter id="petal-glow">
            <feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

          <filter id="intense-glow">
            <feGaussianBlur stdDeviation="8" result="coloredBlur" />
            <feComponentTransfer in="coloredBlur" result="brightBlur">
              <feFuncA type="linear" slope="1.5" />
            </feComponentTransfer>
            <feMerge>
              <feMergeNode in="brightBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

          <filter id="center-glow">
            <feGaussianBlur stdDeviation="4" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

          <filter id="sparkle-glow">
            <feGaussianBlur stdDeviation="2" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

          <filter id="page-shadow">
            <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
          </filter>
        </defs>

        {/* Subtle background glow */}
        <circle className="bg-glow" cx="128" cy="128" r="120" fill="url(#petal-gradient-3)" opacity="0.08" />

        {/* Outer layer - Large petals (8 petals) */}
        <g className="outer-petals">
          {[
            { angle: 0, scaleX: 1.1, scaleY: 1, gradient: 1 },
            { angle: 45, scaleX: 1, scaleY: 1.05, gradient: 2 },
            { angle: 90, scaleX: 1.05, scaleY: 1, gradient: 3 },
            { angle: 135, scaleX: 1, scaleY: 1.1, gradient: 4 },
            { angle: 180, scaleX: 1.08, scaleY: 1, gradient: 1 },
            { angle: 225, scaleX: 1, scaleY: 1.02, gradient: 2 },
            { angle: 270, scaleX: 1.02, scaleY: 1, gradient: 3 },
            { angle: 315, scaleX: 1, scaleY: 1.06, gradient: 4 },
          ].map((petal, i) => (
            <ellipse
              key={`outer-${i}`}
              className={`petal outer-petal petal-${i}`}
              cx="128"
              cy="70"
              rx="40"
              ry="68"
              fill={`url(#petal-gradient-${petal.gradient})`}
              filter="url(#petal-glow)"
              style={{rotate: `${petal.angle}deg`, width: `${128 * petal.scaleX}px`, height: `${70 * petal.scaleY}px`}}
            />
          ))}
        </g>

        {/* Middle layer - Medium petals (8 petals, offset) */}
        <g className="middle-petals">
          {[
            { angle: 22.5, scaleX: 1, scaleY: 1, gradient: 2 },
            { angle: 67.5, scaleX: 1.05, scaleY: 1, gradient: 3 },
            { angle: 112.5, scaleX: 1, scaleY: 1.02, gradient: 4 },
            { angle: 157.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
            { angle: 202.5, scaleX: 1, scaleY: 1.05, gradient: 2 },
            { angle: 247.5, scaleX: 1.03, scaleY: 1, gradient: 3 },
            { angle: 292.5, scaleX: 1, scaleY: 1, gradient: 4 },
            { angle: 337.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
          ].map((petal, i) => (
            <ellipse
              key={`middle-${i}`}
              className={`petal middle-petal petal-m-${i}`}
              cx="128"
              cy="78"
              rx="34"
              ry="56"
              fill={`url(#petal-gradient-${petal.gradient})`}
              filter="url(#petal-glow)"
              style={{rotate: `${petal.angle}deg`, width: `${128 * petal.scaleX}px`, height: `${70 * petal.scaleY}px`}}
            />
          ))}
        </g>

        {/* Inner layer - Small petals (10 petals) */}
        <g className="inner-petals">
          {[
            { angle: 0, gradient: 3 },
            { angle: 45, gradient: 4 },
            { angle: 90, gradient: 1 },
            { angle: 135, gradient: 2 },
            { angle: 180, gradient: 3 },
            { angle: 225, gradient: 4 },
            { angle: 270, gradient: 1 },
            { angle: 315, gradient: 2 },
          ].map((petal, i) => (
            <ellipse
              key={`inner-${i}`}
              className={`petal inner-petal petal-i-${i}`}
              cx="128"
              cy="88"
              rx="28"
              ry="44"
              fill={`url(#petal-gradient-${petal.gradient})`}
              filter="url(#petal-glow)"
              style={{rotate: `${petal.angle}deg`}}
            />
          ))}
        </g>

        {/* Center circles - Flower stamen */}
        <circle 
          className="center-circle-outer" 
          cx="128" 
          cy="128" 
          r="12" 
          fill="url(#center-gradient)" 
          filter="url(#center-glow)" 
        />
        <circle 
          className="center-circle-inner" 
          cx="128" 
          cy="128" 
          r="2" 
          fill="url(#center-inner-gradient)" 
          opacity="0.9"
        />

        {/* Center details - tiny stamens */}
        <g className="center-stamens">
          {Array.from({ length: 8 }).map((_, i) => {
            const angle = (360 / 8) * i
            const x = 128 + Math.cos((angle * Math.PI) / 180) * 10
            const y = 128 + Math.sin((angle * Math.PI) / 180) * 10
            return (
              <circle
                key={`stamen-${i}`}
                className={`stamen stamen-${i}`}
                cx={x}
                cy={y}
                r="2"
                fill="#d97706"
                opacity="0.8"
              />
            )
          })}
        </g>

        {/* Sparkles - ambient magical effect */}
        <g className="sparkles">
          <circle className="sparkle sparkle-1" cx="180" cy="75" r="3" fill="#fbbf24" filter="url(#sparkle-glow)" />
          <circle className="sparkle sparkle-2" cx="76" cy="76" r="2.5" fill="#a855f7" filter="url(#sparkle-glow)" />
          <circle className="sparkle sparkle-3" cx="180" cy="180" r="2.5" fill="#ec4899" filter="url(#sparkle-glow)" />
          <circle className="sparkle sparkle-4" cx="76" cy="180" r="3" fill="#c026d3" filter="url(#sparkle-glow)" />
          <circle className="sparkle sparkle-5" cx="128" cy="50" r="2" fill="#f0abfc" filter="url(#sparkle-glow)" />
          <circle className="sparkle sparkle-6" cx="206" cy="128" r="2" fill="#fb7185" filter="url(#sparkle-glow)" />
          <circle className="sparkle sparkle-7" cx="128" cy="206" r="2.5" fill="#fbbf24" filter="url(#sparkle-glow)" />
          <circle className="sparkle sparkle-8" cx="50" cy="128" r="2" fill="#c084fc" filter="url(#sparkle-glow)" />
        </g>

        {/* Flying bloom particles (visible on hover) */}
        <g className="bloom-particles">
          {bloomParticles.map((particle) => (
            <circle
              key={`bloom-particle-${particle.id}`}
              className={`bloom-particle bloom-particle-${particle.id}`}
              cx="128"
              cy="128"
              r={particle.size}
              fill={`url(#petal-gradient-${(particle.id % 4) + 1})`}
              opacity="0"
              filter="url(#sparkle-glow)"
              style={{
                '--particle-angle': `${particle.angle}deg`,
                '--particle-distance': `${particle.distance}px`,
                '--particle-delay': `${particle.delay}s`,
              } as React.CSSProperties}
            />
          ))}
        </g>
      </svg>

      {/* Optional label */}
      {showLabel && (
        <div className="icon-label">
          <span className="label-text">Pivoine Docs</span>
        </div>
      )}
    </div>
  )
}