"use client";
import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Info, ExternalLink } from 'lucide-react';
import { SCIENTIFIC_TERMS } from '../lib/data/scientificTerms';
import { useSettingsStore } from '../lib/store/settingsStore';

interface TooltipProps {
  termKey: string;
  children: React.ReactNode;
  onWikiNavigate?: (id: string) => void;
}

export default function Tooltip({ termKey, children, onWikiNavigate }: TooltipProps) {
  const [isVisible, setIsVisible] = useState(false);
  const scientificTerms = useSettingsStore(state => state.scientificTerms);
  const termData = scientificTerms[termKey] || SCIENTIFIC_TERMS[termKey];

  if (!termData) return <>{children}</>;

  return (
    <span 
      className="relative inline-block group cursor-help border-b border-dotted border-canina-blue/40"
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
    >
      {children}
      
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0, y: 10, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 10, scale: 0.95 }}
            className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-72 p-5 bg-white text-medical-gray-900 rounded-2xl shadow-2xl border border-medical-gray-200 z-[100] text-sm"
            dir="rtl"
          >
            <div className="flex items-center gap-2 mb-2 text-canina-blue">
              <Info className="w-4 h-4" />
              <span className="font-black text-[11px] uppercase tracking-widest text-canina-blue">دانشنامه علمی کنینا</span>
            </div>
            <h5 className="font-black text-base text-medical-gray-900 mb-2 leading-snug">{termData.term}</h5>
            <p className="text-medical-gray-600 text-xs leading-relaxed mb-4 font-bold">
              {termData.definition}
            </p>
            {termData.wikiId && (
              <button 
                onClick={(e) => {
                  e.stopPropagation();
                  onWikiNavigate?.(termData.wikiId!);
                }}
                className="flex items-center justify-between text-canina-blue hover:text-blue-700 transition-colors text-xs font-black cursor-pointer pt-2 border-t border-medical-gray-100 w-full"
              >
                <span>مطالعه مقاله کامل</span>
                <ExternalLink className="w-3.5 h-3.5" />
              </button>
            )}
            {/* Arrow */}
            <div className="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-white" />
          </motion.div>
        )}
      </AnimatePresence>
    </span>
  );
}