import React from 'react';
import { Trans } from 'react-i18next';
import { SlideConfig, LicenseNotice } from '@app/types/types';
import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
import i18n from '@app/i18n';

interface ServerLicenseSlideProps {
  licenseNotice?: LicenseNotice;
}

const DEFAULT_FREE_TIER_LIMIT = 5;

export default function ServerLicenseSlide({ licenseNotice }: ServerLicenseSlideProps = {}): SlideConfig {
  const freeTierLimit = licenseNotice?.freeTierLimit ?? DEFAULT_FREE_TIER_LIMIT;
  const totalUsers = licenseNotice?.totalUsers ?? null;
  const isOverLimit = licenseNotice?.isOverLimit ?? false;
  const formattedTotalUsers = totalUsers != null ? totalUsers.toLocaleString() : null;
  const overLimitUserCopy = formattedTotalUsers ?? `more than ${freeTierLimit}`;
  const title = isOverLimit
    ? i18n.t('onboarding.serverLicense.overLimitTitle', 'Server License Needed')
    : i18n.t('onboarding.serverLicense.freeTitle', 'Server License');
  const key = isOverLimit ? 'server-license-over-limit' : 'server-license';

  const overLimitBody = (
    <Trans
      i18nKey="onboarding.serverLicense.overLimitBody"
      values={{ freeTierLimit, overLimitUserCopy }}
      components={{
        strong: <strong />,
      }}
      defaults="Our licensing permits up to <strong>{{freeTierLimit}}</strong> users for free per server. You have <strong>{{overLimitUserCopy}}</strong> Stirling users. To continue uninterrupted, upgrade to the Stirling Server plan - <strong>unlimited seats</strong>, PDF text editing, and full admin control for $99/server/mo."
    />
  );

  const freeBody = (
    <Trans
      i18nKey="onboarding.serverLicense.freeBody"
      values={{ freeTierLimit }}
      components={{
        strong: <strong />,
      }}
      defaults="Our <strong>Open-Core</strong> licensing permits up to <strong>{{freeTierLimit}}</strong> users for free per server. To scale uninterrupted, we recommend the Stirling Server plan - <strong>unlimited seats</strong> and <strong>SSO support</strong> for $99/server/mo."
    />
  );

  const body = isOverLimit ? overLimitBody : freeBody;

  return {
    key,
    title,
    body,
    background: {
      gradientStops: isOverLimit ? ['#F472B6', '#8B5CF6'] : ['#F97316', '#F59E0B'],
      circles: UNIFIED_CIRCLE_CONFIG,
    },
  };
}


