'use client'

import { useRef, useEffect, useState } from 'react'
import Image from 'next/image'
import { archetypes, Archetype } from '@/data/archetypes'
import styles from './Archetypes.module.css'

interface ArchetypesProps {
  onSelectArchetype?: (archetypeId: string) => void
}

export default function Archetypes({ onSelectArchetype }: ArchetypesProps) {
  const [visibleItems, setVisibleItems] = useState<Set<number>>(new Set())
  const [selectedArchetype, setSelectedArchetype] = useState<Archetype | null>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const modalRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const observers: IntersectionObserver[] = []

    const items = containerRef.current?.querySelectorAll('[data-archetype]')
    items?.forEach((el, index) => {
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setVisibleItems(prev => new Set([...prev, index]))
          }
        },
        { threshold: 0.2, rootMargin: '0px 0px -5% 0px' }
      )
      observer.observe(el)
      observers.push(observer)
    })

    return () => observers.forEach(obs => obs.disconnect())
  }, [])

  // Close modal on escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        setSelectedArchetype(null)
      }
    }
    window.addEventListener('keydown', handleEscape)
    return () => window.removeEventListener('keydown', handleEscape)
  }, [])

  // Close modal on click outside
  const handleModalBackdropClick = (e: React.MouseEvent) => {
    if (e.target === modalRef.current) {
      setSelectedArchetype(null)
    }
  }

  const handleTransformClick = (archetypeId: string) => {
    setSelectedArchetype(null)

    // Scroll to generator and set archetype
    const generator = document.getElementById('generator')
    if (generator) {
      generator.scrollIntoView({ behavior: 'smooth' })
    }

    // Use callback or URL param
    if (onSelectArchetype) {
      onSelectArchetype(archetypeId)
    } else {
      // Fallback: dispatch custom event
      window.dispatchEvent(new CustomEvent('selectArchetype', { detail: archetypeId }))
    }
  }

  return (
    <section className={styles.archetypes} ref={containerRef}>
      <div className={styles.grain} />

      <div className={styles.header}>
        <span className={styles.label}>THE STATES</span>
        <h2 className={styles.sectionTitle}>Archetypes of PRIME</h2>
        <p className={styles.sectionSub}>You don&apos;t choose. It reveals itself.</p>
      </div>

      <div className={styles.grid}>
        {archetypes.map((archetype, index) => (
          <article
            key={archetype.id}
            className={`${styles.card} ${visibleItems.has(index) ? styles.visible : ''}`}
            data-archetype={index}
            style={{ transitionDelay: `${index * 0.15}s` }}
            onClick={() => setSelectedArchetype(archetype)}
            role="button"
            tabIndex={0}
            onKeyDown={(e) => e.key === 'Enter' && setSelectedArchetype(archetype)}
          >
            <div className={styles.imageWrapper}>
              <Image
                src={archetype.image}
                alt={archetype.title}
                fill
                className={styles.image}
                sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 25vw"
              />
              <div className={styles.imageAura} />
              <div className={styles.cardOverlay}>
                <span>Reveal</span>
              </div>
            </div>
            <div className={styles.info}>
              <h3 className={styles.title}>{archetype.title}</h3>
              <p className={styles.line}>{archetype.line}</p>
            </div>
          </article>
        ))}
      </div>

      {/* Archetype Detail Modal */}
      {selectedArchetype && (
        <div
          ref={modalRef}
          className={styles.modal}
          onClick={handleModalBackdropClick}
        >
          <div className={styles.modalContent}>
            <button
              className={styles.modalClose}
              onClick={() => setSelectedArchetype(null)}
              aria-label="Close"
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </button>

            <div className={styles.modalGrid}>
              <div className={styles.modalImage}>
                <Image
                  src={selectedArchetype.image}
                  alt={selectedArchetype.title}
                  fill
                  className={styles.image}
                />
              </div>

              <div className={styles.modalInfo}>
                <span className={styles.modalLabel}>{selectedArchetype.title}</span>
                <p className={styles.modalTagline}>{selectedArchetype.line}</p>

                <p className={styles.modalDescription}>
                  {selectedArchetype.description}
                </p>

                <div className={styles.modalTraits}>
                  <span className={styles.traitsLabel}>Signals</span>
                  <div className={styles.traitsList}>
                    {selectedArchetype.traits.map((trait) => (
                      <span key={trait} className={styles.trait}>{trait}</span>
                    ))}
                  </div>
                </div>

                {/* Stats Section */}
                <div className={styles.modalStats}>
                  <span className={styles.statsLabel}>Battle Stats (Bonus)</span>
                  <div className={styles.statGrid}>
                    {Object.entries(selectedArchetype.stats || { presence: 0, will: 0, force: 0, focus: 0 }).map(([key, value]) => (
                      <div key={key} className={styles.statRow}>
                        <span className={styles.statName}>{key}</span>
                        <div className={styles.statBarTrack}>
                          <div 
                            className={styles.statBarFill} 
                            style={{ width: `${(value / 50) * 100}%` }}
                          />
                        </div>
                        <span className={styles.statValue}>+{value}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className={styles.modalForged}>
                  <span className={styles.forgedLabel}>Forged By</span>
                  <p className={styles.forgedText}>{selectedArchetype.forgedBy}</p>
                </div>

                <button
                  className={styles.transformBtn}
                  onClick={() => handleTransformClick(selectedArchetype.id)}
                >
                  Reveal as {selectedArchetype.name}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  )
}