import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import Swal from 'sweetalert2';
import { PRODUCT_INFO } from '@/shared/constants/data';
import formatPhone from '@/shared/lib/formatPhone';

import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogTrigger,
  DialogClose,
} from '@/shared/ui/dialog';
import { Button } from '@/shared/ui/button';
const contactSchema = z.object({
  name: z.string().min(2, 'Имя должно содержать минимум 2 буквы'),
  phone: z.string().min(6, 'Введите корректный номер телефона'),
});
type ContactFormValues = z.infer<typeof contactSchema>;

const CallBackForm = () => {
  const [open, setOpen] = useState(false);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<ContactFormValues>({
    resolver: zodResolver(contactSchema),
  });

  const onSubmit = async (data: ContactFormValues) => {
    const res = await fetch('/api/send-to-bot', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (!res.ok) {
      Swal.fire({
        icon: 'error',
        title: 'Ошибка',
        text: 'Сообщение не может быть отправлено. Пожалуйста, попробуйте позже.',
        confirmButtonColor: '#60ae3f',
      });
      setOpen(false);
      return;
    }

    Swal.fire({
      icon: 'success',
      title: 'Заявка отправлена',
      text: 'Спасибо! Мы перезвоним вам в ближайшее время.',
      confirmButtonColor: '#60ae3f',
    });

    reset();
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <div className="font-semibold hover:text-primary cursor-pointer select-none">
          {formatPhone(PRODUCT_INFO.contact.phone)}
        </div>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[400px] p-5">
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogHeader>
            <DialogTitle className="font-bold text-accent">
              Обратный звонок
            </DialogTitle>
            <DialogDescription className="text-muted text-[14px] font-medium">
              Пожалуйста, оставьте имя и номер телефона.
            </DialogDescription>
          </DialogHeader>

          <div className="mt-4 flex flex-col gap-3">
            <div>
              <input
                {...register('name')}
                className="py-[10px] px-[15px] bg-muted-foreground w-full rounded-sm outline-none text-[14px] font-medium text-accent"
                type="text"
                placeholder="Ваше имя"
              />
              {errors.name && (
                <span className="text-red-500 font-medium text-[12px]">
                  {errors.name.message}
                </span>
              )}
            </div>
            <div>
              <input
                {...register('phone')}
                className="py-[10px] px-[15px] bg-muted-foreground w-full rounded-sm outline-none text-[14px] font-medium text-accent appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                type="number"
                placeholder="Телефон"
              />
              {errors.phone && (
                <span className="text-red-500 font-medium text-[12px]">
                  {errors.phone.message}
                </span>
              )}
            </div>
          </div>

          <DialogFooter className="mt-4">
            <DialogClose asChild>
              <Button
                type="button"
                variant="outline"
                className="hover:bg-gray-50 hover:text-neutral-900"
              >
                Отмена
              </Button>
            </DialogClose>
            <Button type="submit" disabled={isSubmitting}>
              Отправить
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};

export default CallBackForm;
