import React from 'react';

import { formatCurrency } from '@/packages/shared/src/utils';
import { useTranslation } from 'react-i18next';

import { Card, CardTitle } from '@kit/ui/card';
import { cn } from '@kit/ui/lib/utils';
import { Trans } from '@kit/ui/trans';

import { TeamAccountBenefitExpensesOverview } from '../_lib/server/load-team-account-benefit-expenses-overview';
import { AccountBenefitStatistics } from '../_lib/server/load-team-account-benefit-statistics';

const StatisticsCard = ({ children }: { children: React.ReactNode }) => {
  return <Card className="p-4">{children}</Card>;
};

const StatisticsCardTitle = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return (
    <CardTitle className={cn('text-sm font-medium', className)}>
      {children}
    </CardTitle>
  );
};

const StatisticsDescription = ({ children }: { children: React.ReactNode }) => {
  return <p className="text-success text-xs">{children}</p>;
};

const StatisticsValue = ({ children }: { children: React.ReactNode }) => {
  return <h4 className="">{children}</h4>;
};

const TeamAccountBenefitStatistics = ({
  accountBenefitStatistics,
  expensesOverview,
}: {
  accountBenefitStatistics: AccountBenefitStatistics;
  expensesOverview: TeamAccountBenefitExpensesOverview;
}) => {
  const {
    i18n: { language },
  } = useTranslation();

  return (
    <div className="flex h-full w-full flex-col gap-2 sm:flex-row">
      <div className="grid flex-2 grid-cols-2 gap-2 sm:grid-cols-3 sm:grid-rows-2">
        <StatisticsCard>
          <StatisticsCardTitle className="text-lg font-bold">
            <Trans i18nKey="teams:benefitStatistics.budget.membersCount" />
          </StatisticsCardTitle>
          <StatisticsValue>
            {accountBenefitStatistics.companyAccountsCount}
          </StatisticsValue>
        </StatisticsCard>

        <StatisticsCard>
          <StatisticsCardTitle className="text-lg font-bold">
            <Trans i18nKey="teams:benefitStatistics.data.totalSum" />
          </StatisticsCardTitle>
          <StatisticsValue>
            {formatCurrency({
              value: accountBenefitStatistics.orders.totalSum,
              locale: language,
              currencyCode: 'EUR',
            })}
          </StatisticsValue>
        </StatisticsCard>

        <StatisticsCard>
          <StatisticsCardTitle className="text-lg font-bold">
            <Trans i18nKey="teams:benefitStatistics.data.currentMonthUsageTotal" />
          </StatisticsCardTitle>
          <StatisticsValue>
            {formatCurrency({
              value: expensesOverview.currentMonthUsageTotal,
              locale: language,
              currencyCode: 'EUR',
            })}
          </StatisticsValue>
        </StatisticsCard>

        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.analysis" />
          </StatisticsCardTitle>
          <StatisticsValue>
            {formatCurrency({
              value: accountBenefitStatistics.orders.analysesSum,
              locale: language,
              currencyCode: 'EUR',
            })}
          </StatisticsValue>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.data.reservations"
              values={{ value: accountBenefitStatistics.orders.analysesCount }}
            />
          </StatisticsDescription>
        </StatisticsCard>

        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.analysisPackages" />
          </StatisticsCardTitle>
          <StatisticsValue>
            {formatCurrency({
              value: accountBenefitStatistics.orders.analysisPackagesSum,
              locale: language,
              currencyCode: 'EUR',
            })}
          </StatisticsValue>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.data.analysisPackagesCount"
              values={{
                value: accountBenefitStatistics.orders.analysisPackagesCount,
              }}
            />
          </StatisticsDescription>
        </StatisticsCard>
      </div>
    </div>
  );
};

export default TeamAccountBenefitStatistics;