'use client'

import { useEffect, useRef } from 'react'
import { motion } from 'framer-motion'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { skills } from '@/lib/data'

gsap.registerPlugin(ScrollTrigger)

export function Skills() {
  const sectionRef = useRef<HTMLElement>(null)
  const barsRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const ctx = gsap.context(() => {
      if (!barsRef.current) return
      const bars = barsRef.current.querySelectorAll('.skill-bar-fill')
      bars.forEach((bar) => {
        const el = bar as HTMLElement
        const target = el.dataset.value ?? '0'
        gsap.fromTo(
          el,
          { width: '0%' },
          {
            width: `${target}%`,
            duration: 1.5,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: el,
              start: 'top 85%',
              toggleActions: 'play none none reverse',
            },
          }
        )
      })
    })
    return () => ctx.revert()
  }, [])

  return (
    <section
      id="skills"
      ref={sectionRef}
      className="relative w-full py-24 overflow-hidden"
      style={{ background: 'var(--bg-secondary)' }}
      aria-label="Player Skills"
    >
      <div className="px-8 md:px-16 max-w-screen-xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          {/* Left: text + bars */}
          <div>
            <p className="font-body text-xs tracking-[0.4em] uppercase mb-2" style={{ color: 'var(--cyan)' }}>
              Abilities
            </p>
            <h2
              className="font-display mb-12 leading-none"
              style={{ fontSize: 'clamp(3rem, 7vw, 7rem)', color: 'var(--white)' }}
            >
              Skills
            </h2>

            <div ref={barsRef} className="flex flex-col gap-6">
              {skills.map((skill, i) => (
                <motion.div
                  key={skill.label}
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.5, delay: i * 0.08, ease: 'easeOut' }}
                  viewport={{ once: true }}
                >
                  <div className="flex justify-between items-baseline mb-2">
                    <span className="font-body text-sm uppercase tracking-widest" style={{ color: 'var(--white)' }}>
                      {skill.label}
                    </span>
                    <span className="font-display text-2xl" style={{ color: 'var(--cyan)' }}>
                      {skill.value}
                    </span>
                  </div>
                  <div className="relative h-px" style={{ background: 'rgba(240,240,255,0.1)' }}>
                    <div
                      className="skill-bar-fill absolute top-0 left-0 h-full"
                      data-value={skill.value}
                      style={{
                        width: '0%',
                        background: `linear-gradient(90deg, var(--blue-primary), var(--cyan))`,
                        boxShadow: '0 0 8px 2px rgba(0,229,255,0.4)',
                      }}
                    />
                  </div>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Right: visual spider web (CSS/SVG) */}
          <div className="flex items-center justify-center">
            <div className="relative w-64 h-64 md:w-80 md:h-80">
              <svg
                viewBox="0 0 320 320"
                className="w-full h-full"
                style={{ overflow: 'visible' }}
              >
                {/* Reference rings */}
                {[0.25, 0.5, 0.75, 1.0].map((r, ri) => {
                  const radius = 140 * r
                  const points = skills.map((_, i) => {
                    const angle = (i / skills.length) * Math.PI * 2 - Math.PI / 2
                    return `${160 + radius * Math.cos(angle)},${160 + radius * Math.sin(angle)}`
                  })
                  return (
                    <polygon
                      key={ri}
                      points={points.join(' ')}
                      fill="none"
                      stroke="rgba(0,68,255,0.2)"
                      strokeWidth="1"
                    />
                  )
                })}

                {/* Axis lines */}
                {skills.map((_, i) => {
                  const angle = (i / skills.length) * Math.PI * 2 - Math.PI / 2
                  return (
                    <line
                      key={i}
                      x1="160"
                      y1="160"
                      x2={160 + 140 * Math.cos(angle)}
                      y2={160 + 140 * Math.sin(angle)}
                      stroke="rgba(0,68,255,0.2)"
                      strokeWidth="1"
                    />
                  )
                })}

                {/* Skill area */}
                <motion.polygon
                  points={skills
                    .map((s, i) => {
                      const angle = (i / skills.length) * Math.PI * 2 - Math.PI / 2
                      const r = (s.value / 100) * 140
                      return `${160 + r * Math.cos(angle)},${160 + r * Math.sin(angle)}`
                    })
                    .join(' ')}
                  fill="rgba(0,68,255,0.2)"
                  stroke="#00E5FF"
                  strokeWidth="2"
                  initial={{ scale: 0, opacity: 0 }}
                  whileInView={{ scale: 1, opacity: 1 }}
                  transition={{ duration: 1, ease: 'easeOut', delay: 0.3 }}
                  style={{ transformOrigin: '160px 160px' }}
                  viewport={{ once: true }}
                />

                {/* Vertex dots */}
                {skills.map((s, i) => {
                  const angle = (i / skills.length) * Math.PI * 2 - Math.PI / 2
                  const r = (s.value / 100) * 140
                  const x = 160 + r * Math.cos(angle)
                  const y = 160 + r * Math.sin(angle)
                  return (
                    <circle key={i} cx={x} cy={y} r="4" fill="#00E5FF" style={{ filter: 'drop-shadow(0 0 4px #00E5FF)' }} />
                  )
                })}

                {/* Labels */}
                {skills.map((s, i) => {
                  const angle = (i / skills.length) * Math.PI * 2 - Math.PI / 2
                  const r = 155
                  const x = 160 + r * Math.cos(angle)
                  const y = 160 + r * Math.sin(angle)
                  return (
                    <text
                      key={i}
                      x={x}
                      y={y}
                      textAnchor="middle"
                      dominantBaseline="central"
                      fill="rgba(240,240,255,0.6)"
                      fontSize="10"
                      fontFamily="var(--font-body)"
                      letterSpacing="0.1em"
                    >
                      {s.label}
                    </text>
                  )
                })}
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}