import type { WidgetTranslations } from '../i18n';

interface QuotaBlockedViewProps {
  status: 'no_subscription' | 'quota_exhausted' | 'subscription_inactive' | 'free_tier_exhausted' | 'visitor_rate_limited';
  planName: string | null;
  cooldownMinutesRemaining?: number;
  onClose: () => void;
  t: WidgetTranslations['quota'];
  customContent?: {
    title?: string;
    message?: string;
    buttonLabel?: string;
    buttonUrl?: string;
  };
}

export function QuotaBlockedView({ status, cooldownMinutesRemaining, onClose, t, customContent }: QuotaBlockedViewProps) {
  const getContent = () => {
    switch (status) {
      case 'no_subscription':
        return {
          icon: (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          ),
          title: t.noSubscriptionTitle,
          message: t.noSubscriptionMessage,
        };

      case 'quota_exhausted':
        return {
          icon: (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <line x1="12" y1="8" x2="12" y2="12" />
              <line x1="12" y1="16" x2="12.01" y2="16" />
            </svg>
          ),
          title: customContent?.title || t.limitReachedTitle,
          message: customContent?.message || t.limitReachedMessage,
        };

      case 'subscription_inactive':
        return {
          icon: (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <line x1="15" y1="9" x2="9" y2="15" />
              <line x1="9" y1="9" x2="15" y2="15" />
            </svg>
          ),
          title: t.temporarilyUnavailableTitle,
          message: t.temporarilyUnavailableMessage,
        };

      case 'free_tier_exhausted':
        return {
          icon: (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <line x1="12" y1="8" x2="12" y2="12" />
              <line x1="12" y1="16" x2="12.01" y2="16" />
            </svg>
          ),
          title: t.freeTierExhaustedTitle,
          message: t.freeTierExhaustedMessage,
        };

      case 'visitor_rate_limited':
        return {
          icon: (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
          ),
          title: t.visitorLimitReachedTitle,
          message: t.visitorLimitReachedMessage(cooldownMinutesRemaining),
        };
    }
  };

  const content = getContent();

  return (
    <div className="aisthetix-quota-blocked">
      <div className="aisthetix-quota-blocked-icon">{content.icon}</div>

      <h3>{content.title}</h3>
      <p className="aisthetix-quota-blocked-message">{content.message}</p>


      <div className="aisthetix-quota-blocked-actions">
        <button
          type="button"
          onClick={() => {
            if (customContent?.buttonUrl) {
              window.location.assign(customContent.buttonUrl);
              return;
            }
            onClose();
          }}
          className="aisthetix-btn aisthetix-btn-primary"
        >
          {customContent?.buttonLabel || (status === 'quota_exhausted' ? t.continueShopping : t.close)}
        </button>
      </div>
    </div>
  );
}