import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Code2 } from 'lucide-react';

export interface TokenInspectorProps {
  children: React.ReactNode;
  tokens: string[]; // e.g. ["--colors-primary", "--border-radius-md", "glassmorphism"]
}

export function TokenInspector({ children, tokens }: TokenInspectorProps) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="relative group w-fit"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className={`transition-all duration-300 ${isHovered ? 'ring-2 ring-primary/30 rounded-xl' : ''}`}>
        {children}
      </div>

      <AnimatePresence>
        {isHovered && (
          <motion.div
            initial={{ opacity: 0, y: 10, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 5, scale: 0.95 }}
            transition={{ duration: 0.15 }}
            className="absolute top-full left-1/2 -translate-x-1/2 mt-3 z-floatingPanel pointer-events-none"
          >
            <div className="bg-surface/95 backdrop-blur-xl border border-border/80 rounded-xl p-3 shadow-2xl flex flex-col gap-2 min-w-[200px]">
              <div className="flex items-center gap-2 text-xs font-bold text-text-muted uppercase tracking-wider border-b border-border/50 pb-1.5 mb-1">
                <Code2 className="w-3.5 h-3.5" /> Design Tokens
              </div>
              <ul className="space-y-1.5">
                {tokens.map((token, idx) => {
                  const isVar = token.startsWith('--');
                  const value = isVar ? getComputedStyle(document.body).getPropertyValue(token) : null;
                  
                  return (
                    <li key={idx} className="flex flex-col gap-0.5">
                      <span className="text-[10px] text-text font-mono bg-background/50 px-1.5 py-0.5 rounded text-left">
                        {token}
                      </span>
                      {value && (
                        <div className="flex items-center gap-1.5 pl-1.5">
                          {token.includes('color') && (
                            <div className="w-2.5 h-2.5 rounded-full shadow-inner border border-border/50 shrink-0" style={{ backgroundColor: value }} />
                          )}
                          <span className="text-[10px] text-text-muted font-mono opacity-80">{value.trim()}</span>
                        </div>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}