import React from 'react';
import { Card, Badge, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { PlanFeature } from '@app/services/licenseService';

interface PlanWithFeatures {
  name: string;
  features: PlanFeature[];
  popular?: boolean;
  tier?: string;
}

interface FeatureComparisonTableProps {
  plans: PlanWithFeatures[];
  currentTier?: 'free' | 'server' | 'enterprise' | null;
}

const FeatureComparisonTable: React.FC<FeatureComparisonTableProps> = ({ plans, currentTier }) => {
  const { t } = useTranslation();

  return (
    <Card padding="lg" radius="md" withBorder style={{ marginTop: '1rem' }}>
      <Text size="lg" fw={600} mb="md">
        {t('plan.featureComparison', 'Feature Comparison')}
      </Text>

      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ borderBottom: '2px solid var(--mantine-color-gray-3)' }}>
              <th style={{ textAlign: 'left', padding: '0.75rem' }}>
                {t('plan.feature.title', 'Feature')}
              </th>
              {plans.map((plan, index) => (
                <th
                  key={plan.tier || plan.name || index}
                  style={{
                    textAlign: 'center',
                    padding: '0.75rem',
                    minWidth: '8rem',
                    position: 'relative'
                  }}
                >
                  {plan.name}
                  {plan.popular && !(plan.tier === 'server' && currentTier === 'enterprise') && (
                    <Badge
                      color="blue"
                      variant="filled"
                      size="xs"
                      style={{
                        position: 'absolute',
                        top: '0.5rem',
                        right: '0.5rem',
                      }}
                    >
                      {t('plan.popular', 'Popular')}
                    </Badge>
                  )}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {plans[0]?.features.map((_, featureIndex) => (
              <tr
                key={featureIndex}
                style={{ borderBottom: '1px solid var(--mantine-color-gray-3)' }}
              >
                <td style={{ padding: '0.75rem' }}>
                  {plans[0].features[featureIndex].name}
                </td>
                {plans.map((plan, planIndex) => (
                  <td key={planIndex} style={{ textAlign: 'center', padding: '0.75rem' }}>
                    {plan.features[featureIndex]?.included ? (
                      <Text c="green" fw={600} size="lg">
                        ✓
                      </Text>
                    ) : (
                      <Text c="gray" size="sm">
                        −
                      </Text>
                    )}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
};

export default FeatureComparisonTable;
