import React from 'react';

import { formatCurrency } from '@/packages/shared/src/utils';
import { PiggyBankIcon } from 'lucide-react';
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 { 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,
}: {
  accountBenefitStatistics: AccountBenefitStatistics;
}) => {
  const {
    i18n: { language },
  } = useTranslation();

  return (
    <div className="flex h-full w-full flex-col gap-2 sm:flex-row">
      <Card className="relative flex flex-row">
        <div className="p-6">
          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
            <PiggyBankIcon className="h-[32px] w-[32px] stroke-orange-400 stroke-2" />
          </div>
          <StatisticsCardTitle className="mt-4 text-xl font-bold">
            <Trans i18nKey="teams:benefitStatistics.budget.volume" />
          </StatisticsCardTitle>
          <StatisticsValue>
            {formatCurrency({
              value: accountBenefitStatistics.periodTotal,
              locale: language,
              currencyCode: 'EUR',
            })}
          </StatisticsValue>
        </div>
      </Card>

      <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.data.totalSum" />
          </StatisticsCardTitle>
          <StatisticsValue>
            {formatCurrency({
              value: accountBenefitStatistics.orders.totalSum,
              locale: language,
              currencyCode: 'EUR',
            })}
          </StatisticsValue>
        </StatisticsCard>

        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.analysis" />
          </StatisticsCardTitle>
          <StatisticsValue>{accountBenefitStatistics.orders.analysesSum} €</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;