import React from 'react';

interface Tab {
  id: string;
  label: string | React.ReactNode;
  icon?: React.ReactNode;
  disabled?: boolean;
}

interface TabGroupProps {
  tabs: Tab[];
  activeTab: string;
  onChange: (tabId: string) => void;
  /** Visual variant */
  variant?: 'default' | 'pills' | 'underline';
  /** Size variant */
  size?: 'sm' | 'md' | 'lg';
  /** Full width tabs */
  fullWidth?: boolean;
  /** Additional class name */
  className?: string;
  /** Color for active state */
  activeColor?: 'blue' | 'purple' | 'green' | 'brand';
}

const sizeClasses = {
  sm: 'px-3 py-1.5 text-xs',
  md: 'px-4 py-2 text-sm',
  lg: 'px-5 py-2.5 text-base',
};

const activeColorClasses = {
  blue: {
    active: 'bg-blue-600 text-white',
    pills: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
    underline: 'border-blue-600 text-blue-600 dark:text-blue-400',
  },
  purple: {
    active: 'bg-purple-600 text-white',
    pills: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
    underline: 'border-purple-600 text-purple-600 dark:text-purple-400',
  },
  green: {
    active: 'bg-green-600 text-white',
    pills: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
    underline: 'border-green-600 text-green-600 dark:text-green-400',
  },
  brand: {
    active: 'bg-brand-600 text-white',
    pills: 'bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300',
    underline: 'border-brand-600 text-brand-600 dark:text-brand-400',
  },
};

export const TabGroup: React.FC<TabGroupProps> = ({
  tabs,
  activeTab,
  onChange,
  variant = 'default',
  size = 'md',
  fullWidth = true,
  className = '',
  activeColor = 'blue',
}) => {
  const colorClasses = activeColorClasses[activeColor];

  if (variant === 'underline') {
    return (
      <div className={`flex border-b border-gray-200 dark:border-gray-700 ${className}`}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              onClick={() => !tab.disabled && onChange(tab.id)}
              disabled={tab.disabled}
              className={`${sizeClasses[size]} font-medium border-b-2 -mb-px transition-colors ${fullWidth ? 'flex-1' : ''} ${
                isActive
                  ? colorClasses.underline
                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300'
              } ${tab.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
            >
              <span className="flex items-center justify-center gap-2">
                {tab.icon}
                {tab.label}
              </span>
            </button>
          );
        })}
      </div>
    );
  }

  if (variant === 'pills') {
    return (
      <div className={`flex gap-2 ${className}`}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              onClick={() => !tab.disabled && onChange(tab.id)}
              disabled={tab.disabled}
              className={`${sizeClasses[size]} font-medium rounded-full transition-colors ${fullWidth ? 'flex-1' : ''} ${
                isActive
                  ? colorClasses.pills
                  : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
              } ${tab.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
            >
              <span className="flex items-center justify-center gap-2">
                {tab.icon}
                {tab.label}
              </span>
            </button>
          );
        })}
      </div>
    );
  }

  // Default variant - segmented control style
  return (
    <div
      className={`flex border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`}
    >
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id;
        return (
          <button
            key={tab.id}
            onClick={() => !tab.disabled && onChange(tab.id)}
            disabled={tab.disabled}
            className={`${sizeClasses[size]} font-medium transition-colors ${fullWidth ? 'flex-1' : ''} ${
              isActive
                ? colorClasses.active
                : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
            } ${tab.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
          >
            <span className="flex items-center justify-center gap-2">
              {tab.icon}
              {tab.label}
            </span>
          </button>
        );
      })}
    </div>
  );
};

export default TabGroup;
