/* eslint-disable @typescript-eslint/no-explicit-any */
import FormRenderer from '@/components/common/form-renderer';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Form } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { createRequest } from '@/data/request/create-request';
import { updateRequest } from '@/data/request/update-request';
import { FormFieldType } from '@/types/form-field-type';
import { CheckIcon, WifiHighIcon } from '@phosphor-icons/react';
import { useEffect, useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

export default function EmailSettingsForm({
  site,
  defaultValues,
}: {
  site: FormFieldType[];
  defaultValues: any;
}) {
  const [isPending, startTransition] = useTransition();
  const [isTesting, startTestTransition] = useTransition();
  const [testDialogOpen, setTestDialogOpen] = useState(false);
  const [testEmail, setTestEmail] = useState('');

  const { t } = useTranslation();
  const form = useForm();

  useEffect(() => {
    if (site?.length) {
      form.reset(defaultValues);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultValues, site]);

  const onTestConnection = () => {
    setTestDialogOpen(false);
    startTestTransition(async () => {
      const res = await createRequest({
        url: '/api/admin/settings/test-email',
        formData: { email: testEmail },
      });
      if (res?.success) {
        toast.success(res.message);
      } else {
        toast.error(res?.message ?? t('Connection test failed.'));
      }
    });
  };

  const onSubmit = (data: any) => {
    const fd = new FormData();

    Object.entries(data).forEach(([key, value]: any) => {
      if (Array.isArray(value) && value[0] instanceof File) {
        fd.append(key, value[0]);
      } else if (typeof value === 'boolean') {
        fd.append(key, value ? '1' : '0');
      } else if (value !== undefined && value !== null) {
        fd.append(key, value);
      }
    });

    startTransition(async () => {
      const res = await updateRequest({
        url: '/api/admin/settings',
        formData: fd,
      });

      if (res?.success) {
        toast.success(t(res?.message));
      }
    });
  };

  return (
    <Form {...form}>
      <form
        className="mb-4 rounded-xl bg-white p-6 shadow-box"
        onSubmit={form.handleSubmit(onSubmit)}
      >
        <h3 className="text-xl font-medium">{t('SMTP Configuration')}</h3>

        <Separator className="my-4" />

        <div className="flex flex-col gap-4 md:flex-row">
          <div className="flex w-full flex-col gap-4">
            {site
              .filter((s: FormFieldType) =>
                [
                  'mail_driver',
                  'smtp_port',
                  'smtp_username',
                  'smtp_password',
                ].includes(s.key),
              )
              .map((item: FormFieldType) => (
                <FormRenderer form={form} key={item.id} item={item} />
              ))}
          </div>

          <Separator className="hidden md:block" orientation="vertical" />

          <div className="flex w-full flex-col gap-4">
            {site
              .filter((s) =>
                [
                  'smtp_host',
                  'smtp_from_name',
                  'smtp_encryption',
                  'smtp_from_address',
                ].includes(s.key),
              )
              .map((item: FormFieldType) => (
                <FormRenderer form={form} key={item.id} item={item} />
              ))}
          </div>
        </div>

        <Separator className="my-4" />

        <div className="flex flex-col items-center justify-end gap-2 md:flex-row">
          <Button
            type="button"
            variant="outline"
            className="w-full md:w-auto"
            loading={isTesting}
            disabled={isTesting || isPending}
            onClick={() => setTestDialogOpen(true)}
          >
            <WifiHighIcon weight="bold" />
            {t('Test Connection')}
          </Button>
          <Button
            type="submit"
            className="w-full md:w-auto"
            loading={isPending}
            disabled={isPending || isTesting}
          >
            <CheckIcon weight="bold" />
            {t('Save Changes')}
          </Button>
        </div>

        <Dialog open={testDialogOpen} onOpenChange={setTestDialogOpen}>
          <DialogContent className="sm:max-w-sm">
            <DialogHeader>
              <DialogTitle>{t('Test Email Connection')}</DialogTitle>
              <DialogDescription>
                {t(
                  'Enter an email address to receive the test message and verify your SMTP configuration.',
                )}
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-2 py-2">
              <Label htmlFor="test-email">{t('Recipient Email')}</Label>
              <Input
                id="test-email"
                type="email"
                placeholder="you@example.com"
                value={testEmail}
                onChange={(e) => setTestEmail(e.target.value)}
                onKeyDown={(e) =>
                  e.key === 'Enter' && testEmail && onTestConnection()
                }
              />
            </div>
            <DialogFooter>
              <Button
                variant="outline"
                onClick={() => setTestDialogOpen(false)}
              >
                {t('Cancel')}
              </Button>
              <Button
                disabled={!testEmail}
                loading={isTesting}
                onClick={onTestConnection}
              >
                {t('Send Test Email')}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </form>
    </Form>
  );
}