import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { X } from 'lucide-react';
import { PlanComparisonTable } from './PlanComparisonTable';
import type { PlanMetadata, SubscriptionTier } from '../../api';

interface PricingComparisonModalProps {
  isOpen: boolean;
  onClose: () => void;
  plans: Record<SubscriptionTier, PlanMetadata>;
  currentTier?: SubscriptionTier;
  onSelectPlan?: (tier: SubscriptionTier) => void;
}

export const PricingComparisonModal: React.FC<PricingComparisonModalProps> = ({
  isOpen,
  onClose,
  plans,
  currentTier,
  onSelectPlan
}) => {
  const { t } = useTranslation('subscription');
  // Close on escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      // Prevent background scroll
      document.body.style.overflow = 'hidden';
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  const handlePlanSelect = (tier: SubscriptionTier) => {
    onSelectPlan?.(tier);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="relative bg-[var(--bg-primary)] rounded-2xl shadow-2xl w-full max-w-6xl max-h-[90vh] overflow-hidden mx-4">
        {/* Header */}
        <div className="sticky top-0 z-10 bg-[var(--bg-primary)] border-b-2 border-[var(--border-primary)] px-6 py-4 flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-bold text-[var(--text-primary)]">
              {t('ui.compare_all_features')}
            </h2>
            <p className="text-sm text-[var(--text-secondary)] mt-1">
              {t('ui.detailed_comparison')}
            </p>
          </div>
          <button
            onClick={onClose}
            className="w-10 h-10 rounded-full hover:bg-[var(--bg-secondary)] flex items-center justify-center transition-colors text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
            aria-label="Close modal"
          >
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* Content */}
        <div className="overflow-y-auto max-h-[calc(90vh-120px)] px-6 py-6">
          <PlanComparisonTable
            plans={plans}
            currentTier={currentTier}
            onSelectPlan={handlePlanSelect}
            mode="modal"
          />
        </div>

        {/* Footer */}
        <div className="sticky bottom-0 bg-[var(--bg-primary)] border-t-2 border-[var(--border-primary)] px-6 py-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button
              onClick={() => handlePlanSelect('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>
            <button
              onClick={() => handlePlanSelect('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>
            <button
              onClick={() => handlePlanSelect('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>
      </div>
    </div>
  );
};
