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

interface PlanOverviewSlideProps {
  isAdmin: boolean;
  licenseNotice?: LicenseNotice;
  loginEnabled?: boolean;
}

const DEFAULT_FREE_TIER_LIMIT = 5;

const PlanOverviewTitle: React.FC<{ isAdmin: boolean }> = ({ isAdmin }) => {
  const { t } = useTranslation();
  return (
    <>
      {isAdmin
        ? t("onboarding.planOverview.adminTitle", "Admin Overview")
        : t("onboarding.planOverview.userTitle", "Plan Overview")}
    </>
  );
};

const AdminOverviewBody: React.FC<{
  freeTierLimit: number;
  loginEnabled: boolean;
}> = ({ freeTierLimit, loginEnabled }) => {
  const adminBodyKey = loginEnabled
    ? "onboarding.planOverview.adminBodyLoginEnabled"
    : "onboarding.planOverview.adminBodyLoginDisabled";

  const defaultValue = loginEnabled
    ? "As an admin, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge."
    : "Once you enable login mode, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge.";

  return (
    <Trans
      i18nKey={adminBodyKey}
      values={{ freeTierLimit }}
      components={{ strong: <strong /> }}
      defaults={defaultValue}
    />
  );
};

const UserOverviewBody: React.FC = () => {
  const { t } = useTranslation();
  return (
    <span>
      {t(
        "onboarding.planOverview.userBody",
        "Invite teammates, assign roles, and keep your documents organized in one secure workspace. Enable login mode whenever you're ready to grow beyond solo use.",
      )}
    </span>
  );
};

const PlanOverviewBody: React.FC<{
  isAdmin: boolean;
  freeTierLimit: number;
  loginEnabled: boolean;
}> = ({ isAdmin, freeTierLimit, loginEnabled }) =>
  isAdmin ? (
    <AdminOverviewBody
      freeTierLimit={freeTierLimit}
      loginEnabled={loginEnabled}
    />
  ) : (
    <UserOverviewBody />
  );

export default function PlanOverviewSlide({
  isAdmin,
  licenseNotice,
  loginEnabled = false,
}: PlanOverviewSlideProps): SlideConfig {
  const freeTierLimit = licenseNotice?.freeTierLimit ?? DEFAULT_FREE_TIER_LIMIT;

  return {
    key: isAdmin ? "admin-overview" : "plan-overview",
    title: <PlanOverviewTitle isAdmin={isAdmin} />,
    body: (
      <PlanOverviewBody
        isAdmin={isAdmin}
        freeTierLimit={freeTierLimit}
        loginEnabled={loginEnabled}
      />
    ),
    background: {
      gradientStops: isAdmin ? ["#4F46E5", "#0EA5E9"] : ["#F97316", "#EF4444"],
      circles: UNIFIED_CIRCLE_CONFIG,
    },
  };
}
