import { HelpCircle } from 'lucide-react'
import { useState } from 'react'
import { HELP_TEXTS, type HelpText } from '../help/helpTexts'

interface HelpTooltipProps {
  helpKey?: string
  help?: HelpText
  position?: 'top' | 'right' | 'bottom' | 'left'
  size?: number
}

export function HelpTooltip({
  helpKey,
  help: directHelp,
  position = 'right',
  size = 14,
}: HelpTooltipProps) {
  const [visible, setVisible] = useState(false)
  const help = directHelp ?? (helpKey ? HELP_TEXTS[helpKey] : undefined)

  if (!help) return null

  const tooltipPositionStyle: React.CSSProperties = (() => {
    switch (position) {
      case 'top':
        return { bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 6 }
      case 'bottom':
        return { top: '100%', left: '50%', transform: 'translateX(-50%)', marginTop: 6 }
      case 'left':
        return { right: '100%', top: '50%', transform: 'translateY(-50%)', marginRight: 6 }
      case 'right':
      default:
        return { left: '100%', top: '50%', transform: 'translateY(-50%)', marginLeft: 6 }
    }
  })()

  return (
    <span
      className="relative inline-flex items-center"
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      <HelpCircle
        size={size}
        className="text-content-muted hover:text-content-secondary transition-colors cursor-help"
      />

      {visible && (
        <div
          className="absolute z-50 rounded-lg border shadow-lg p-3 text-sm"
          style={{
            ...tooltipPositionStyle,
            backgroundColor: 'var(--color-bg-surface, var(--color-surface, #fff))',
            borderColor: 'var(--color-border-default, #e5e7eb)',
            color: 'var(--color-text-content, var(--color-content, #111827))',
            maxWidth: 280,
            minWidth: 180,
            whiteSpace: 'normal',
            pointerEvents: 'none',
          }}
        >
          <p className="font-semibold mb-1" style={{ color: 'var(--color-text-content, inherit)' }}>
            {help.title}
          </p>
          <p className="text-xs leading-relaxed" style={{ color: 'var(--color-content-secondary, #6b7280)' }}>
            {help.body}
          </p>
          {help.unit && help.range && (
            <p className="text-xs mt-1" style={{ color: 'var(--color-content-muted, #9ca3af)' }}>
              Range: {help.range[0]}–{help.range[1]} {help.unit}
            </p>
          )}
          {help.recommendation && (
            <p
              className="text-xs mt-1.5 px-2 py-1 rounded"
              style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)', color: 'var(--color-status-success-text, #065f46)' }}
            >
              Recommended: {help.recommendation}
            </p>
          )}
          {help.warning && (
            <p
              className="text-xs mt-1.5 px-2 py-1 rounded"
              style={{ backgroundColor: 'rgba(245, 158, 11, 0.1)', color: 'var(--color-status-warning-text, #92400e)' }}
            >
              Warning: {help.warning}
            </p>
          )}
        </div>
      )}
    </span>
  )
}

export default HelpTooltip
