// calculation.variants.tsx
import { Button } from '@/components/ui/button';
import {
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { ProfitResponse } from '@/hooks/use-profit-calculator';
import { TPlan } from '@/types/user/user-plans-type';
import { getProfitMessage } from '@/utils/getProfitMessage';
import { CaretRightIcon } from '@phosphor-icons/react';
import { ReactNode } from 'react';
import { CalculationProps } from '../sections/calculation-section';

type VariantRenderProps = {
  plans: TPlan[];
  profit?: ProfitResponse;
  format: (v: number) => string;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  form: any;
  isPending: boolean;
  buttonLabel: string;
};

export type CalculationVariantConfig = {
  render: (props: VariantRenderProps) => ReactNode;
  renderBackground?: (props: CalculationProps) => ReactNode;
};

export const CALCULATION_VARIANTS: Record<
  'variant1' | 'variant2',
  CalculationVariantConfig
> = {
  variant1: {
    render: ({
      plans,
      profit,
      format,
      form,
      isPending,
      buttonLabel,
    }: VariantRenderProps) => (
      <>
        <div className="mb-2 flex flex-col gap-2">
          <FormField
            control={form.control}
            name="plan_id"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger className="h-14 rounded-2xl border-0">
                      <SelectValue placeholder="Select Plan" />
                    </SelectTrigger>
                    <SelectContent>
                      {plans.map((plan) => (
                        <SelectItem key={plan.id} value={String(plan.id)}>
                          {plan.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="amount"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Enter investment amount"
                    className="h-14 rounded-2xl border-0"
                    {...field}
                    value={field.value as string | number}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <div className="mb-6 flex flex-col gap-2 rounded-2xl bg-black/5 p-4 backdrop-blur-[25px]">
          <p className="font-poppins text-base leading-[150%] font-normal text-black/50">
            Profit
          </p>
          <div className="flex items-center gap-2">
            <p className="font-syne text-[32px] leading-normal font-bold tracking-[-1px] text-[#12141D]">
              {format(profit?.totalProfit ?? 0)}
            </p>
            <p className="font-poppins text-base leading-[150%] font-normal text-black/50">
              {getProfitMessage(profit, format)}
            </p>
          </div>
        </div>

        <Button
          loading={isPending}
          className="h-12 self-start rounded-full bg-black px-6 py-3 text-white"
        >
          {buttonLabel}
        </Button>
      </>
    ),
  },

  variant2: {
    render: ({
      plans,
      profit,
      format,
      form,
      isPending,
      buttonLabel,
    }: VariantRenderProps) => (
      <div className="mx-auto mt-8 grid w-full max-w-4xl grid-cols-1 gap-4 md:mt-16 md:grid-cols-5 md:items-center md:gap-2">
        <div className="col-span-2 flex flex-col gap-2">
          <FormField
            control={form.control}
            name="plan_id"
            render={({ field }) => (
              <FormItem className="w-full">
                <FormControl>
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger className="h-12 rounded-2xl border border-[#76213A] bg-transparent md:h-[75px]">
                      <SelectValue placeholder="Select Plan" />
                    </SelectTrigger>
                    <SelectContent>
                      {plans?.map((plan: TPlan) => (
                        <SelectItem key={plan?.id} value={String(plan?.id)}>
                          {plan?.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="amount"
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    placeholder="Enter investment amount"
                    className="h-12 rounded-2xl border border-[#76213A] bg-transparent text-[#76213A] md:h-[75px]"
                    type="number"
                    inputMode="numeric"
                    {...field}
                    value={field.value as string | number}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <Button
          type="submit"
          loading={isPending}
          className="col-span-1 w-full rounded-2xl bg-[#76213A] text-white hover:bg-[#76213A]/80 md:size-40"
        >
          {buttonLabel}
          <CaretRightIcon weight="bold" className="size-6" />
        </Button>

        <div className="col-span-2 flex h-full flex-col justify-center rounded-2xl bg-[#76213A]/10 px-8 py-4">
          <p className="text-[32px] font-bold text-[#76213A]">
            {format(profit?.totalProfit ?? 0)}
          </p>
          <p className="text-black/50">{getProfitMessage(profit, format)}</p>
        </div>
      </div>
    ),
    renderBackground: ({ backgroundImage }: CalculationProps) => (
      <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
        {backgroundImage ? (
          <img
            src={`/${backgroundImage}`}
            alt=""
            className="absolute top-1/2 -left-20 hidden shrink-0 -translate-y-1/2 md:block"
          />
        ) : (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="432"
            height="602"
            viewBox="0 0 432 602"
            fill="none"
            aria-hidden
            className="absolute top-1/2 -left-20 hidden shrink-0 -translate-y-1/2"
          >
            <path
              d="M131 451.5C47.8817 451.5 -19.5 518.882 -19.5 602H-170C-170 435.763 -35.2367 301 131 301V451.5ZM432 301C432 467.237 297.237 602 131 602V451.5C214.118 451.5 281.5 384.118 281.5 301H432ZM131 150.5C47.8817 150.5 -19.5 217.882 -19.5 301H-170C-170 134.763 -35.2367 0 131 0V150.5ZM432 0C432 166.237 297.237 301 131 301V150.5C214.118 150.5 281.5 83.1183 281.5 0H432Z"
              fill="url(#paint0_linear_calc_v2)"
            />
            <defs>
              <linearGradient
                id="paint0_linear_calc_v2"
                x1="432"
                y1="301"
                x2="-170"
                y2="301"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="#76213A" stopOpacity={0} />
                <stop offset="1" stopColor="#76213A" />
              </linearGradient>
            </defs>
          </svg>
        )}
      </div>
    ),
  },
};