import PageHeading from '@/components/common/page-heading';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Form, FormControl, FormField } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Separator } from '@/components/ui/separator';
import { Skeleton } from '@/components/ui/skeleton';
import { useTransactionStatus } from '@/hooks/use-transaction-status';
import { useApiSWR } from '@/hooks/useSWR';
import { cn } from '@/lib/utils';
import { useDepositStore } from '@/store/useDepositStore';
import { DepositMethods, TGateway } from '@/types/deposit.types';
import { getImageUrl } from '@/utils/getImageUrl';
import { formatFee } from '@/utils/handleFee';
import { zodResolver } from '@hookform/resolvers/zod';
import { router } from '@inertiajs/react';
import { CaretRightIcon, WarningIcon } from '@phosphor-icons/react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import z from 'zod';

export const DepositSchema = z.object({
  gateway_key: z.string().min(1, 'Select a gateway'),
});

export type TDepositData = z.infer<typeof DepositSchema>;

const Deposit = () => {
  const { t } = useTranslation();
  const { depositsEnabled } = useTransactionStatus();
  const { data, isLoading } = useApiSWR<DepositMethods>(
    '/user/deposits/methods',
  );

  const { selectGateway } = useDepositStore();

  const form = useForm({
    resolver: zodResolver(DepositSchema),
    defaultValues: {
      gateway_key: '',
    },
  });

  const gateways = [
    ...(data?.auto_methods ?? []).map((g: TGateway) => ({
      ...g,
      gateway_type: 'auto' as const,
    })),
    ...(data?.manual_methods ?? []).map((g: TGateway) => ({
      ...g,
      gateway_type: 'manual' as const,
    })),
  ];

  // eslint-disable-next-line react-hooks/incompatible-library
  const selectedKey = form.watch('gateway_key');

  const handleSubmit = () => {
    router.visit('/deposit/confirm');
  };

  if (!depositsEnabled) {
    return (
      <Card className="flex h-72 flex-col items-center justify-center gap-2 rounded-2xl text-sm text-black/50 dark:border-white/8 dark:text-white/50">
        <WarningIcon
          weight="duotone"
          className="size-8 text-black/30 dark:text-white/30"
        />
        <span>{t('Deposits are currently disabled.')}</span>
      </Card>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeading
        title={t('Deposit')}
        description={t(
          'Select a payment gateway to proceed with your deposit.',
        )}
        variant="default"
      />

      <Card className="rounded-2xl p-6 dark:border-white/8">
        <h3 className="mb-4 text-base font-semibold text-card-foreground">
          {t('Select Payment Gateway')}
        </h3>
        <Separator className="mb-6 bg-black/6 dark:bg-white/6" />

        {isLoading && (
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div
                key={i}
                className="rounded-xl border border-black/8 p-4 dark:border-white/8"
              >
                <div className="mb-4 flex items-center gap-3">
                  <Skeleton className="size-12 rounded-lg" />
                  <Skeleton className="h-4 w-24" />
                </div>
                <Separator className="mb-3 bg-black/6 dark:bg-white/6" />
                <div className="space-y-2">
                  <Skeleton className="h-3.5 w-2/3" />
                  <Skeleton className="h-3.5 w-1/2" />
                </div>
              </div>
            ))}
          </div>
        )}

        {!isLoading && gateways.length === 0 && (
          <div className="flex flex-col items-center py-10 text-center text-black/40 dark:text-white/40">
            <WarningIcon weight="duotone" className="mb-2 size-10" />
            <p>{t('No payment gateways available.')}</p>
          </div>
        )}

        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)}>
            <FormField
              control={form.control}
              name="gateway_key"
              render={({ field }) => (
                <FormControl>
                  <RadioGroup
                    value={field.value}
                    onValueChange={(val) => {
                      field.onChange(val);

                      const [type, id] = String(val).split('-');
                      const parsedId = Number(id);

                      const selected = gateways.find(
                        (g: TGateway) =>
                          g.gateway_type === type && Number(g.id) === parsedId,
                      );

                      selectGateway(selected ?? null);
                    }}
                    className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
                    disabled={isLoading}
                  >
                    {!isLoading &&
                      gateways.length > 0 &&
                      gateways.map((gateway: TGateway) => {
                        const key = `${gateway.gateway_type}-${gateway.id}`;
                        const isActive = selectedKey === key;

                        return (
                          <Label
                            key={key}
                            htmlFor={key}
                            className={cn(
                              'relative cursor-pointer rounded-xl border p-4 transition-colors duration-200',
                              isActive
                                ? 'border-pm-accent bg-pm-surface-2'
                                : 'border-black/8 bg-transparent hover:border-pm-line hover:bg-pm-surface-2 dark:border-white/8',
                            )}
                          >
                            <RadioGroupItem
                              id={key}
                              value={key}
                              className="absolute top-0 left-0 opacity-0"
                            />

                            <div className="flex items-center justify-between">
                              <div className="flex items-center gap-3">
                                <img
                                  src={getImageUrl(gateway.logo)}
                                  alt={gateway.name}
                                  className="size-12 rounded-lg object-contain"
                                />
                                <p className="font-semibold text-card-foreground">
                                  {gateway.name}
                                </p>
                              </div>

                              <Badge
                                variant={
                                  gateway.gateway_type === 'auto'
                                    ? 'successOutline'
                                    : 'warningOutline'
                                }
                              >
                                {gateway.gateway_type === 'auto'
                                  ? t('Instant')
                                  : t('Manual')}
                              </Badge>
                            </div>

                            <Separator className="my-3 bg-black/6 dark:bg-white/6" />

                            <div className="flex flex-col gap-1.5 text-sm text-black/60 dark:text-white/60">
                              <div className="flex justify-between">
                                <span>{t('Fee')}</span>
                                <span className="font-medium text-card-foreground">
                                  {formatFee(gateway)}
                                </span>
                              </div>
                              <div className="flex justify-between">
                                <span>{t('Limits')}</span>
                                <span className="font-medium text-card-foreground">
                                  {`${gateway?.min_amount.toLocaleString()}–${gateway?.max_amount.toLocaleString()} ${gateway?.currency}`}
                                </span>
                              </div>
                            </div>
                          </Label>
                        );
                      })}
                  </RadioGroup>
                </FormControl>
              )}
            />

            <Separator className="my-6 bg-black/6 dark:bg-white/6" />

            <div className="flex justify-end">
              <Button
                variant="primary"
                type="submit"
                className="min-w-32"
                disabled={!selectedKey}
              >
                {t('Next')}
                <CaretRightIcon weight="bold" />
              </Button>
            </div>
          </form>
        </Form>
      </Card>
    </div>
  );
};

Deposit.title = 'Deposit';

export default Deposit;