'use client'

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

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

export function Clubs() {
  const [activeClub, setActiveClub] = useState('dinamo')
  const [sectionRef, inView] = useInView<HTMLElement>({ threshold: 0.2 })
  const club = clubs.find((c) => c.id === activeClub)!

  return (
    <section
      id="clubs"
      ref={sectionRef}
      className="relative w-full min-h-screen overflow-hidden flex flex-col"
      style={{ background: 'var(--bg-primary)' }}
      aria-label="Clubs"
    >
      {/* 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(--cyan)' }}>
            The Clubs
          </p>
          <h2 className="font-display" style={{ fontSize: 'clamp(3rem, 8vw, 8rem)', color: 'var(--white)', lineHeight: 0.9 }}>
            Museum
          </h2>
        </div>
      </div>

      {/* Club selector tabs */}
      <div className="relative z-10 px-8 md:px-16 pb-4">
        <div className="max-w-screen-xl mx-auto">
          <div className="flex gap-2">
            {clubs.map((c) => (
              <button
                key={c.id}
                onClick={() => setActiveClub(c.id)}
                className="relative px-6 py-3 font-body text-xs tracking-widest uppercase transition-all duration-300"
                style={{
                  color: activeClub === c.id ? 'var(--white)' : 'rgba(240,240,255,0.4)',
                }}
                aria-pressed={activeClub === c.id}
              >
                {c.name}
                {activeClub === c.id && (
                  <motion.div
                    className="absolute bottom-0 left-0 right-0 h-px"
                    style={{ background: c.primaryColor }}
                    layoutId="club-tab-indicator"
                  />
                )}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Main content: canvas + info */}
      <div className="flex-1 relative z-10 px-8 md:px-16 pb-16">
        <div className="max-w-screen-xl mx-auto h-full">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 h-full min-h-[60vh]">

            {/* 3D Canvas */}
            <div className="relative rounded-2xl overflow-hidden min-h-[400px] canvas-3d" style={{ border: '1px solid rgba(0,68,255,0.15)' }}>
              <Canvas
                frameloop={inView ? 'always' : 'never'}
                camera={{ position: [0, 1.5, 5], fov: 55 }}
                dpr={[1, 2]}
                gl={{ antialias: true, alpha: false }}
              >
                <Suspense fallback={null}>
                  <AnimatePresence mode="wait">
                    <ClubScene key={activeClub} activeClub={activeClub} clubs={clubs} />
                  </AnimatePresence>
                </Suspense>
              </Canvas>
            </div>

            {/* Mobile fallback */}
            <div
              className="canvas-fallback relative rounded-2xl overflow-hidden min-h-[200px] flex items-center justify-center"
              style={{
                background: `linear-gradient(135deg, ${club.primaryColor}20, var(--bg-secondary))`,
                border: '1px solid rgba(0,68,255,0.15)',
              }}
            >
              <span className="font-display text-6xl" style={{ color: club.primaryColor }}>{club.jerseyNumber}</span>
            </div>

            {/* Club info */}
            <AnimatePresence mode="wait">
              <motion.div
                key={activeClub}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.5, ease: 'easeOut' }}
                className="flex flex-col justify-center"
              >
                <div className="flex items-center gap-4 mb-6">
                  <div
                    className="w-3 h-3 rounded-full"
                    style={{
                      background: club.primaryColor,
                      boxShadow: `0 0 12px 4px ${club.primaryColor}60`,
                    }}
                  />
                  <span className="font-body text-xs tracking-widest uppercase" style={{ color: 'rgba(240,240,255,0.5)' }}>
                    {club.years}
                  </span>
                </div>

                <h3
                  className="font-display mb-2 leading-none"
                  style={{ fontSize: 'clamp(2rem, 5vw, 4rem)', color: 'var(--white)' }}
                >
                  {club.name}
                </h3>

                <p className="font-body text-xs uppercase tracking-widest mb-6" style={{ color: 'rgba(240,240,255,0.4)' }}>
                  {club.league} · {club.city}, {club.country}
                </p>

                <p className="font-body text-sm leading-relaxed mb-8 max-w-sm" style={{ color: 'rgba(240,240,255,0.6)' }}>
                  {club.description}
                </p>

                {/* Stats */}
                <div className="grid grid-cols-3 gap-4 mb-8">
                  {[
                    { label: 'Apps', value: club.apps },
                    { label: 'Goals', value: club.goals },
                    { label: 'Assists', value: club.assists },
                  ].map((s) => (
                    <div key={s.label} className="glass-card rounded-xl p-3 text-center" style={{ borderColor: `${club.primaryColor}30` }}>
                      <div className="font-display text-3xl leading-none mb-1" style={{ color: club.primaryColor }}>
                        {s.value}
                      </div>
                      <div className="font-body text-xs uppercase tracking-widest" style={{ color: 'rgba(240,240,255,0.4)' }}>
                        {s.label}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Transfer fee */}
                {club.transferFee && (
                  <div className="flex items-center gap-3 mb-6">
                    <span className="font-body text-xs uppercase tracking-widest" style={{ color: 'rgba(240,240,255,0.4)' }}>
                      Transfer Fee
                    </span>
                    <span className="font-display text-2xl" style={{ color: 'var(--gold)' }}>
                      {club.transferFee}
                    </span>
                  </div>
                )}

                {/* Trophies */}
                <div className="flex flex-wrap gap-2">
                  {club.trophies.map((t) => (
                    <span
                      key={t}
                      className="font-body text-xs px-3 py-1 rounded-full"
                      style={{
                        background: `${club.primaryColor}15`,
                        border: `1px solid ${club.primaryColor}30`,
                        color: club.primaryColor,
                      }}
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
      </div>
    </section>
  )
}