'use client'

import { useState, Suspense } from 'react'
import dynamic from 'next/dynamic'
import { Canvas } from '@react-three/fiber'
import { motion, AnimatePresence } from 'framer-motion'
import { trophies } from '@/lib/data'
import { useMousePosition } from '@/hooks/useMousePosition'
import { useInView } from '@/hooks/useInView'

const TrophyScene = dynamic(
  () => import('@/components/canvas/TrophyScene').then((m) => m.TrophyScene),
  { ssr: false }
)

export function Trophies() {
  const [hoveredId, setHoveredId] = useState<string | null>(null)
  const { normalizedX } = useMousePosition()
  const [sectionRef, inView] = useInView<HTMLElement>({ threshold: 0.2 })
  const hoveredTrophy = trophies.find((t) => t.id === hoveredId)

  return (
    <section
      id="trophies"
      ref={sectionRef}
      className="relative w-full overflow-hidden"
      style={{ background: 'var(--bg-primary)', minHeight: '100vh' }}
      aria-label="Trophies and Achievements"
    >
      {/* Header */}
      <div className="relative z-10 px-8 md:px-16 pt-16 pb-8">
        <div className="max-w-screen-xl mx-auto">
          <p className="font-body text-xs tracking-[0.4em] uppercase mb-2" style={{ color: 'var(--gold)' }}>
            Silverware
          </p>
          <h2 className="font-display" style={{ fontSize: 'clamp(3rem, 8vw, 8rem)', color: 'var(--white)', lineHeight: 0.9 }}>
            Palmarès
          </h2>
          <p className="font-body text-sm mt-4" style={{ color: 'rgba(240,240,255,0.4)' }}>
            8 Major Trophies · Hover to explore
          </p>
        </div>
      </div>

      {/* Museum canvas */}
      <div
        className="relative canvas-3d"
        style={{ height: '65vh', cursor: 'none' }}
      >
        <Canvas
          frameloop={inView ? 'always' : 'never'}
          camera={{ position: [0, 2.5, 10], fov: 55 }}
          dpr={[1, 2]}
          gl={{ antialias: true, alpha: false }}
          shadows
        >
          <Suspense fallback={null}>
            <TrophyScene
              trophies={trophies}
              mouseX={normalizedX}
              onTrophyHover={setHoveredId}
            />
          </Suspense>
        </Canvas>

        {/* Trophy info overlay */}
        <AnimatePresence>
          {hoveredTrophy && (
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 10 }}
              transition={{ duration: 0.25 }}
              className="absolute bottom-8 left-1/2 -translate-x-1/2 glass-card rounded-xl px-6 py-4 text-center pointer-events-none z-10"
              style={{ minWidth: 220, borderColor: 'rgba(255,215,0,0.3)' }}
            >
              <p className="font-display text-2xl mb-1" style={{ color: 'var(--gold)' }}>
                {hoveredTrophy.name}
              </p>
              <p className="font-body text-xs uppercase tracking-widest" style={{ color: 'rgba(240,240,255,0.5)' }}>
                {hoveredTrophy.competition} · {hoveredTrophy.year}
              </p>
              {hoveredTrophy.description && (
                <p className="font-body text-xs mt-2" style={{ color: 'rgba(240,240,255,0.4)' }}>
                  {hoveredTrophy.description}
                </p>
              )}
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* Mobile fallback: trophy grid */}
      <div className="canvas-fallback px-8 py-12">
        <div className="grid grid-cols-2 gap-4">
          {trophies.map((t) => (
            <div key={t.id} className="glass-card rounded-xl p-4" style={{ borderColor: 'rgba(255,215,0,0.2)' }}>
              <div className="font-display text-2xl mb-1" style={{ color: 'var(--gold)' }}>
                🏆 {t.year}
              </div>
              <div className="font-body text-xs uppercase tracking-widest" style={{ color: 'rgba(240,240,255,0.6)' }}>
                {t.name}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Trophy count strip */}
      <div className="relative z-10 px-8 md:px-16 py-8">
        <div className="max-w-screen-xl mx-auto">
          <div className="grid grid-cols-3 gap-6">
            {[
              { label: 'League Titles', value: '4', icon: '🏆' },
              { label: 'Cup Titles', value: '2', icon: '🥇' },
              { label: 'Super Cups', value: '2', icon: '⭐' },
            ].map((item) => (
              <div key={item.label} className="glass-card rounded-xl p-5 text-center">
                <div className="text-2xl mb-2">{item.icon}</div>
                <div className="font-display text-5xl leading-none mb-1" style={{ color: 'var(--gold)' }}>
                  {item.value}
                </div>
                <div className="font-body text-xs uppercase tracking-widest" style={{ color: 'rgba(240,240,255,0.4)' }}>
                  {item.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}