import React, { use } from 'react';

import { redirect } from 'next/navigation';

import { formatCurrency } from '@/packages/shared/src/utils';
import { Database } from '@/packages/supabase/src/database.types';
import { PiggyBankIcon, Settings } from 'lucide-react';
import { useTranslation } from 'react-i18next';

import { createPath, pathsConfig } from '@kit/shared/config';
import { Card, CardTitle } from '@kit/ui/card';
import { cn } from '@kit/ui/lib/utils';
import { Button } from '@kit/ui/shadcn/button';
import { Trans } from '@kit/ui/trans';

interface TeamAccountBenefitStatisticsProps {
  employeeCount: number;
  accountSlug: string;
  companyParams: Database['medreport']['Tables']['company_params']['Row'];
}

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 = ({
  employeeCount,
  accountSlug,
  companyParams,
}: TeamAccountBenefitStatisticsProps) => {
  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">
          <Button
            onClick={() =>
              redirect(createPath(pathsConfig.app.accountBilling, accountSlug))
            }
            variant="outline"
            className="absolute top-1 right-1 p-3"
          >
            <Settings />
          </Button>
          <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>
          <p className="mt-4 text-sm font-medium">
            <Trans i18nKey="teams:benefitStatistics.budget.title" />
          </p>
          <h3 className="text-2xl">
            <Trans
              i18nKey="teams:benefitStatistics.budget.balance"
              values={{
                balance: formatCurrency({
                  value: 11800,
                  locale: language,
                  currencyCode: 'EUR',
                }),
              }}
            />
          </h3>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.budget.volume"
              values={{
                volume: formatCurrency({
                  value:
                    (Number(companyParams.benefit_amount) || 0) * employeeCount,
                  locale: language,
                  currencyCode: 'EUR',
                }),
              }}
            />
          </StatisticsDescription>
        </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.serviceSum" />
          </StatisticsCardTitle>
          <StatisticsValue>1800 €</StatisticsValue>
        </StatisticsCard>
        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.analysis" />
          </StatisticsCardTitle>
          <StatisticsValue>200 €</StatisticsValue>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.data.reservations"
              values={{ value: 36 }}
            />
          </StatisticsDescription>
        </StatisticsCard>
        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.doctorsAndSpecialists" />
          </StatisticsCardTitle>
          <StatisticsValue>200 €</StatisticsValue>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.data.reservations"
              values={{ value: 44 }}
            />
          </StatisticsDescription>
        </StatisticsCard>
        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.researches" />
          </StatisticsCardTitle>
          <StatisticsValue>200 €</StatisticsValue>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.data.reservations"
              values={{ value: 40 }}
            />
          </StatisticsDescription>
        </StatisticsCard>
        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.eclinic" />
          </StatisticsCardTitle>
          <StatisticsValue>200 €</StatisticsValue>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.data.reservations"
              values={{ value: 34 }}
            />
          </StatisticsDescription>
        </StatisticsCard>

        <StatisticsCard>
          <StatisticsCardTitle>
            <Trans i18nKey="teams:benefitStatistics.data.healthResearchPlans" />
          </StatisticsCardTitle>
          <StatisticsValue>200 €</StatisticsValue>
          <StatisticsDescription>
            <Trans
              i18nKey="teams:benefitStatistics.data.serviceUsage"
              values={{ value: 46 }}
            />
          </StatisticsDescription>
        </StatisticsCard>
      </div>
    </div>
  );
};

export default TeamAccountBenefitStatistics;