import BlurredCircle from '@/components/common/blurred-circle';
import DataTable from '@/components/common/data-table';
import { getImageUrl } from '@/utils/getImageUrl';
import { maskName } from '@/utils/strHelpers';
import { ReactNode } from 'react';

type Investor = {
  id: number;
  first_name: string;
  last_name: string;
  investments_sum_amount: number;
  profile?: { profile_photo?: string | null };
};

type RenderArgs = {
  podium: Investor[];
  topThree: Investor[];
  rest: Investor[];
  restLimited: Investor[];
  format: (amount: number | string) => string;
  toOrdinal: (n: number) => string;
};

type BackgroundProps = {
  colors?: {
    color1?: string;
    color2?: string;
  };
};

export type TopInvestorsVariantConfig = {
  sectionClass: string;
  containerClass: string;
  titleClass: string;

  showSubtitle?: boolean;
  subtitleClass?: string;

  background?: (props: BackgroundProps) => ReactNode;

  render: (args: RenderArgs) => ReactNode;
};

const MEDAL_IMAGES: Record<number, string> = {
  1: '/assets/1st.png',
  2: '/assets/2nd.png',
  3: '/assets/3rd.png',
};

export const TOP_INVESTORS_VARIANTS: Record<
  'variant1' | 'variant2',
  TopInvestorsVariantConfig
> = {
  variant1: {
    sectionClass:
      'relative bg-white md:pt-10 pb-12 font-inter md:pb-28 overflow-hidden md:overflow-visible',
    containerClass: 'relative z-10 container px-4 md:px-28',
    titleClass:
      'mb-10 text-center font-syne text-3xl font-bold md:mb-28 md:text-5xl',

    background: ({ colors }) => (
      <>
        <BlurredCircle
          color={colors?.color1 ?? '#EE6A2D'}
          className="top-[40%] left-[22%] z-1 hidden h-[456px] w-[456px] translate-x-1/2 -translate-y-1/2 blur-[130px] md:block"
        />
        <BlurredCircle
          color={colors?.color2 ?? '#F1FE92'}
          className="top-[50%] left-[35%] z-2 hidden h-[209px] w-[209px] translate-x-1/2 -translate-y-1/2 blur-[90px] md:block"
        />
      </>
    ),

    render: ({ podium, rest, format, toOrdinal }) => {
      return (
        <>
          <div className="relative z-10 flex h-96 items-end justify-center gap-2">
            {[1, 0, 2].map((index) => {
              const investor = podium[index];
              if (!investor) return null;

              const rank = index + 1;
              const height =
                rank === 1 ? 'h-full' : rank === 2 ? 'h-[80%]' : 'h-[60%]';

              return (
                <div
                  key={investor.id}
                  className={`flex ${height} w-36 flex-col items-center justify-between rounded-t-2xl border border-white bg-white/35 py-2`}
                >
                  <img
                    src={getImageUrl(investor.profile?.profile_photo ?? '')}
                    className="size-16 -translate-y-1/2 rounded-2xl object-cover"
                    alt={maskName(
                      `${investor.first_name} ${investor.last_name}`,
                    )}
                  />

                  <div className="flex flex-col items-center gap-1 pb-2">
                    <span className="text-sm font-medium text-black/70">
                      {maskName(`${investor.first_name} ${investor.last_name}`)}
                    </span>
                    <span className="text-3xl font-bold text-black/30">
                      {toOrdinal(rank)}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="mx-auto w-full max-w-2xl">
            {rest.length > 0 && (
              <div className="mx-auto mt-12 w-full max-w-2xl">
                <DataTable
                  data={rest}
                  rounded
                  shadow={false}
                  structure={[
                    {
                      accessorKey: 'position',
                      header: 'Position',
                      cell: ({ row }) => (
                        <span>{toOrdinal(row.index + 4)}</span>
                      ),
                    },
                    {
                      accessorKey: 'user',
                      header: 'User',
                      cell: ({ row }) => {
                        const user = row.original;
                        return (
                          <span>
                            {maskName(`${user.first_name} ${user.last_name}`)}
                          </span>
                        );
                      },
                    },
                    {
                      accessorKey: 'invested',
                      header: 'Invested',
                      cell: ({ row }) => (
                        <span>
                          {format(row.original.investments_sum_amount)}
                        </span>
                      ),
                    },
                  ]}
                />
              </div>
            )}
          </div>
        </>
      );
    },
  },

  variant2: {
    sectionClass: 'relative bg-white pt-10 pb-12 font-inter md:pb-28 z-60',
    containerClass: 'container px-4 md:px-28',
    titleClass:
      'text-center font-poppins text-2xl font-bold text-[#23262F] md:text-[40px]',

    showSubtitle: true,
    subtitleClass: 'mb-8 text-center text-[#353945] md:mb-20',

    render: ({ topThree, restLimited, format, toOrdinal }) => {
      return (
        <div className="flex flex-wrap content-center items-center gap-4">
          {topThree.map((investor, index) => {
            const rank = index + 1;

            return (
              <div
                key={investor.id}
                className="flex flex-1 items-center gap-4 rounded-2xl border border-[#F4F5F6] bg-white/50 p-6 shadow-[0_2.213px_8.851px_0_rgba(15,15,15,0.08)]"
              >
                <img
                  src={MEDAL_IMAGES[rank]}
                  alt={toOrdinal(rank)}
                  className="aspect-7/10 h-[60px] w-[42px] shrink-0 object-contain"
                />

                <div className="flex min-w-60 flex-col items-start gap-2">
                  <span className="font-semibold text-black">
                    {maskName(`${investor.first_name} ${investor.last_name}`)}
                  </span>

                  <span className="font-poppins text-xl font-bold text-[#23262F]">
                    {format(investor.investments_sum_amount)}
                  </span>
                </div>
              </div>
            );
          })}

          {restLimited.map((investor, index) => {
            const rank = index + 4;

            return (
              <div
                key={investor.id}
                className="flex flex-1 items-center justify-between gap-4 rounded-2xl border border-[#F4F5F6] bg-white/50 p-6 shadow-[0_2.213px_8.851px_0_rgba(15,15,15,0.08)]"
              >
                <div className="flex w-[241px] flex-col items-start gap-2">
                  <span className="font-semibold text-black">
                    {maskName(`${investor.first_name} ${investor.last_name}`)}
                  </span>

                  <span className="font-poppins text-xl font-bold text-[#23262F]">
                    {format(investor.investments_sum_amount)}
                  </span>
                </div>

                <span className="text-2xl font-bold text-[#23262F]">
                  {toOrdinal(rank)}
                </span>
              </div>
            );
          })}
        </div>
      );
    },
  },
};