'use client';

import { useState } from 'react';
import { Tag } from '../../types/api';

interface TagDisplayProps {
  tag: Tag;
  size?: 'sm' | 'md' | 'lg';
  showAliasesTooltip?: boolean;
  clickable?: boolean;
  onClick?: (tag: Tag) => void;
  className?: string;
}

export default function TagDisplay({ 
  tag, 
  size = 'md', 
  showAliasesTooltip = true,
  clickable = false,
  onClick,
  className = ''
}: TagDisplayProps) {
  const [showTooltip, setShowTooltip] = useState(false);
  
  const sizeClasses = {
    sm: 'px-2 py-1 text-xs',
    md: 'px-3 py-1 text-sm',
    lg: 'px-4 py-2 text-base'
  };

  const baseClasses = `
    inline-flex items-center gap-1 rounded-full font-medium transition-all
    ${sizeClasses[size]}
    ${clickable ? 'cursor-pointer hover:scale-105' : ''}
    ${className}
  `;

  // Determine tag styling based on color
  const tagStyle = tag.color ? {
    backgroundColor: tag.color + '20', // Add 20% opacity
    borderColor: tag.color,
    color: tag.color
  } : {};

  const defaultClasses = !tag.color ? 
    'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600' : 
    'border';

  const handleClick = () => {
    if (clickable && onClick) {
      onClick(tag);
    }
  };

  const handleMouseEnter = () => {
    if (showAliasesTooltip && tag.aliases && tag.aliases.length > 0) {
      setShowTooltip(true);
    }
  };

  const handleMouseLeave = () => {
    setShowTooltip(false);
  };

  return (
    <div className="relative inline-block">
      <span
        className={`${baseClasses} ${defaultClasses}`}
        style={tag.color ? tagStyle : {}}
        onClick={handleClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        title={tag.description || undefined}
      >
        {tag.name}
        {(tag.aliasCount ?? 0) > 0 && (
          <span className="text-xs opacity-75">+{tag.aliasCount}</span>
        )}
      </span>

      {/* Tooltip for aliases */}
      {showTooltip && showAliasesTooltip && tag.aliases && tag.aliases.length > 0 && (
        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 z-50">
          <div className="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-lg px-3 py-2 max-w-xs">
            <div className="font-medium mb-1">{tag.name}</div>
            <div className="border-t border-gray-700 dark:border-gray-300 pt-1">
              <div className="text-gray-300 dark:text-gray-600 mb-1">Aliases:</div>
              {tag.aliases.map((alias, index) => (
                <div key={alias.id} className="text-gray-100 dark:text-gray-800">
                  {alias.aliasName}
                  {index < tag.aliases!.length - 1 && ', '}
                </div>
              ))}
            </div>
            {/* Tooltip arrow */}
            <div className="absolute top-full left-1/2 transform -translate-x-1/2">
              <div className="border-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}