import React from "react";
import { blendColors, createGradientFromColors } from "../../../utils/colorUtils";

/**
 * TagColorIndicator Component
 *
 * Displays tag colors as visual indicators for collections.
 * Shows colored dots and can create colored borders for icons.
 *
 * @param {Object} props
 * @param {Array} props.tags - Array of tag objects with color property
 * @param {string} props.variant - Display variant: 'dots', 'border', 'both' (default: 'both')
 * @param {string} props.size - Size: 'sm', 'md', 'lg' (default: 'md')
 * @param {string} props.className - Additional CSS classes
 * @param {Function} props.children - Render function that receives border styles
 */
export default function TagColorIndicator({
  tags = [],
  variant = "both",
  size = "md",
  className = "",
  children
}) {
  // Filter out invalid tags and extract colors
  const colors = tags
    .filter(tag => tag && tag.color)
    .map(tag => tag.color);

  if (colors.length === 0) {
    // No tags - render children without any styling
    return children ? children({}) : null;
  }

  // Size configurations for dots
  const dotSizes = {
    sm: "w-2 h-2",
    md: "w-2.5 h-2.5",
    lg: "w-3 h-3"
  };

  // Size configurations for border width
  const borderWidths = {
    sm: "2px",
    md: "3px",
    lg: "4px"
  };

  // Create blended color for single border
  const blendedColor = blendColors(colors);

  // Create gradient for multiple colors
  const gradient = createGradientFromColors(colors);

  // Create border style based on number of colors
  const getBorderStyle = () => {
    if (colors.length === 1) {
      return {
        borderColor: colors[0],
        borderWidth: borderWidths[size],
        borderStyle: 'solid'
      };
    } else {
      // Use gradient border for multiple colors
      return {
        borderWidth: borderWidths[size],
        borderStyle: 'solid',
        borderImage: `${gradient} 1`,
        borderImageSlice: 1
      };
    }
  };

  const borderStyle = getBorderStyle();

  // Render dots
  const renderDots = () => {
    if (variant === 'border') return null;

    // Limit to first 5 tags for visual clarity
    const visibleColors = colors.slice(0, 5);
    const remainingCount = colors.length - visibleColors.length;

    return (
      <div className={`flex items-center gap-1 ${className}`}>
        {visibleColors.map((color, index) => (
          <div
            key={index}
            className={`${dotSizes[size]} rounded-full flex-shrink-0`}
            style={{ backgroundColor: color }}
            title={tags[index]?.name || 'Tag'}
          />
        ))}
        {remainingCount > 0 && (
          <span className="text-xs text-gray-500 ml-0.5">
            +{remainingCount}
          </span>
        )}
      </div>
    );
  };

  // If children is provided, it's likely an icon wrapper
  if (children && variant !== 'dots') {
    return (
      <>
        {children(borderStyle)}
        {variant === 'both' && renderDots()}
      </>
    );
  }

  // Just render dots
  return renderDots();
}

/**
 * CollectionIconWithBorder Component
 *
 * Wraps a collection icon with a colored border based on tags.
 * This is a convenience wrapper for the common use case.
 *
 * @param {Object} props
 * @param {Array} props.tags - Array of tag objects
 * @param {React.ReactNode} props.children - Icon component to wrap
 * @param {string} props.size - Border size: 'sm', 'md', 'lg'
 * @param {string} props.className - Additional CSS classes
 */
export function CollectionIconWithBorder({
  tags = [],
  children,
  size = "md",
  className = ""
}) {
  const colors = tags
    .filter(tag => tag && tag.color)
    .map(tag => tag.color);

  if (colors.length === 0) {
    return <div className={className}>{children}</div>;
  }

  const borderWidths = {
    sm: "2px",
    md: "3px",
    lg: "4px"
  };

  const gradient = createGradientFromColors(colors);

  return (
    <div
      className={`rounded-xl ${className}`}
      style={{
        background: gradient,
        padding: borderWidths[size]
      }}
    >
      <div className="bg-white rounded-lg w-full h-full">
        {children}
      </div>
    </div>
  );
}
