import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Check, Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import {
  usePublicPlans,
  formatPrice,
  PublicPlanVersion,
} from '../../hooks/usePublicPlans';

interface DynamicPricingCardsProps {
  className?: string;
}

const DynamicPricingCards: React.FC<DynamicPricingCardsProps> = ({ className = '' }) => {
  const { t } = useTranslation();
  const { data: plans, isLoading, error } = usePublicPlans();
  const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annual'>('monthly');

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-8 h-8 animate-spin text-brand-600" />
      </div>
    );
  }

  if (error || !plans) {
    return (
      <div className="text-center py-20 text-gray-500 dark:text-gray-400">
        {t('marketing.pricing.loadError', 'Unable to load pricing. Please try again later.')}
      </div>
    );
  }

  // Sort plans by display_order
  const sortedPlans = [...plans].sort(
    (a, b) => a.plan.display_order - b.plan.display_order
  );

  return (
    <div className={className}>
      {/* Billing Toggle */}
      <div className="flex justify-center mb-12">
        <div className="bg-gray-100 dark:bg-gray-800 p-1 rounded-lg inline-flex">
          <button
            onClick={() => setBillingPeriod('monthly')}
            className={`px-6 py-2 rounded-md text-sm font-medium transition-colors ${
              billingPeriod === 'monthly'
                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
            }`}
          >
            {t('marketing.pricing.monthly', 'Monthly')}
          </button>
          <button
            onClick={() => setBillingPeriod('annual')}
            className={`px-6 py-2 rounded-md text-sm font-medium transition-colors ${
              billingPeriod === 'annual'
                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
            }`}
          >
            {t('marketing.pricing.annual', 'Annual')}
            <span className="ml-2 text-xs text-green-600 dark:text-green-400 font-semibold">
              {t('marketing.pricing.savePercent', 'Save ~17%')}
            </span>
          </button>
        </div>
      </div>

      {/* Plans Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {sortedPlans.map((planVersion) => (
          <PlanCard
            key={planVersion.id}
            planVersion={planVersion}
            billingPeriod={billingPeriod}
          />
        ))}
      </div>
    </div>
  );
};

interface PlanCardProps {
  planVersion: PublicPlanVersion;
  billingPeriod: 'monthly' | 'annual';
}

const PlanCard: React.FC<PlanCardProps> = ({ planVersion, billingPeriod }) => {
  const { t } = useTranslation();
  const { plan, is_most_popular, show_price, marketing_features, trial_days } = planVersion;

  const price =
    billingPeriod === 'annual'
      ? planVersion.price_yearly_cents
      : planVersion.price_monthly_cents;

  const isEnterprise = !show_price || plan.code === 'enterprise';
  const isFree = price === 0 && plan.code === 'free';

  // Determine CTA
  const ctaLink = isEnterprise ? '/contact' : `/signup?plan=${plan.code}`;
  const ctaText = isEnterprise
    ? t('marketing.pricing.contactSales', 'Contact Sales')
    : isFree
    ? t('marketing.pricing.getStartedFree', 'Get Started Free')
    : t('marketing.pricing.startTrial', 'Start Free Trial');

  if (is_most_popular) {
    return (
      <div className="relative flex flex-col p-6 bg-brand-600 rounded-2xl shadow-xl shadow-brand-600/20 transform lg:scale-105 z-10">
        {/* Most Popular Badge */}
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-brand-500 text-white text-xs font-semibold rounded-full whitespace-nowrap">
          {t('marketing.pricing.mostPopular', 'Most Popular')}
        </div>

        {/* Header */}
        <div className="mb-4">
          <h3 className="text-lg font-bold text-white mb-1">{plan.name}</h3>
          <p className="text-brand-100 text-sm">{plan.description}</p>
        </div>

        {/* Price */}
        <div className="mb-4">
          {isEnterprise ? (
            <span className="text-3xl font-bold text-white">
              {t('marketing.pricing.custom', 'Custom')}
            </span>
          ) : (
            <>
              <span className="text-4xl font-bold text-white">
                {formatPrice(price)}
              </span>
              <span className="text-brand-200 ml-1 text-sm">
                {billingPeriod === 'annual'
                  ? t('marketing.pricing.perYear', '/year')
                  : t('marketing.pricing.perMonth', '/month')}
              </span>
            </>
          )}
          {trial_days > 0 && !isFree && (
            <div className="mt-1 text-xs text-brand-100">
              {t('marketing.pricing.trialDays', '{{days}}-day free trial', {
                days: trial_days,
              })}
            </div>
          )}
        </div>

        {/* Features */}
        <ul className="flex-1 space-y-2 mb-6">
          {marketing_features.map((feature, index) => (
            <li key={index} className="flex items-start gap-2">
              <Check className="h-4 w-4 text-brand-200 flex-shrink-0 mt-0.5" />
              <span className="text-white text-sm">{feature}</span>
            </li>
          ))}
        </ul>

        {/* CTA */}
        <Link
          to={ctaLink}
          className="block w-full py-3 px-4 text-center text-sm font-semibold text-brand-600 bg-white rounded-xl hover:bg-brand-50 transition-colors"
        >
          {ctaText}
        </Link>
      </div>
    );
  }

  return (
    <div className="relative flex flex-col p-6 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-sm">
      {/* Header */}
      <div className="mb-4">
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">
          {plan.name}
        </h3>
        <p className="text-gray-500 dark:text-gray-400 text-sm">
          {plan.description}
        </p>
      </div>

      {/* Price */}
      <div className="mb-4">
        {isEnterprise ? (
          <span className="text-3xl font-bold text-gray-900 dark:text-white">
            {t('marketing.pricing.custom', 'Custom')}
          </span>
        ) : (
          <>
            <span className="text-4xl font-bold text-gray-900 dark:text-white">
              {formatPrice(price)}
            </span>
            <span className="text-gray-500 dark:text-gray-400 ml-1 text-sm">
              {billingPeriod === 'annual'
                ? t('marketing.pricing.perYear', '/year')
                : t('marketing.pricing.perMonth', '/month')}
            </span>
          </>
        )}
        {trial_days > 0 && !isFree && (
          <div className="mt-1 text-xs text-brand-600 dark:text-brand-400">
            {t('marketing.pricing.trialDays', '{{days}}-day free trial', {
              days: trial_days,
            })}
          </div>
        )}
        {isFree && (
          <div className="mt-1 text-xs text-green-600 dark:text-green-400">
            {t('marketing.pricing.freeForever', 'Free forever')}
          </div>
        )}
      </div>

      {/* Features */}
      <ul className="flex-1 space-y-2 mb-6">
        {marketing_features.map((feature, index) => (
          <li key={index} className="flex items-start gap-2">
            <Check className="h-4 w-4 text-brand-600 dark:text-brand-400 flex-shrink-0 mt-0.5" />
            <span className="text-gray-700 dark:text-gray-300 text-sm">{feature}</span>
          </li>
        ))}
      </ul>

      {/* CTA */}
      <Link
        to={ctaLink}
        className={`block w-full py-3 px-4 text-center text-sm font-semibold rounded-xl transition-colors ${
          isFree
            ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600'
            : 'bg-brand-50 dark:bg-brand-900/30 text-brand-600 hover:bg-brand-100 dark:hover:bg-brand-900/50'
        }`}
      >
        {ctaText}
      </Link>
    </div>
  );
};

export default DynamicPricingCards;
