'use client'

import { motion } from 'framer-motion'
import {
  SiNextdotjs,
  SiTypescript,
  SiFramer,
  SiReact,
  SiTailwindcss,
} from 'react-icons/si'
import type { ReactNode } from 'react'

type TechKey = 'next' | 'typescript' | 'framer' | 'react' | 'tailwind'

interface Tech {
  key: TechKey
  name: string
  version: string
}

const TECHS: Tech[] = [
  { key: 'next', name: 'NEXT.JS', version: 'v15.0' },
  { key: 'typescript', name: 'TYPESCRIPT', version: 'v5.4' },
  { key: 'framer', name: 'FRAMER MOTION', version: 'v11.0' },
  { key: 'react', name: 'REACT', version: 'v18.2' },
  { key: 'tailwind', name: 'TAILWIND CSS', version: 'v3.4' },
]

const LOGOS: Record<TechKey, ReactNode> = {
  next: <SiNextdotjs className="w-full h-full" />,
  typescript: <SiTypescript className="w-full h-full" />,
  framer: <SiFramer className="w-full h-full" />,
  react: <SiReact className="w-full h-full" />,
  tailwind: <SiTailwindcss className="w-full h-full" />,
}

export function CoreStack({ className }: { className?: string }) {
  return (
    <div className={`w-full flex flex-col items-center justify-center py-16 sm:py-24 select-none ${className ?? ''}`}>
      <div className="mb-8 sm:mb-10 flex flex-col items-center">
        <div className="flex items-center gap-3 mb-2">
          <div className="h-[1px] w-8 bg-gradient-to-r from-transparent to-foreground/20" />
          <span className="text-[9px] tracking-[0.5em] text-foreground/50 font-black uppercase">
            Core Stack
          </span>
          <div className="h-[1px] w-8 bg-gradient-to-l from-transparent to-foreground/20" />
        </div>
        <h2 className="text-foreground text-2xl font-extralight tracking-tighter">
          Engineered <span className="text-foreground/40 font-serif italic">Solutions</span>
        </h2>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-6 lg:gap-8" style={{ perspective: '1200px' }}>
        {TECHS.map((t) => (
          <TechItem key={t.key} tech={t} />
        ))}
      </div>
    </div>
  )
}

function TechItem({ tech }: { tech: Tech }) {
  return (
    <motion.div
      className="relative flex flex-col items-center"
      initial="initial"
      whileHover="hover"
    >
      <div className="absolute bottom-[98%] flex flex-col items-center pointer-events-none z-30">
        <motion.div
          className="flex flex-col items-center"
          style={{ willChange: 'transform, opacity' }}
          variants={{
            initial: { opacity: 0, y: 10, scale: 0.9 },
            hover: { opacity: 1, y: 0, scale: 1 },
          }}
          transition={{ type: 'spring', stiffness: 350, damping: 25 }}
        >
          <div className="relative px-4 py-1.5 rounded-full bg-background border border-border overflow-hidden shadow-[0_0_20px_rgba(0,0,0,0.08)] whitespace-nowrap flex items-center gap-2">
            <span className="text-[9px] font-bold tracking-[0.15em] text-foreground">
              {tech.name}
            </span>
            <span className="text-[7px] font-mono text-foreground/70">{tech.version}</span>
            <motion.div
              className="absolute inset-0 bg-gradient-to-r from-transparent via-foreground/10 to-transparent w-1/2 -skew-x-12"
              animate={{ x: ['-100%', '200%'] }}
              transition={{ repeat: Infinity, duration: 2, ease: 'linear' }}
            />
            {/* Sharp bottom accent line - razor thin */}
            <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-px bg-gradient-to-r from-transparent via-foreground to-transparent" style={{ height: '1px' }} />
          </div>
          <motion.div
            className="w-[1px] bg-gradient-to-b from-foreground via-foreground/10 to-transparent"
            style={{ originY: 0 }}
            variants={{
              initial: { height: 0 },
              hover: { height: 35 },
            }}
            transition={{ duration: 0.3, ease: 'easeOut' }}
          />
        </motion.div>
      </div>

      <motion.div
        variants={{
          initial: { rotateX: 0, y: 0, rotateY: 0, scale: 1 },
          hover: { 
            rotateX: 55, 
            rotateY: 0,
            y: 10,
            scale: 1,
            transition: { type: 'spring', stiffness: 150, damping: 20 }
          }
        }}
        style={{ 
            transformStyle: 'preserve-3d',
            willChange: 'transform' 
        }}
        className="group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center cursor-pointer"
      >
        <div className="absolute inset-0 rounded-[10px] border border-black/10 dark:border-white/20 bg-[#f8f8f8] dark:bg-[#1a1a1a] p-[2px] shadow-[0_1px_2px_rgba(0,0,0,0.15)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.6)] transition-all duration-500 group-hover:border-transparent group-hover:bg-transparent group-hover:shadow-none" />
        
        <div className="absolute inset-0 rounded-xl border border-transparent transition-all duration-500 group-hover:border-x-transparent group-hover:border-t-transparent group-hover:border-b-foreground/60 group-hover:rounded-none group-hover:scale-x-110" />
        
        <div className="absolute inset-[5px] rounded-lg border border-dotted border-transparent transition-colors duration-300 group-hover:border-foreground/[0.15]" />
        
        <motion.div 
          className="absolute inset-[2px] rounded-[7px] border border-black/5 dark:border-white/10 bg-white dark:bg-[#0e0e0e] overflow-hidden flex items-center justify-center z-10 transition-all duration-500 group-hover:inset-[4px] group-hover:border-foreground/20 group-hover:bg-background"
          style={{ willChange: 'transform' }}
          variants={{
            initial: { translateZ: 0, y: 0 },
            hover: { 
              translateZ: 45, 
              y: -5,
              transition: { type: 'spring', stiffness: 300, damping: 20 }
            }
          }}
        >
          <div className="w-6 h-6 sm:w-7 sm:h-7 text-foreground/70 transition-colors duration-300 group-hover:text-foreground">
            {LOGOS[tech.key]}
          </div>
        </motion.div>

        {([0, 90, 180, 270] as number[]).map((angle, i) => (
          <motion.div
            key={i}
            className="absolute w-1.5 h-1.5 border-t border-l border-transparent group-hover:border-foreground/40 transition-all duration-500 z-20"
            style={{ 
              rotate: `${angle}deg`,
              top: '-1px',
              left: '-1px',
              transformOrigin: '28px 28px'
            }}
          />
        ))}
      </motion.div>
    </motion.div>
  )
}

export default CoreStack