import { X } from 'lucide-react';
import { PricingCard } from '@archer/ui/components';
import { mapDbPlanToCard } from '@archer/ui/utils';
import type { AvailablePlanResponse } from '@/infrastructure/http/api/subscription';
import type { MappedPricingPlan } from '@archer/ui/utils';
import { useTranslation } from '@/i18n/TranslationProvider';

interface PlanSelectionModalProps {
  plans: AvailablePlanResponse[];
  currentPlanId?: string;
  pendingPlanId?: string;
  /** Account's billing currency — drives the price shown on every card. */
  preferredCurrency?: string | null;
  onSelect: (mapped: MappedPricingPlan) => void;
  onClose: () => void;
}

export function PlanSelectionModal({
  plans,
  currentPlanId,
  pendingPlanId,
  preferredCurrency,
  onSelect,
  onClose,
}: PlanSelectionModalProps) {
  const { t, locale } = useTranslation();
  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/50 z-40 animate-fade-in"
        onClick={onClose}
        aria-hidden="true"
      />

      {/* Modal */}
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
        <div
          className="bg-card rounded-2xl border border-border shadow-2xl w-full max-w-5xl max-h-[90vh] overflow-y-auto pointer-events-auto animate-scale-in"
          onClick={(e) => e.stopPropagation()}
        >
          {/* Header */}
          <div className="flex items-center justify-between p-6 border-b border-border sticky top-0 bg-card rounded-t-2xl z-10">
            <div>
              <h2 className="text-xl font-semibold text-foreground">{t('subscription.changePlan')}</h2>
              <p className="text-sm text-muted-foreground mt-0.5">{t('subscription.choosePlan')}</p>
            </div>
            <button
              onClick={onClose}
              className="p-2 hover:bg-muted rounded-lg transition-colors"
              aria-label="Close"
            >
              <X className="w-5 h-5 text-muted-foreground" />
            </button>
          </div>

          {/* Plan Grid */}
          <div className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {plans.map((plan) => {
                const isCurrent = plan.id === currentPlanId;
                const isPending = plan.id === pendingPlanId;
                const mapped = mapDbPlanToCard(plan, locale, preferredCurrency ?? undefined);

                if (isCurrent) {
                  mapped.cta = t('subscription.currentPlan');
                  mapped.disabled = true;
                } else if (isPending) {
                  mapped.cta = t('subscription.completePayment');
                  mapped.popular = true;
                  mapped.badge = t('subscription.pendingPayment');
                } else if (plan.price === 0) {
                  mapped.cta = t('subscription.switchToFree');
                } else {
                  mapped.cta = t('subscription.selectPlan');
                }

                return (
                  <PricingCard
                    key={plan.id}
                    plan={mapped}
                    onActionClick={() => onSelect(mapped)}
                    className="h-full flex flex-col"
                  />
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}