'use client'

import React, { useState, useMemo } from 'react'
import { motion, useSpring, useMotionValue, useTransform } from 'framer-motion'

const SEEDS = [15, 29, 31, 44, 59, 62, 77, 81, 95, 102, 119, 121]

export default function PrecisionInfinity() {
  const mapX = useMotionValue(0)
  const mapY = useMotionValue(0)

  // HYDRAULIC PHYSICS: 
  // High damping (60) ensures the movement is perfectly linear and smooth
  const springConfig = { stiffness: 12, damping: 60, mass: 4.5 }
  const x = useSpring(mapX, springConfig)
  const y = useSpring(mapY, springConfig)

  // 32x32 Grid (1,024 Tiles)
  const gridCells = useMemo(() => Array.from({ length: 1024 }), [])

  return (
    <div className="relative h-screen w-full overflow-hidden bg-[#000] flex items-center justify-center select-none cursor-grab active:cursor-grabbing">
      
      {/* SOFT FOCUS SYSTEM: 
          Reduced blur intensity (2px) and widened the sharp center (40%)
      */}
      <div className="absolute inset-0 z-50 pointer-events-none backdrop-blur-[2px] [mask-image:radial-gradient(circle_at_center,transparent_40%,black_100%)]" />
      
      {/* MINIMAL VIGNETTE: 
          Reduced shadow spread from 150px to 60px to open up the side view
      */}
      <div className="absolute inset-0 z-40 pointer-events-none shadow-[inset_0_0_60px_rgba(0,0,0,0.8)]" />
      <div className="absolute inset-0 z-40 pointer-events-none bg-[radial-gradient(circle_at_center,transparent_60%,#000_160%)] opacity-60" />

      {/* TACTICAL HUD */}
      <div className="absolute top-10 left-10 z-[60] mix-blend-difference border-l border-white/20 pl-4 py-1">
        <h1 className="text-white text-[10px] tracking-[0.8em] font-medium uppercase opacity-50">Precision.Archive</h1>
      </div>

      <motion.div 
        className="relative z-30 w-full h-full"
        drag
        onDrag={(_, info) => {
          // Maintaining the heavy weighted input
          mapX.set(mapX.get() + info.delta.x * 0.85)
          mapY.set(mapY.get() + info.delta.y * 0.85)
        }}
        style={{ willChange: "transform" }}
      >
        {gridCells.map((_, i) => (
          <VirtualTile 
            key={i} 
            index={i} 
            baseX={x} 
            baseY={y} 
          />
        ))}
      </motion.div>
    </div>
  )
}

function VirtualTile({ index, baseX, baseY }: any) {
  const [loaded, setLoaded] = useState(false)
  
  const gridSize = 32
  const col = index % gridSize
  const row = Math.floor(index / gridSize)
  
  // Sharp Architecture
  const width = 165
  const height = 210
  const gap = 6 

  const stepX = width + gap
  const stepY = height + gap
  const totalWidth = gridSize * stepX
  const totalHeight = gridSize * stepY

  // SEAMLESS INFINITY MATH
  const tx = useTransform(baseX, (v) => {
    const rawX = (v as number) + (col - gridSize / 2) * stepX
    return ((rawX + totalWidth * 1000) % totalWidth) - totalWidth / 2
  })

  const ty = useTransform(baseY, (v) => {
    const rawY = (v as number) + (row - gridSize / 2) * stepY
    return ((rawY + totalHeight * 1000) % totalHeight) - totalHeight / 2
  })

  return (
    <motion.div
      style={{ x: tx, y: ty }}
      className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
    >
      <div className="relative w-[165px] h-[210px] bg-neutral-950 rounded-[1px] overflow-hidden border border-white/[0.06] shadow-xl">
        
        {/* Rapid Skeleton */}
        <div className={`absolute inset-0 bg-neutral-900 transition-opacity duration-300 ${loaded ? 'opacity-0' : 'opacity-100'}`} />
        
        <img 
          src={`https://picsum.photos/seed/${SEEDS[index % SEEDS.length] + index}/400/500`} 
          onLoad={() => setLoaded(true)}
          className={`w-full h-full object-cover brightness-[0.85] transition-opacity duration-700 pointer-events-none ${loaded ? 'opacity-100' : 'opacity-0'}`}
          draggable={false}
          loading="lazy"
        />
        
        {/* Industrial Glass Glint */}
        <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] via-transparent to-black/20 pointer-events-none" />
      </div>
    </motion.div>
  )
}