import React from 'react';
import { useTranslation } from 'react-i18next';

interface FeatureComparison {
  key: string;
  name: string;
  name_es?: string;
  category: string;
  starter: boolean;
  professional: boolean;
  enterprise: boolean;
  tooltip?: string;
  tooltip_es?: string;
}

interface CategoryInfo {
  icon: string;
  name: string;
  name_es?: string;
}

interface PricingComparisonTableProps {
  features: FeatureComparison[];
  categories: Record<string, CategoryInfo>;
  className?: string;
}

/**
 * PricingComparisonTable - Full feature comparison across all tiers
 * Expandable table showing all features side-by-side
 */
export const PricingComparisonTable: React.FC<PricingComparisonTableProps> = ({
  features,
  categories,
  className = '',
}) => {
  const { i18n } = useTranslation();
  const currentLang = i18n.language;

  // Group features by category
  const featuresByCategory = features.reduce((acc, feature) => {
    if (!acc[feature.category]) {
      acc[feature.category] = [];
    }
    acc[feature.category].push(feature);
    return acc;
  }, {} as Record<string, FeatureComparison[]>);

  const renderCheckmark = (hasFeature: boolean) => {
    if (hasFeature) {
      return (
        <svg
          className="w-5 h-5 text-green-500 mx-auto"
          fill="currentColor"
          viewBox="0 0 20 20"
        >
          <path
            fillRule="evenodd"
            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
            clipRule="evenodd"
          />
        </svg>
      );
    }
    return (
      <svg
        className="w-5 h-5 text-gray-300 mx-auto"
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path
          fillRule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clipRule="evenodd"
        />
      </svg>
    );
  };

  return (
    <div className={`overflow-x-auto ${className}`}>
      <table className="w-full border-collapse bg-white rounded-lg shadow-sm">
        <thead>
          <tr className="bg-gray-50 border-b border-gray-200">
            <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900 sticky left-0 bg-gray-50">
              {currentLang === 'es' ? 'Funcionalidad' : 'Feature'}
            </th>
            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900">
              Starter
            </th>
            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900 bg-orange-50">
              Professional
              <span className="ml-2 text-xs bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full">
                {currentLang === 'es' ? 'Más Popular' : 'Most Popular'}
              </span>
            </th>
            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900">
              Enterprise
            </th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(featuresByCategory).map(([categoryKey, categoryFeatures]) => {
            const category = categories[categoryKey];
            if (!category) return null;

            const categoryName = currentLang === 'es' && category.name_es
              ? category.name_es
              : category.name;

            return (
              <React.Fragment key={categoryKey}>
                {/* Category Header */}
                <tr className="bg-gray-100 border-t border-gray-200">
                  <td
                    colSpan={4}
                    className="px-6 py-3 text-sm font-semibold text-gray-700 sticky left-0 bg-gray-100"
                  >
                    <div className="flex items-center gap-2">
                      <span className="text-lg" role="img" aria-label={categoryName}>
                        {category.icon}
                      </span>
                      <span>{categoryName}</span>
                    </div>
                  </td>
                </tr>

                {/* Category Features */}
                {categoryFeatures.map((feature, index) => {
                  const featureName = currentLang === 'es' && feature.name_es
                    ? feature.name_es
                    : feature.name;
                  const tooltip = currentLang === 'es' && feature.tooltip_es
                    ? feature.tooltip_es
                    : feature.tooltip;

                  return (
                    <tr
                      key={feature.key}
                      className={`border-b border-gray-100 hover:bg-gray-50 ${
                        index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
                      }`}
                      title={tooltip}
                    >
                      <td className="px-6 py-3 text-sm text-gray-700 sticky left-0 bg-inherit">
                        {featureName}
                        {tooltip && (
                          <span className="ml-1 text-gray-400 text-xs">ℹ️</span>
                        )}
                      </td>
                      <td className="px-6 py-3 text-center">
                        {renderCheckmark(feature.starter)}
                      </td>
                      <td className="px-6 py-3 text-center bg-orange-50/30">
                        {renderCheckmark(feature.professional)}
                      </td>
                      <td className="px-6 py-3 text-center">
                        {renderCheckmark(feature.enterprise)}
                      </td>
                    </tr>
                  );
                })}
              </React.Fragment>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default PricingComparisonTable;
