"use client"

import React, { useState, useEffect } from "react"
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
import { Terminal, Copy, Check, Circle } from "lucide-react"

export default function HolographicCodeTerminal() {
  const x = useMotionValue(0)
  const y = useMotionValue(0)

  const mouseX = useSpring(x, { stiffness: 500, damping: 100 })
  const mouseY = useSpring(y, { stiffness: 500, damping: 100 })

  const rotateX = useTransform(mouseY, [-0.5, 0.5], ["15deg", "-15deg"])
  const rotateY = useTransform(mouseX, [-0.5, 0.5], ["-15deg", "15deg"])

  function onMouseMove({ currentTarget, clientX, clientY }: React.MouseEvent) {
    const { left, top, width, height } = currentTarget.getBoundingClientRect()
    x.set((clientX - left) / width - 0.5)
    y.set((clientY - top) / height - 0.5)
  }

  function onMouseLeave() {
    x.set(0)
    y.set(0)
  }

  const [copied, setCopied] = useState(false)
  const copyCode = () => {
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-neutral-950 perspective-[1000px]">
      <motion.div
        style={{
          rotateX,
          rotateY,
          transformStyle: "preserve-3d",
        }}
        onMouseMove={onMouseMove}
        onMouseLeave={onMouseLeave}
        className="relative flex h-[400px] w-[600px] flex-col overflow-hidden rounded-xl border border-white/10 bg-neutral-900/50 shadow-2xl backdrop-blur-md"
      >
        {/* Glass Reflection */}
        <div className="absolute inset-0 bg-gradient-to-tr from-white/5 to-transparent opacity-0 transition-opacity duration-500 hover:opacity-100 pointer-events-none z-50" />
        
        {/* Header */}
        <div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-4 py-3">
          <div className="flex items-center gap-2">
            <div className="flex gap-1.5">
              <div className="h-3 w-3 rounded-full bg-red-500/80" />
              <div className="h-3 w-3 rounded-full bg-amber-500/80" />
              <div className="h-3 w-3 rounded-full bg-emerald-500/80" />
            </div>
            <div className="ml-4 flex items-center gap-2 rounded-md bg-black/20 px-2 py-1 text-xs text-neutral-400">
              <Terminal className="h-3 w-3" />
              <span>velocity-ui.tsx</span>
            </div>
          </div>
          <button 
            onClick={copyCode}
            className="flex items-center gap-1 rounded p-1 text-xs text-neutral-500 hover:bg-white/10 hover:text-white transition-colors"
          >
            {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
          </button>
        </div>

        {/* Code Content */}
        <div className="flex-1 overflow-hidden p-6 font-mono text-sm">
          <div className="flex flex-col gap-1">
            <Line number={1} content={<span className="text-pink-400">import</span>} rest={<span className="text-white"> {`{ motion }`} </span>} from={<span className="text-cyan-400">"framer-motion"</span>} />
            <Line number={2} content={<span className="text-pink-400">import</span>} rest={<span className="text-white"> React </span>} from={<span className="text-cyan-400">"react"</span>} />
            <Line number={3} />
            <Line number={4} content={<span className="text-purple-400">export default function</span>} rest={<span className="text-yellow-300"> PremiumCard()</span>} />
            <Line number={5} content={<span className="text-white">{`  return (`}</span>} />
            <Line number={6} content={<span className="text-white">{`    <motion.div`}</span>} />
            <Line number={7} content={<span className="text-cyan-400">      initial</span>} rest={<span className="text-white">{`={{ opacity: 0 }}`}</span>} />
            <Line number={8} content={<span className="text-cyan-400">      animate</span>} rest={<span className="text-white">{`={{ opacity: 1 }}`}</span>} />
            <Line number={9} content={<span className="text-white">{`      className="glass-panel"`}</span>} />
            <Line number={10} content={<span className="text-white">{`    >`}</span>} />
            <Line number={11} content={<span className="text-white">{`      <h1 className="glow">Velocity UI</h1>`}</span>} />
            <Line number={12} content={<span className="text-white">{`    </motion.div>`}</span>} />
            <Line number={13} content={<span className="text-white">{`  )`}</span>} />
            <Line number={14} content={<span className="text-white">{`}`}</span>} />
          </div>
          
          {/* Glowing Cursor */}
          <motion.div
            animate={{ opacity: [1, 0] }}
            transition={{ duration: 0.8, repeat: Infinity }}
            className="mt-1 h-4 w-2 bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.8)]"
          />
        </div>

        {/* Gradient Glow Behind */}
        <div className="absolute -inset-1 -z-10 rounded-xl bg-gradient-to-br from-cyan-500/20 via-purple-500/20 to-pink-500/20 blur-xl opacity-50" />
      </motion.div>
    </div>
  )
}

function Line({ number, content, rest, from }: { number: number, content?: React.ReactNode, rest?: React.ReactNode, from?: React.ReactNode }) {
  return (
    <div className="flex items-center gap-4 text-neutral-500">
      <span className="w-6 select-none text-right opacity-50">{number}</span>
      <div className="flex-1 pl-2">
        {content}
        {rest}
        {from && <span className="text-pink-400"> from </span>}
        {from}
      </div>
    </div>
  )
}