import type { ProfileData } from '@/components/admin/user-management/user-details/profile/types';
import FormRenderer from '@/components/common/form-renderer';
import { Button } from '@/components/ui/button';
import { Combobox } from '@/components/ui/combobox';
import { Form, FormField, FormItem, FormLabel } from '@/components/ui/form';
import { Separator } from '@/components/ui/separator';
import {
  getUserProfileLeftFields,
  getUserProfileRightFields,
} from '@/data/forms/profile-fields';
import { updateRequest } from '@/data/request/update-request';
import { COUNTRY_OPTIONS } from '@/utils/countries';
import { FloppyDiskIcon, XIcon } from '@phosphor-icons/react';
import { useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { mutate } from 'swr';

function SectionHeading({ title }: { title: string }) {
  return (
    <>
      <h4 className="text-xs font-semibold tracking-widest text-black/30 uppercase">
        {title}
      </h4>
      <Separator className="mt-1 mb-2" />
    </>
  );
}

export default function ProfileEditForm({
  data,
  userId,
  onSaved,
  onCancel,
}: {
  data: ProfileData;
  userId: number;
  onSaved: () => void;
  onCancel: () => void;
}) {
  const { t } = useTranslation();
  const form = useForm<ProfileData>({ defaultValues: data });
  const [isPending, startTransition] = useTransition();

  const LEFT_FIELDS = getUserProfileLeftFields(t);
  const RIGHT_FIELDS = getUserProfileRightFields(t);

  const onSubmit = (values: ProfileData) => {
    startTransition(async () => {
      const res = await updateRequest({
        url: `/api/admin/users/${userId}`,
        formData: {
          first_name: values.first_name,
          last_name: values.last_name,
          email: values.email,
          phone: values.phone,
          birth_date: values.birth_date,
          country: values.country,
          city: values.city,
          zip_code: values.zip_code,
          address: values.address,
        },
      });

      if (res?.success) {
        toast.success(t(res.message ?? 'Profile updated successfully'));
        mutate(`/api/admin/users/${userId}`);
        onSaved();
      }
    });
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="py-4">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-2 px-1">
          <p className="text-sm text-black/40">
            {t('Edit user profile information')}
          </p>
          <div className="flex gap-2">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={onCancel}
              disabled={isPending}
            >
              <XIcon weight="bold" className="size-4" />
              {t('Cancel')}
            </Button>
            <Button
              type="submit"
              size="sm"
              loading={isPending}
              disabled={isPending}
            >
              <FloppyDiskIcon weight="bold" className="size-4" />
              {t('Save Changes')}
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div className="space-y-4 rounded-xl bg-white p-5 shadow-box">
            <SectionHeading title={t('Personal Information')} />
            {LEFT_FIELDS.map((item) => (
              <FormRenderer key={item.id} form={form} item={item} />
            ))}
          </div>

          <div className="space-y-4 rounded-xl bg-white p-5 shadow-box">
            <SectionHeading title={t('Location')} />
            <FormField
              control={form.control}
              name="country"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t('Country')}</FormLabel>
                  <Combobox
                    options={COUNTRY_OPTIONS}
                    value={field.value}
                    onChange={field.onChange}
                    placeholder={t('Select country')}
                    searchPlaceholder={t('Search country...')}
                  />
                </FormItem>
              )}
            />
            {RIGHT_FIELDS.map((item) => (
              <FormRenderer key={item.id} form={form} item={item} />
            ))}
          </div>
        </div>
      </form>
    </Form>
  );
}