'use client';

import { useState, createContext, useContext, type ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface TooltipContextValue {
  open: boolean;
  setOpen: (open: boolean) => void;
  side: 'top' | 'bottom' | 'left' | 'right';
}

const TooltipContext = createContext<TooltipContextValue | null>(null);

function useTooltipContext() {
  const context = useContext(TooltipContext);
  if (!context) return { open: false, setOpen: () => {}, side: 'top' as const };
  return context;
}

interface TooltipProps {
  children?: ReactNode;
  content?: ReactNode;
  side?: 'top' | 'bottom' | 'left' | 'right';
  defaultOpen?: boolean;
}

export function Tooltip({ children, content, side = 'top', defaultOpen = false }: TooltipProps) {
  const [internalOpen, setInternalOpen] = useState(defaultOpen);

  if (content !== undefined) {
    return (
      <span
        className="relative inline-flex"
        onMouseEnter={() => setInternalOpen(true)}
        onMouseLeave={() => setInternalOpen(false)}
        onFocus={() => setInternalOpen(true)}
        onBlur={() => setInternalOpen(false)}
      >
        {children}
        {internalOpen && (
          <span
            role="tooltip"
            className={cn(
              'pointer-events-none absolute z-50 whitespace-nowrap rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-popover dark:bg-slate-700',
              side === 'bottom' && 'left-1/2 top-full mt-2 -translate-x-1/2',
              side === 'left' && 'right-full top-1/2 mr-2 -translate-y-1/2',
              side === 'right' && 'left-full top-1/2 ml-2 -translate-y-1/2',
              side === 'top' && 'bottom-full left-1/2 mb-2 -translate-x-1/2',
            )}
          >
            {content}
          </span>
        )}
      </span>
    );
  }

  return (
    <TooltipContext.Provider value={{ open: internalOpen, setOpen: setInternalOpen, side }}>
      <span
        className="relative inline-flex"
        onMouseEnter={() => setInternalOpen(true)}
        onMouseLeave={() => setInternalOpen(false)}
        onFocus={() => setInternalOpen(true)}
        onBlur={() => setInternalOpen(false)}
      >
        {children}
      </span>
    </TooltipContext.Provider>
  );
}

export function TooltipTrigger({ children, asChild = false }: { children: ReactNode; asChild?: boolean }) {
  if (asChild) {
    return <>{children}</>;
  }
  return <>{children}</>;
}

function tooltipPositionClasses(side: string): string {
  switch (side) {
    case 'bottom':
      return 'left-1/2 top-full mt-2 -translate-x-1/2';
    case 'left':
      return 'right-full top-1/2 mr-2 -translate-y-1/2';
    case 'right':
      return 'left-full top-1/2 ml-2 -translate-y-1/2';
    case 'top':
    default:
      return 'bottom-full left-1/2 mb-2 -translate-x-1/2';
  }
}

export function TooltipContent({ children, side, className }: { children: ReactNode; side?: 'top' | 'bottom' | 'left' | 'right'; className?: string }) {
  const { open, side: contextSide } = useTooltipContext();
  const finalSide = side || contextSide;

  if (!open) return null;

  return (
    <span
      role="tooltip"
      className={cn(
        'pointer-events-none absolute z-50 whitespace-nowrap rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-popover dark:bg-slate-700',
        tooltipPositionClasses(finalSide),
        className,
      )}
    >
      {children}
    </span>
  );
}