import { useState } from 'react'
import { Modal } from './Modal'
import { TOOLTIP_DEFINITIONS } from './tooltipDefinitions'
import type { TooltipTypeValues } from './tooltipDefinitions'
import styles from './Tooltip.module.css'

// Tooltip component for field explanations
interface TooltipProps {
  children: React.ReactNode
  type: TooltipTypeValues
}

export function Tooltip({ children, type }: TooltipProps) {
  const { title, description, lighthouseRelation, calculation, links } = TOOLTIP_DEFINITIONS[type]
  const [isHovered, setIsHovered] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 })

  const handleIconClick = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setIsHovered(false) // Hide hover tooltip when opening modal
    setIsModalOpen(true)
  }

  const handleMouseEnter = (e: React.MouseEvent) => {
    const rect = (e.target as HTMLElement).getBoundingClientRect()
    setTooltipPosition({
      top: rect.top - 10, // Position above the icon
      left: rect.left + rect.width / 2 // Center horizontally
    })
    setIsHovered(true)
  }

  return (
    <>
      <div className={styles.tooltipContainer}>
        {children}
        <span
          className={styles.tooltipIcon}
          onClick={handleIconClick}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={() => setIsHovered(false)}
        >
          ?
        </span>
      </div>

      {/* Hover tooltip - rendered as fixed positioned element */}
      {isHovered && !isModalOpen && (
        <div 
          className={styles.hoverTooltipFixed}
          style={{
            top: `${tooltipPosition.top}px`,
            left: `${tooltipPosition.left}px`
          }}
        >
          <div className={styles.tooltipTitle}>
            {title}
          </div>
          <div className={styles.tooltipDescription}>
            {description}
          </div>
          <div className={styles.tooltipHint}>
            Click for detailed information
          </div>
        </div>
      )}

      <div style={{ display: 'none' }}>
      </div>

      {/* Modal with detailed content */}
      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title={title}
      >
        <div className={styles.modalContent}>
          <div className={styles.modalDescription}>
            {description}
          </div>
          
          {lighthouseRelation && (
            <div className={styles.modalSection}>
              <div className={styles.modalSectionTitle}>
                🎯 Lighthouse Relationship
              </div>
              <div className={styles.modalSectionContent}>
                {lighthouseRelation}
              </div>
            </div>
          )}
          
          {calculation && (
            <div className={styles.modalSection}>
              <div className={styles.modalSectionTitle}>
                🧮 Calculation
              </div>
              <div className={styles.modalSectionContent}>
                {calculation}
              </div>
            </div>
          )}
          
          {links && links.length > 0 && (
            <div className={styles.modalSection}>
              <div className={styles.modalSectionTitle}>
                📚 Learn More
              </div>
              <div className={styles.modalLinks}>
                {links.map((link, index) => (
                  <a 
                    key={index}
                    href={link.url} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className={styles.modalLink}
                  >
                    🔗 {link.text}
                  </a>
                ))}
              </div>
            </div>
          )}
        </div>
      </Modal>
    </>
  )
}