bakery-ia/frontend/src/components/subscription/PlanComparisonTable.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Check, X, ChevronDown, ChevronUp, Sparkles } from 'lucide-react';
import { Card } from '../ui';
import type { PlanMetadata, SubscriptionTier } from '../../api';

type DisplayMode = 'inline' | 'modal';

interface PlanComparisonTableProps {
  plans: Record<SubscriptionTier, PlanMetadata>;
  currentTier?: SubscriptionTier;
  onSelectPlan?: (tier: SubscriptionTier) => void;
  mode?: DisplayMode;
  className?: string;
}

interface FeatureCategory {
  name: string;
  features: ComparisonFeature[];
}

interface ComparisonFeature {
  key: string;
  name: string;
  description?: string;
  starterValue: string | boolean;
  professionalValue: string | boolean;
  enterpriseValue: string | boolean;
  highlight?: boolean; // Highlight Professional-exclusive features
}

export const PlanComparisonTable: React.FC<PlanComparisonTableProps> = ({
  plans,
  currentTier,
  onSelectPlan,
  mode = 'inline',
  className = ''
}) => {
  const { t } = useTranslation('subscription');
  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['limits']));

  const toggleCategory = (category: string) => {
    const newExpanded = new Set(expandedCategories);
    if (newExpanded.has(category)) {
      newExpanded.delete(category);
    } else {
      newExpanded.add(category);
    }
    setExpandedCategories(newExpanded);
  };

  // Define feature categories with comparison data
  const featureCategories: FeatureCategory[] = [
    {
      name: t('categories.daily_operations'),
      features: [
        {
          key: 'inventory_management',
          name: t('features.inventory_management'),
          starterValue: true,
          professionalValue: true,
          enterpriseValue: true
        },
        {
          key: 'sales_tracking',
          name: t('features.sales_tracking'),
          starterValue: true,
          professionalValue: true,
          enterpriseValue: true
        },
        {
          key: 'production_planning',
          name: t('features.production_planning'),
          starterValue: true,
          professionalValue: true,
          enterpriseValue: true
        },
        {
          key: 'order_management',
          name: t('features.order_management'),
          starterValue: true,
          professionalValue: true,
          enterpriseValue: true
        },
        {
          key: 'supplier_management',
          name: t('features.supplier_management'),
          starterValue: true,
          professionalValue: true,
          enterpriseValue: true
        }
      ]
    },
    {
      name: t('categories.smart_forecasting'),
      features: [
        {
          key: 'basic_forecasting',
          name: t('features.basic_forecasting'),
          starterValue: '7 days',
          professionalValue: '90 days',
          enterpriseValue: '365 days',
          highlight: true
        },
        {
          key: 'demand_prediction',
          name: t('features.demand_prediction'),
          starterValue: true,
          professionalValue: true,
          enterpriseValue: true
        },
        {
          key: 'seasonal_patterns',
          name: t('features.seasonal_patterns'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'weather_data_integration',
          name: t('features.weather_data_integration'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'traffic_data_integration',
          name: t('features.traffic_data_integration'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'scenario_modeling',
          name: t('features.scenario_modeling'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'what_if_analysis',
          name: t('features.what_if_analysis'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        }
      ]
    },
    {
      name: t('categories.business_insights'),
      features: [
        {
          key: 'basic_reporting',
          name: t('features.basic_reporting'),
          starterValue: true,
          professionalValue: true,
          enterpriseValue: true
        },
        {
          key: 'advanced_analytics',
          name: t('features.advanced_analytics'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'profitability_analysis',
          name: t('features.profitability_analysis'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'waste_analysis',
          name: t('features.waste_analysis'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        }
      ]
    },
    {
      name: t('categories.multi_location'),
      features: [
        {
          key: 'multi_location_support',
          name: t('features.multi_location_support'),
          starterValue: '1',
          professionalValue: '3',
          enterpriseValue: t('limits.unlimited'),
          highlight: true
        },
        {
          key: 'location_comparison',
          name: t('features.location_comparison'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'inventory_transfer',
          name: t('features.inventory_transfer'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        }
      ]
    },
    {
      name: t('categories.integrations'),
      features: [
        {
          key: 'pos_integration',
          name: t('features.pos_integration'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'accounting_export',
          name: t('features.accounting_export'),
          starterValue: false,
          professionalValue: true,
          enterpriseValue: true,
          highlight: true
        },
        {
          key: 'api_access',
          name: 'API Access',
          starterValue: false,
          professionalValue: 'Basic',
          enterpriseValue: 'Full',
          highlight: true
        },
        {
          key: 'erp_integration',
          name: t('features.erp_integration'),
          starterValue: false,
          professionalValue: false,
          enterpriseValue: true
        },
        {
          key: 'sso_saml',
          name: t('features.sso_saml'),
          starterValue: false,
          professionalValue: false,
          enterpriseValue: true
        }
      ]
    }
  ];

  // Limits comparison
  const limitsCategory: FeatureCategory = {
    name: 'Limits & Quotas',
    features: [
      {
        key: 'users',
        name: t('limits.users'),
        starterValue: '5',
        professionalValue: '20',
        enterpriseValue: t('limits.unlimited'),
        highlight: true
      },
      {
        key: 'locations',
        name: t('limits.locations'),
        starterValue: '1',
        professionalValue: '3',
        enterpriseValue: t('limits.unlimited'),
        highlight: true
      },
      {
        key: 'products',
        name: t('limits.products'),
        starterValue: '50',
        professionalValue: '500',
        enterpriseValue: t('limits.unlimited'),
        highlight: true
      },
      {
        key: 'training_jobs',
        name: 'Training Jobs/Day',
        starterValue: '1',
        professionalValue: '5',
        enterpriseValue: t('limits.unlimited'),
        highlight: true
      },
      {
        key: 'forecasts',
        name: 'Forecasts/Day',
        starterValue: '10',
        professionalValue: '100',
        enterpriseValue: t('limits.unlimited'),
        highlight: true
      },
      {
        key: 'api_calls',
        name: 'API Calls/Hour',
        starterValue: '100',
        professionalValue: '1,000',
        enterpriseValue: '10,000',
        highlight: true
      }
    ]
  };

  const renderValue = (value: string | boolean, tierKey: string) => {
    const isProfessional = tierKey === 'professional';

    if (typeof value === 'boolean') {
      return value ? (
        <Check className={`w-5 h-5 mx-auto ${isProfessional ? 'text-emerald-500' : 'text-green-500'}`} />
      ) : (
        <X className="w-5 h-5 mx-auto text-gray-400" />
      );
    }

    return (
      <span className={`font-semibold ${isProfessional ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-700 dark:text-gray-300'}`}>
        {value}
      </span>
    );
  };

  const allCategories = [limitsCategory, ...featureCategories];

  // Conditional wrapper based on mode
  const Wrapper = mode === 'inline' ? Card : 'div';
  const wrapperProps = mode === 'inline' ? { className: `p-6 overflow-hidden ${className}` } : { className };

  return (
    <Wrapper {...wrapperProps}>
      {mode === 'inline' && (
        <div className="mb-6">
          <h2 className="text-2xl font-bold text-[var(--text-primary)] mb-2">
            {t('ui.compare_plans')}
          </h2>
          <p className="text-sm text-[var(--text-secondary)]">
            {t('ui.detailed_feature_comparison')}
          </p>
        </div>
      )}

      {/* Add padding-top to prevent Best Value badge from being cut off */}
      <div className="overflow-x-auto pt-6">
        <table className="w-full border-collapse">
          {/* Header */}
          <thead>
            <tr className="border-b-2 border-[var(--border-primary)]">
              <th className="text-left py-4 px-4 font-semibold text-[var(--text-primary)]">
                {t('ui.feature')}
              </th>
              <th className="text-center py-4 px-4 w-1/4">
                <div className="font-semibold text-[var(--text-primary)]">Starter</div>
                <div className="text-xs text-[var(--text-secondary)] mt-1">€49/mo</div>
              </th>
              <th className="text-center py-4 px-4 w-1/4 bg-gradient-to-b from-blue-50 to-blue-100/50 dark:from-blue-900/20 dark:to-blue-900/10 relative">
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 whitespace-nowrap">
                  <span className="bg-gradient-to-r from-emerald-500 to-green-600 text-white px-3 py-1 rounded-full text-xs font-bold shadow-lg flex items-center gap-1">
                    <Sparkles className="w-3 h-3" />
                    {t('ui.best_value')}
                  </span>
                </div>
                <div className="font-semibold text-blue-700 dark:text-blue-300">Professional</div>
                <div className="text-xs text-blue-600 dark:text-blue-400 mt-1 font-medium">€149/mo</div>
              </th>
              <th className="text-center py-4 px-4 w-1/4">
                <div className="font-semibold text-[var(--text-primary)]">Enterprise</div>
                <div className="text-xs text-[var(--text-secondary)] mt-1">€499/mo</div>
              </th>
            </tr>
          </thead>

          {/* Body with collapsible categories */}
          <tbody>
            {allCategories.map((category) => (
              <React.Fragment key={category.name}>
                {/* Category Header */}
                <tr
                  className="bg-[var(--bg-secondary)] border-t-2 border-[var(--border-primary)] cursor-pointer hover:bg-[var(--bg-primary)] transition-colors"
                  onClick={() => toggleCategory(category.name)}
                >
                  <td colSpan={4} className="py-3 px-4">
                    <div className="flex items-center justify-between">
                      <span className="font-bold text-[var(--text-primary)] uppercase text-sm tracking-wide">
                        {category.name}
                      </span>
                      {expandedCategories.has(category.name) ? (
                        <ChevronUp className="w-5 h-5 text-[var(--text-secondary)]" />
                      ) : (
                        <ChevronDown className="w-5 h-5 text-[var(--text-secondary)]" />
                      )}
                    </div>
                  </td>
                </tr>

                {/* Category Features */}
                {expandedCategories.has(category.name) && category.features.map((feature, idx) => (
                  <tr
                    key={feature.key}
                    className={`border-b border-[var(--border-primary)] hover:bg-[var(--bg-primary)] transition-colors ${
                      feature.highlight ? 'bg-blue-50/30 dark:bg-blue-900/10' : ''
                    }`}
                  >
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-2">
                        {feature.highlight && (
                          <Sparkles className="w-4 h-4 text-emerald-500 flex-shrink-0" />
                        )}
                        <span className="text-sm text-[var(--text-primary)]">{feature.name}</span>
                      </div>
                    </td>
                    <td className="py-3 px-4 text-center">
                      {renderValue(feature.starterValue, 'starter')}
                    </td>
                    <td className="py-3 px-4 text-center bg-blue-50/50 dark:bg-blue-900/5">
                      {renderValue(feature.professionalValue, 'professional')}
                    </td>
                    <td className="py-3 px-4 text-center">
                      {renderValue(feature.enterpriseValue, 'enterprise')}
                    </td>
                  </tr>
                ))}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>

      {/* Footer with CTA - only show in inline mode */}
      {mode === 'inline' && onSelectPlan && (
        <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="text-center">
            <button
              onClick={() => onSelectPlan('starter' as SubscriptionTier)}
              className="w-full px-6 py-3 border-2 border-[var(--color-primary)] text-[var(--color-primary)] rounded-lg font-semibold hover:bg-[var(--color-primary)] hover:text-white transition-colors"
            >
              {t('ui.choose_starter')}
            </button>
          </div>
          <div className="text-center">
            <button
              onClick={() => onSelectPlan('professional' as SubscriptionTier)}
              className="w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg font-semibold shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-blue-800 transition-all"
            >
              {t('ui.choose_professional')}
            </button>
          </div>
          <div className="text-center">
            <button
              onClick={() => onSelectPlan('enterprise' as SubscriptionTier)}
              className="w-full px-6 py-3 border-2 border-[var(--color-primary)] text-[var(--color-primary)] rounded-lg font-semibold hover:bg-[var(--color-primary)] hover:text-white transition-colors"
            >
              {t('ui.choose_enterprise')}
            </button>
          </div>
        </div>
      )}
    </Wrapper>
  );
};