"use client";

import type { User } from "@/services/models/User";

import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm, useWatch } from "react-hook-form";
import toast from "react-hot-toast";
import z from "zod";

import EnvelopeClosedSVG from "@/assets/icons/envelope-closed.svg";
import PhoneSVG from "@/assets/icons/phone.svg";
import UserSVG from "@/assets/icons/user.svg";

import AccountAddresses from "@/components/AccountAddresses/AccountAddresses";
import Button from "@/components/Button/Button";

import { callAction } from "@/lib/action-utils";
import { createOrder } from "@/services/actions/orderAPI";
import { updateCurrentUser } from "@/services/actions/usersAPI";
import type { PopulatedCart } from "@/services/models/Cart";
import { isRedirectError } from "next/dist/client/components/redirect-error";
import { useRouter } from "next/navigation";
import Input from "../Input/Input";
import styles from "./CheckoutPanel.module.scss";

export const formSchema = z.object({
  phoneNumber: z
    .string()
    .min(1, "Номер телефона обязателен.")
    .regex(
      /^(\+7|7|8)?[\s-]?\(?\d{3}\)?[\s-]?\d{3}[\s-]?\d{2}[\s-]?\d{2}$/,
      "Инвалидный номер телефона.",
    ),
  address: z.object(
    {
      _id: z.string(),
      line1: z.string(),
      city: z.string(),
      zip: z.string(),
    },
    "Адрес обязателен.",
  ),
});

export default function CheckoutPanel({
  user,
  cart,
}: {
  user: User;
  cart: PopulatedCart;
}) {
  const {
    register,
    control,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      ...(user.phoneNumber && { phoneNumber: user.phoneNumber }),
      ...(user.addresses.at(0) && { address: user.addresses.at(0) }),
    },
  });
  const values = useWatch({ control });

  const router = useRouter();

  function onSubmit(data: z.infer<typeof formSchema>) {
    const promise = (async () => {
      if (!user.phoneNumber) {
        await callAction(updateCurrentUser({ phoneNumber: data.phoneNumber }));
      }

      const order = {
        address: data.address,
        items: cart.items.map((item) => ({
          ...item,
          productId: item.productId?._id,
        })),
        totals: cart.totals,
      };

      await callAction(createOrder(order));

      router.replace("/account/orders");
    })();

    void toast.promise(promise, {
      loading: "Оформляем Ваш заказ...",
      success: "Заказ успешно размещён.",
      error: (error: unknown) => {
        if (isRedirectError(error)) return null;

        console.error(error);

        router.replace("/cart");

        return error?.toString() ?? "Упс! Что-то пошло не так :(";
      },
    });
  }

  return (
    <div className={styles["checkout-panel"]}>
      <div className={styles["checkout-panel__body"]}>
        <div className={styles["checkout-panel__sections-container"]}>
          <div className={styles["checkout-panel__section"]}>
            <span className={styles["checkout-panel__details-heading"]}>
              Персональная Информация
            </span>

            <div className={styles["checkout-panel__details-container"]}>
              <div className={styles["checkout-panel__detail"]}>
                <EnvelopeClosedSVG
                  className={styles["checkout-panel__detail-icon"]}
                />

                <span className={styles["checkout-panel__detail-value"]}>
                  {user.email}
                </span>
              </div>

              <div className={styles["checkout-panel__detail"]}>
                <UserSVG className={styles["checkout-panel__detail-icon"]} />

                <span className={styles["checkout-panel__detail-value"]}>
                  {user.name}
                </span>
              </div>

              <div className={styles["checkout-panel__detail"]}>
                <PhoneSVG className={styles["checkout-panel__detail-icon"]} />

                {user.phoneNumber ? (
                  <span className={styles["checkout-panel__detail-value"]}>
                    {user.phoneNumber}
                  </span>
                ) : (
                  <Input
                    type="tel"
                    error={errors.phoneNumber?.message}
                    {...register("phoneNumber")}
                    className={styles["checkout-panel__input"]}
                  />
                )}
              </div>
            </div>
          </div>

          <div className={styles["checkout-panel__section"]}>
            <span className={styles["checkout-panel__details-heading"]}>
              Адрес Доставки
            </span>

            <Controller
              control={control}
              name="address"
              render={({ field }) => (
                <AccountAddresses
                  user={user}
                  type="checkout"
                  value={field.value}
                  onSelect={field.onChange}
                />
              )}
            />
          </div>
        </div>

        {errors.address?.message && (
          <p className={styles["checkout-panel__error-message"]}>
            {errors.address.message}
          </p>
        )}
      </div>

      <Button
        variant="primary"
        fill
        onClick={() => void handleSubmit(onSubmit)()}
      >
        Оформить заказ
      </Button>
    </div>
  );
}