import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import { TaxesMultiSelectField } from "@erp/core/components";
import { SelectField, TextAreaField, TextField } from "@repo/rdx-ui/components";
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  RadioGroup,
  RadioGroupItem,
} from "@repo/shadcn-ui/components";

import { useUnsavedChangesNotifier } from "@erp/core/hooks";
import { GetCustomerByIdResponseDTO } from "@erp/customer-invoices/common";
import { useTranslation } from "../../i18n";
import { CustomerData, CustomerDataUpdateUpdateSchema } from "../../schemas";

interface CustomerFormProps {
  formId: string;
  data?: GetCustomerByIdResponseDTO;
  isPending?: boolean;
  /**
   * Callback function to handle form submission.
   * @param data - The customer data submitted by the form.
   */
  onSubmit?: (data: CustomerData) => void;
}

export const CustomerEditForm = ({ formId, data, onSubmit, isPending }: CustomerFormProps) => {
  const { t } = useTranslation();

  const form = useForm<CustomerData>({
    resolver: zodResolver(CustomerDataUpdateUpdateSchema),
    defaultValues: data,
    disabled: isPending,
  });

  useUnsavedChangesNotifier({
    isDirty: form.formState.isDirty,
  });

  const handleSubmit = (data: CustomerData) => {
    console.log("Datos del formulario:", data);
    onSubmit?.(data);
  };

  const handleError = (errors: any) => {
    console.error("Errores en el formulario:", errors);
    // Aquí puedes manejar los errores, por ejemplo, mostrar un mensaje al usuario
  };

  const handleCancel = () => {
    form.reset(data);
  };

  return (
    <Form {...form}>
      <form id={formId} onSubmit={form.handleSubmit(handleSubmit, handleError)}>
        <div className='w-full grid grid-cols-1 space-y-8 space-x-8 xl:grid-cols-2'>
          {/* Información básica */}
          <Card className='shadow-none'>
            <CardHeader>
              <CardTitle>{t("form_groups.basic_info.title")}</CardTitle>
              <CardDescription>{t("form_groups.basic_info.description")}</CardDescription>
            </CardHeader>
            <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
              <FormField
                control={form.control}
                name='is_company'
                render={({ field }) => (
                  <FormItem className='space-y-3'>
                    <FormLabel>{t("form_fields.customer_type.label")}</FormLabel>
                    <FormControl>
                      <RadioGroup
                        onValueChange={field.onChange}
                        defaultValue={field.value ? "1" : "0"}
                        className='flex gap-6'
                      >
                        <FormItem className='flex items-center space-x-2'>
                          <FormControl>
                            <RadioGroupItem value={"1"} />
                          </FormControl>
                          <FormLabel className='font-normal'>
                            {t("form_fields.customer_type.company")}
                          </FormLabel>
                        </FormItem>

                        <FormItem className='flex items-center space-x-2'>
                          <FormControl>
                            <RadioGroupItem value={"0"} />
                          </FormControl>
                          <FormLabel className='font-normal'>
                            {t("form_fields.customer_type.individual")}
                          </FormLabel>
                        </FormItem>
                      </RadioGroup>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <TextField
                control={form.control}
                name='name'
                required
                label={t("form_fields.name.label")}
                placeholder={t("form_fields.name.placeholder")}
                description={t("form_fields.name.description")}
              />

              <TextField
                control={form.control}
                name='trade_name'
                label={t("form_fields.trade_name.label")}
                placeholder={t("form_fields.trade_name.placeholder")}
                description={t("form_fields.trade_name.description")}
              />

              <TextField
                control={form.control}
                name='reference'
                label={t("form_fields.reference.label")}
                placeholder={t("form_fields.reference.placeholder")}
                description={t("form_fields.reference.description")}
              />
            </CardContent>
          </Card>

          {/* Dirección */}
          <Card className='shadow-none'>
            <CardHeader>
              <CardTitle>{t("form_groups.address.title")}</CardTitle>
              <CardDescription>{t("form_groups.address.description")}</CardDescription>
            </CardHeader>
            <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
              <TextField
                className='xl:col-span-2'
                control={form.control}
                name='street'
                required
                label={t("form_fields.street.label")}
                placeholder={t("form_fields.street.placeholder")}
                description={t("form_fields.street.description")}
              />

              <TextField
                control={form.control}
                name='city'
                required
                label={t("form_fields.city.label")}
                placeholder={t("form_fields.city.placeholder")}
                description={t("form_fields.city.description")}
              />

              <TextField
                control={form.control}
                name='postal_code'
                required
                label={t("form_fields.postal_code.label")}
                placeholder={t("form_fields.postal_code.placeholder")}
                description={t("form_fields.postal_code.description")}
              />

              <TextField
                control={form.control}
                name='province'
                required
                label={t("form_fields.province.label")}
                placeholder={t("form_fields.province.placeholder")}
                description={t("form_fields.province.description")}
              />

              <SelectField
                control={form.control}
                name='country'
                required
                label={t("form_fields.country.label")}
                placeholder={t("form_fields.country.placeholder")}
                description={t("form_fields.country.description")}
                items={[
                  { value: "ES", label: "España" },
                  { value: "FR", label: "Francia" },
                  { value: "DE", label: "Alemania" },
                  { value: "IT", label: "Italia" },
                  { value: "PT", label: "Portugal" },
                  { value: "US", label: "Estados Unidos" },
                  { value: "MX", label: "México" },
                  { value: "AR", label: "Argentina" },
                ]}
              />
            </CardContent>
          </Card>

          {/* Contacto */}
          <Card className='shadow-none'>
            <CardHeader>
              <CardTitle>{t("form_groups.contact_info.title")}</CardTitle>
              <CardDescription>{t("form_groups.contact_info.description")}</CardDescription>
            </CardHeader>
            <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
              <TextField
                control={form.control}
                name='email_primary'
                label={t("form_fields.email_primary.label")}
                placeholder={t("form_fields.email_primary.placeholder")}
                description={t("form_fields.email_primary.description")}
              />

              <TextField
                control={form.control}
                name='email_secondary'
                label={t("form_fields.email_secondary.label")}
                placeholder={t("form_fields.email_secondary.placeholder")}
                description={t("form_fields.email_secondary.description")}
              />

              <TextField
                control={form.control}
                name='phone_primary'
                label={t("form_fields.phone_primary.label")}
                placeholder={t("form_fields.phone_primary.placeholder")}
                description={t("form_fields.phone_primary.description")}
              />

              <TextField
                control={form.control}
                name='phone_secondary'
                label={t("form_fields.phone_secondary.label")}
                placeholder={t("form_fields.phone_secondary.placeholder")}
                description={t("form_fields.phone_secondary.description")}
              />

              <TextField
                control={form.control}
                name='mobile_primary'
                label={t("form_fields.mobile_primary.label")}
                placeholder={t("form_fields.mobile_primary.placeholder")}
                description={t("form_fields.mobile_primary.description")}
              />

              <TextField
                control={form.control}
                name='mobile_secondary'
                label={t("form_fields.mobile_secondary.label")}
                placeholder={t("form_fields.mobile_secondary.placeholder")}
                description={t("form_fields.mobile_secondary.description")}
              />

              <TextField
                control={form.control}
                name='fax'
                label={t("form_fields.fax.label")}
                placeholder={t("form_fields.fax.placeholder")}
                description={t("form_fields.fax.description")}
              />

              <TextField
                className='xl:col-span-2'
                control={form.control}
                name='website'
                label={t("form_fields.website.label")}
                placeholder={t("form_fields.website.placeholder")}
                description={t("form_fields.website.description")}
              />
            </CardContent>
          </Card>

          {/* Configuraciones Adicionales */}
          <Card className='shadow-none'>
            <CardHeader>
              <CardTitle>{t("form_groups.additional_config.title")}</CardTitle>
              <CardDescription>{t("form_groups.additional_config.description")}</CardDescription>
            </CardHeader>
            <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
              <TaxesMultiSelectField
                control={form.control}
                name='default_tax'
                required
                label={t("form_fields.default_tax.label")}
                placeholder={t("form_fields.default_tax.placeholder")}
                description={t("form_fields.default_tax.description")}
              />

              <SelectField
                control={form.control}
                name='lang_code'
                required
                label={t("form_fields.lang_code.label")}
                placeholder={t("form_fields.lang_code.placeholder")}
                description={t("form_fields.lang_code.description")}
                items={[
                  { value: "es", label: "Español" },
                  { value: "en", label: "Inglés" },
                  { value: "fr", label: "Francés" },
                  { value: "de", label: "Alemán" },
                  { value: "it", label: "Italiano" },
                  { value: "pt", label: "Portugués" },
                ]}
              />

              <SelectField
                control={form.control}
                name='currency_code'
                required
                label={t("form_fields.currency_code.label")}
                placeholder={t("form_fields.currency_code.placeholder")}
                description={t("form_fields.currency_code.description")}
                items={[
                  { value: "EUR", label: "Euro" },
                  { value: "USD", label: "Dólar estadounidense" },
                  { value: "GBP", label: "Libra esterlina" },
                  { value: "ARS", label: "Peso argentino" },
                  { value: "MXN", label: "Peso mexicano" },
                  { value: "JPY", label: "Yen japonés" },
                ]}
              />

              <TextAreaField
                className=''
                control={form.control}
                name='legal_record'
                required
                label={t("form_fields.legal_record.label")}
                placeholder={t("form_fields.legal_record.placeholder")}
                description={t("form_fields.legal_record.description")}
              />
            </CardContent>
          </Card>
        </div>
        <Button type='submit'>Submit</Button>
      </form>
    </Form>
  );
};