import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { Telescope, ArrowUpRight } from 'lucide-react'
import { useReducedMotion } from '../hooks/useReducedMotion'

gsap.registerPlugin(ScrollTrigger)

const topics = [
  {
    title: 'OpenClaw / MCP Servers',
    description: 'Exploring modular control plane architectures and automated orchestration systems.',
  },
  {
    title: 'ML / AI Training',
    description: 'Deep diving into model training pipelines, fine-tuning strategies, and deployment patterns.',
  },
  {
    title: 'LLM Definition & Background',
    description: 'Understanding the theoretical foundations and architectural evolution of large language models.',
  },
  {
    title: 'Low Level & Exploit Development',
    description: 'Memory corruption, binary exploitation, and vulnerability research at the systems level.',
  },
  {
    title: 'Game Security Research',
    description: 'External / internal cheat development & kernel level anti-cheat exploitation research.',
  },
  {
    title: 'Database Engineering',
    description: 'Efficiency, management & scaling strategies for high-throughput data systems.',
  },
  {
    title: 'Stability & Concurrency',
    description: 'Improved async handling, fault tolerance, and concurrent system design patterns.',
  },
]

export default function TopicsSection() {
  const sectionRef = useRef<HTMLElement>(null)
  const reducedMotion = useReducedMotion()

  useEffect(() => {
    if (reducedMotion || !sectionRef.current) return

    const ctx = gsap.context(() => {
      gsap.fromTo(
        '.topic-reveal',
        { y: 30, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.7,
          stagger: 0.1,
          ease: 'expo.out',
          scrollTrigger: {
            trigger: sectionRef.current,
            start: 'top 70%',
            toggleActions: 'play none none none',
          },
        }
      )
    }, sectionRef)

    return () => ctx.revert()
  }, [reducedMotion])

  return (
    <section
      id="topics"
      ref={sectionRef}
      className="relative py-32 md:py-40 px-6"
    >
      <div className="max-w-6xl mx-auto">
        {/* Section label */}
        <div className="topic-reveal flex items-center gap-4 mb-16">
          <span className="text-pink-brand font-mono text-xs tracking-[0.3em] uppercase">
            005
          </span>
          <div className="flex-1 h-px bg-pink-brand/20" />
          <span className="text-grey-500 font-display text-xs tracking-[0.2em] uppercase">
            Research
          </span>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          {/* Left sticky heading */}
          <div className="lg:col-span-4">
            <div className="lg:sticky lg:top-32">
              <div className="topic-reveal flex items-center gap-3 mb-6">
                <div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand">
                  <Telescope className="w-6 h-6" />
                </div>
              </div>
              <h2 className="topic-reveal font-display text-3xl md:text-4xl lg:text-5xl font-light text-grey-900 leading-tight mb-6">
                Topics to<br />
                <span className="text-gradient">explore</span>
              </h2>
              <p className="topic-reveal text-grey-500 text-base font-body leading-relaxed">
                A living list of research directions and technical frontiers 
                I am actively looking into or plan to investigate.
              </p>
            </div>
          </div>

          {/* Right topic list */}
          <div className="lg:col-span-8 space-y-4">
            {topics.map((topic, i) => (
              <div
                key={topic.title}
                className="topic-reveal group p-6 rounded-2xl bg-skin-100/40 border border-pink-brand/5 hover:border-pink-brand/20 hover:bg-skin-100/70 transition-all duration-300 cursor-default"
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="flex items-start gap-4">
                    <span className="font-mono text-sm text-pink-brand/40 group-hover:text-pink-brand/70 transition-colors mt-1">
                      {String(i + 1).padStart(2, '0')}
                    </span>
                    <div>
                      <h4 className="font-display text-base font-medium text-grey-900 mb-1 group-hover:text-pink-brand transition-colors">
                        {topic.title}
                      </h4>
                      <p className="text-grey-500 text-sm font-body leading-relaxed">
                        {topic.description}
                      </p>
                    </div>
                  </div>
                  <ArrowUpRight className="w-4 h-4 text-grey-300 group-hover:text-pink-brand flex-shrink-0 mt-1 transition-colors" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
