import FormRendererUser from '@/components/common/form-renderer-user';
import Loader from '@/components/common/loader';
import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { handleApiError } from '@/lib/error-handler';
import fetcher, { request } from '@/lib/fetcher';
import { KycModule, Kyc as KycType } from '@/types';
import { CaretRightIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import useSWR from 'swr';
import KycStatusCard from './kyc-status';

type StatusCardValue =
  | 'success'
  | 'pending'
  | 'not submit'
  | 're-submit'
  | 'rejected';

function toStatusCard(status: KycType['status'] | undefined): StatusCardValue {
  if (!status) return 'not submit';
  if (status === 'approved') return 'success';
  if (status === 'pending') return 'pending';
  if (status === 'rejected') return 're-submit';
  return 'rejected';
}

export default function Kyc() {
  const { t } = useTranslation();
  const form = useForm();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [selectedModuleId, setSelectedModuleId] = useState<number | null>(null);

  const { data: modules = [], isLoading: moduleLoading } = useSWR<KycModule[]>(
    '/api/user/kyc/modules',
    fetcher,
    {
      onSuccess: (data) => {
        if (data.length > 0 && selectedModuleId === null) {
          setSelectedModuleId(data[0].id);
        }
      },
    },
  );
  const {
    data: kycStatus,
    mutate: mutateStatus,
    isLoading: kycStatusLoading,
  } = useSWR<KycType | null>('/api/user/kyc/status', fetcher);

  const activeModule =
    modules.find((m) => m.id === selectedModuleId) ?? modules[0] ?? null;
  const canSubmit = !kycStatus?.id || kycStatus.status === 'rejected';

  const onSubmit = async (values: Record<string, unknown>) => {
    if (!activeModule) return;

    setIsSubmitting(true);
    try {
      const formData = new FormData();
      formData.append('module_id', String(activeModule.id));

      for (const field of activeModule.fields) {
        const key = field.name.replace(/ /g, '_');
        const value = values[field.name];
        if (value instanceof File) {
          formData.append(key, value);
        } else if (value !== undefined && value !== null && value !== '') {
          formData.append(key, String(value));
        }
      }

      await request.post('/api/user/kyc/submit', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });

      toast.success(t('KYC submitted successfully'));
      await mutateStatus();
      form.reset();
    } catch (error) {
      handleApiError(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  if (moduleLoading || kycStatusLoading) {
    return <Loader rounded />;
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <div>
          <h2 className="py-2 text-center text-2xl font-medium">
            {t('Submit KYC')}
          </h2>
        </div>
        <Separator className="my-6 bg-black/5 dark:bg-white/5" />
        <div className="mx-auto max-w-xl space-y-4">
          <KycStatusCard status={toStatusCard(kycStatus?.status)} />

          {kycStatus?.remarks && (
            <p className="px-4 text-sm text-destructive">{kycStatus.remarks}</p>
          )}
          {canSubmit && (
            <Select
              value={activeModule ? String(activeModule.id) : ''}
              onValueChange={(val) => {
                setSelectedModuleId(Number(val));
                form.reset();
              }}
            >
              <SelectTrigger className="w-full rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary">
                <SelectValue placeholder={t('Select a module')} />
              </SelectTrigger>
              <SelectContent>
                {modules.map((module) => (
                  <SelectItem key={module.id} value={String(module.id)}>
                    {module.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

          {canSubmit &&
            activeModule?.fields.map((field) => {
              return (
                <FormRendererUser
                  key={field.name}
                  form={form}
                  item={{
                    ...field,
                    label: field?.name,
                    placeholder: `Enter ${field?.name}`,
                    required: field.required ? 'required' : '',
                  }}
                />
              );
            })}
        </div>

        {canSubmit && activeModule && (
          <>
            <Separator className="my-6 bg-black/5 dark:bg-white/5" />
            <div className="flex items-center justify-end">
              <Button type="submit" variant="primary" disabled={isSubmitting}>
                <span>
                  {isSubmitting ? t('Submitting...') : t('Submit KYC')}
                </span>
                <CaretRightIcon weight="bold" />
              </Button>
            </div>
          </>
        )}
      </form>
    </Form>
  );
}