import React from 'react';
import { clsx } from 'clsx';
import { AlertTriangle, TrendingUp } from 'lucide-react';
import { Alert, Button } from '@/components/ui';
import { useSubscription } from '@/contexts/SubscriptionContext';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from '@/hooks/useI18n';

export interface LimitWarningProps {
  limitType: 'organizations' | 'users' | 'storage' | 'apiCalls';
  current: number;
  threshold?: number; // Percentage (0-100) at which to show warning
  showUpgradeButton?: boolean;
  className?: string;
}

/**
 * Component that shows a warning when approaching subscription limits
 */
export const LimitWarning = ({
  limitType,
  current,
  threshold = 80,
  showUpgradeButton = true,
  className,
}: LimitWarningProps) => {
  const { subscription, getRemainingLimit, isWithinLimits } = useSubscription();
  const navigate = useNavigate();
  const { t } = useTranslation();

  if (!subscription) return null;

  const limit = subscription.limits[limitType];
  if (limit === undefined || limit === -1) return null; // Unlimited

  const remaining = getRemainingLimit(limitType, current);
  const percentage = (current / limit) * 100;
  const isNearLimit = percentage >= threshold;
  const isAtLimit = !isWithinLimits(limitType, current);

  if (!isNearLimit && !isAtLimit) return null;

  const limitLabels = {
    organizations: 'organizations',
    users: 'team members',
    storage: 'storage',
    apiCalls: 'API calls',
  };

  const label = limitLabels[limitType];

  if (isAtLimit) {
    return (
      <Alert variant="error" className={clsx('mb-4', className)}>
        <AlertTriangle className="h-4 w-4" />
        <div className="flex-1">
          <h4 className="font-semibold">{t('paywall.limitReached')}</h4>
          <p className="text-sm mt-1">
            {t('paywall.limitReachedDescription', { label, limit })}
          </p>
        </div>
        {showUpgradeButton && (
          <Button variant="primary" size="sm" onClick={() => navigate('/billing')}>
            {t('paywall.upgradePlan')}
          </Button>
        )}
      </Alert>
    );
  }

  return (
    <Alert variant="warning" className={clsx('mb-4', className)}>
      <TrendingUp className="h-4 w-4" />
      <div className="flex-1">
        <h4 className="font-semibold">{t('paywall.approachingLimit')}</h4>
        <p className="text-sm mt-1">
          {t('paywall.approachingLimitDescription', {
            current,
            limit,
            label,
            percentage: Math.round(percentage),
            remaining
          })}
        </p>
      </div>
      {showUpgradeButton && (
          <Button variant="outline" size="sm" onClick={() => navigate('/billing')}>
            {t('paywall.viewPlans')}
          </Button>
      )}
    </Alert>
  );
};