import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Check } from 'lucide-react';

interface PricingCardProps {
  tier: 'free' | 'professional' | 'business' | 'enterprise';
  highlighted?: boolean;
  billingPeriod: 'monthly' | 'annual';
}

const PricingCard: React.FC<PricingCardProps> = ({
  tier,
  highlighted = false,
  billingPeriod,
}) => {
  const { t } = useTranslation();

  const tierData = {
    free: {
      price: 0,
      annualPrice: 0,
    },
    professional: {
      price: 29,
      annualPrice: 290,
    },
    business: {
      price: 79,
      annualPrice: 790,
    },
    enterprise: {
      price: 'custom',
      annualPrice: 'custom',
    },
  };

  const data = tierData[tier];
  const price = billingPeriod === 'annual' ? data.annualPrice : data.price;
  const isCustom = price === 'custom';

  // Get features array from i18n
  const features = t(`marketing.pricing.tiers.${tier}.features`, { returnObjects: true }) as string[];
  const transactionFee = t(`marketing.pricing.tiers.${tier}.transactionFee`);
  const trialInfo = t(`marketing.pricing.tiers.${tier}.trial`);

  if (highlighted) {
    return (
      <div className="relative flex flex-col p-8 bg-brand-600 rounded-2xl shadow-xl shadow-brand-600/20">
        {/* Most Popular Badge */}
        <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-brand-500 text-white text-sm font-semibold rounded-full whitespace-nowrap">
          {t('marketing.pricing.mostPopular')}
        </div>

        {/* Header */}
        <div className="mb-6">
          <h3 className="text-xl font-bold text-white mb-2">
            {t(`marketing.pricing.tiers.${tier}.name`)}
          </h3>
          <p className="text-brand-100">
            {t(`marketing.pricing.tiers.${tier}.description`)}
          </p>
        </div>

        {/* Price */}
        <div className="mb-6">
          {isCustom ? (
            <span className="text-4xl font-bold text-white">
              {t('marketing.pricing.tiers.enterprise.price')}
            </span>
          ) : (
            <>
              <span className="text-5xl font-bold text-white">${price}</span>
              <span className="text-brand-200 ml-2">
                {billingPeriod === 'annual' ? '/year' : t('marketing.pricing.perMonth')}
              </span>
            </>
          )}
          {trialInfo && (
            <div className="mt-2 text-sm text-brand-100">
              {trialInfo}
            </div>
          )}
        </div>

        {/* Features */}
        <ul className="flex-1 space-y-3 mb-8">
          {features.map((feature, index) => (
            <li key={index} className="flex items-start gap-3">
              <Check className="h-5 w-5 text-brand-200 flex-shrink-0 mt-0.5" />
              <span className="text-white">{feature}</span>
            </li>
          ))}
          <li className="flex items-start gap-3 pt-2 border-t border-brand-500">
            <span className="text-brand-200 text-sm">{transactionFee}</span>
          </li>
        </ul>

        {/* CTA */}
        {isCustom ? (
          <Link
            to="/contact"
            className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 transition-colors"
          >
            {t('marketing.pricing.contactSales')}
          </Link>
        ) : (
          <Link
            to="/signup"
            className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 transition-colors"
          >
            {t('marketing.pricing.getStarted')}
          </Link>
        )}
      </div>
    );
  }

  return (
    <div className="relative flex flex-col p-8 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700">
      {/* Header */}
      <div className="mb-6">
        <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
          {t(`marketing.pricing.tiers.${tier}.name`)}
        </h3>
        <p className="text-gray-500 dark:text-gray-400">
          {t(`marketing.pricing.tiers.${tier}.description`)}
        </p>
      </div>

      {/* Price */}
      <div className="mb-6">
        {isCustom ? (
          <span className="text-4xl font-bold text-gray-900 dark:text-white">
            {t('marketing.pricing.tiers.enterprise.price')}
          </span>
        ) : (
          <>
            <span className="text-5xl font-bold text-gray-900 dark:text-white">${price}</span>
            <span className="text-gray-500 dark:text-gray-400 ml-2">
              {billingPeriod === 'annual' ? '/year' : t('marketing.pricing.perMonth')}
            </span>
          </>
        )}
        {trialInfo && (
          <div className="mt-2 text-sm text-brand-600 dark:text-brand-400">
            {trialInfo}
          </div>
        )}
      </div>

      {/* Features */}
      <ul className="flex-1 space-y-3 mb-8">
        {features.map((feature, index) => (
          <li key={index} className="flex items-start gap-3">
            <Check className="h-5 w-5 text-brand-600 dark:text-brand-400 flex-shrink-0 mt-0.5" />
            <span className="text-gray-700 dark:text-gray-300">{feature}</span>
          </li>
        ))}
        <li className="flex items-start gap-3 pt-2 border-t border-gray-100 dark:border-gray-700">
          <span className="text-gray-500 dark:text-gray-400 text-sm">{transactionFee}</span>
        </li>
      </ul>

      {/* CTA */}
      {isCustom ? (
        <Link
          to="/contact"
          className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-xl hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
        >
          {t('marketing.pricing.contactSales')}
        </Link>
      ) : (
        <Link
          to="/signup"
          className="block w-full py-3.5 px-4 text-center text-base font-semibold text-brand-600 bg-brand-50 dark:bg-brand-900/30 rounded-xl hover:bg-brand-100 dark:hover:bg-brand-900/50 transition-colors"
        >
          {t('marketing.pricing.getStarted')}
        </Link>
      )}
    </div>
  );
};

export default PricingCard;
