/* eslint-disable @typescript-eslint/no-explicit-any */
import FormRenderer from '@/components/common/form-renderer';
import { Button } from '@/components/ui/button';
import { Combobox, ComboboxOption } from '@/components/ui/combobox';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from '@/components/ui/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { updateRequest } from '@/data/request/update-request';
import { useSWR } from '@/hooks/useSWR';
import { FormFieldType } from '@/types/form-field-type';
import { getLanguageName } from '@/utils/getLanguageName';
import { router } from '@inertiajs/react';
import { CaretRightIcon, CheckIcon } from '@phosphor-icons/react';
import { useEffect, useMemo, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const TIMEZONE_OPTIONS: ComboboxOption[] = (
  Intl.supportedValuesOf('timeZone') as string[]
).map((tz) => ({ label: tz, value: tz }));

const GENERAL_KEYS = ['site_name', 'site_currency', 'support_email'] as const;

export default function GeneralInfoForm({
  site,
  defaultValues,
}: {
  site: FormFieldType[];
  defaultValues: any;
}) {
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();
  const form = useForm({ defaultValues });

  const { data: rawLanguages, isLoading: langLoading } = useSWR('/languages');

  const languageOptions = useMemo<ComboboxOption[]>(
    () =>
      (rawLanguages as string[] | undefined)?.map((code: string) => ({
        label: getLanguageName(code),
        value: code,
      })) ?? [],
    [rawLanguages],
  );

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

  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));
      }
    });
  };

  const generalFields = site?.filter((s) =>
    (GENERAL_KEYS as readonly string[]).includes(s.key),
  );

  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('General')}</h3>

        <Separator className="my-4" />

        <div className="flex flex-col gap-4 md:flex-row">
          <div className="flex w-full flex-col gap-4">
            {generalFields?.map((item: FormFieldType) => (
              <FormRenderer form={form} key={item.id} item={item} />
            ))}

            <FormField
              control={form.control}
              name="default_language"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t('Default Language')}</FormLabel>
                  <FormControl>
                    <Select
                      value={field.value}
                      onValueChange={field.onChange}
                      disabled={langLoading}
                    >
                      <SelectTrigger>
                        <SelectValue
                          placeholder={
                            langLoading ? t('Loading...') : t('Select language')
                          }
                        />
                      </SelectTrigger>
                      <SelectContent>
                        {languageOptions.map((opt) => (
                          <SelectItem key={opt.value} value={opt.value}>
                            {opt.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </FormControl>
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="timezone"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t('Timezone')}</FormLabel>
                  <Combobox
                    options={TIMEZONE_OPTIONS}
                    value={field.value}
                    onChange={field.onChange}
                    placeholder={t('Select timezone')}
                    searchPlaceholder={t('Search timezone...')}
                  />
                </FormItem>
              )}
            />

            <div className="rounded-2xl border border-black/5 p-4">
              <h4 className="mb-2">{t('Looking for something else?')}</h4>

              <div className="flex flex-col items-start">
                <Button
                  type="button"
                  onClick={() => router.visit('/admin/profile')}
                  variant="ghostPrimary"
                >
                  <span>{t('Profile Settings')}</span>
                  <CaretRightIcon weight="bold" />
                </Button>
                <Button
                  type="button"
                  onClick={() => router.visit('/admin/roles')}
                  variant="ghostPrimary"
                >
                  <span>{t('Permission Settings')}</span>
                  <CaretRightIcon weight="bold" />
                </Button>
                <Button
                  type="button"
                  onClick={() => router.visit('/admin/pages')}
                  variant="ghostPrimary"
                >
                  <span>{t('SEO Configuration')}</span>
                  <CaretRightIcon weight="bold" />
                </Button>
                <Button
                  onClick={() => router.visit('/admin/referrals')}
                  type="button"
                  variant="ghostPrimary"
                >
                  <span>{t('Referral Bonus Settings')}</span>
                  <CaretRightIcon weight="bold" />
                </Button>
                <Button
                  onClick={() => router.visit('/admin/ranking-points')}
                  type="button"
                  variant="ghostPrimary"
                >
                  <span>{t('Ranking Points')}</span>
                  <CaretRightIcon weight="bold" />
                </Button>
                <Button
                  onClick={() => router.visit('/admin/rankings')}
                  type="button"
                  variant="ghostPrimary"
                >
                  <span>{t('User Rankings')}</span>
                  <CaretRightIcon weight="bold" />
                </Button>
              </div>
            </div>
          </div>

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

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

        <Separator className="my-4" />

        <div className="flex justify-end">
          <Button type="submit" loading={isPending} disabled={isPending}>
            <CheckIcon weight="bold" />
            {t('Save Changes')}
          </Button>
        </div>
      </form>
    </Form>
  );
}