"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";

import { ModalSheet } from "@/components/ui";
import { useChat } from "@/providers/chat-provider";
import { useToast } from "@/providers/toast-provider";
import { useSocketEmit } from "@/services/socket";

import { RefillOptionsModal, RefillTimerModal } from "..";

export default function ChatModalsWrapper() {
  const t = useTranslations("Chat");
  const { refillModals, clearRefillModals } = useChat();
  const { addToast } = useToast();
  const emit = useSocketEmit();

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalChild, setModalChild] = useState<
    "refill-timer" | "refill-options" | null
  >(null);
  const [isClosing, setIsClosing] = useState(false);
  // Теперь hasShownTimerModal приходит с сервера
  const hasShownTimerModal = refillModals?.hasShownTimerModal ?? false;

  const handleModalClose = () => {
    setIsClosing(true);
    setIsModalOpen(false);
    const timeout = setTimeout(() => {
      setModalChild(null);
      setIsClosing(false);
      clearRefillModals(); // Очищаем состояние refillModals
    }, 300);

    return () => clearTimeout(timeout);
  };

  const handleTimerModalClose = () => {
    // При закрытии крестика в timer modal - переходим к options modal
    setModalChild("refill-options");
  };

  useEffect(() => {
    // Не обрабатываем новые события если модальное окно в процессе закрытия
    if (isClosing) return;

    if (!!refillModals?.oneClick && !hasShownTimerModal) {
      setIsModalOpen(true);
      setModalChild("refill-timer");
      // Подтверждаем серверу что показали timer modal
      emit("confirm_timer_modal_shown");
      return;
    }
    if (!!refillModals?.products) {
      setIsModalOpen(true);
      return setModalChild("refill-options");
    }
    // Если получили событие повторно и timer modal уже показывался,
    // сразу показываем options modal
    if (!!refillModals?.oneClick && hasShownTimerModal) {
      if (!isModalOpen) {
        setIsModalOpen(true);
        return setModalChild("refill-options");
      }
    }
  }, [refillModals, hasShownTimerModal, isModalOpen, emit, isClosing]);

  const handlePaymentSuccess = () => {
    handleModalClose();
  };

  const handlePaymentError = () => {
    addToast({
      variant: "error",
      message: t("payment_error"),
      duration: 5000,
    });
  };

  return (
    <ModalSheet
      open={isModalOpen}
      onClose={
        modalChild === "refill-timer" ? handleTimerModalClose : handleModalClose
      }
      variant={modalChild === "refill-timer" ? "gray" : "white"}
      disableBackdropClose={true}
    >
      {modalChild === "refill-timer" && !!refillModals?.oneClick && (
        <RefillTimerModal
          data={refillModals.oneClick}
          onTimerLeft={() => setModalChild("refill-options")}
          onDontWantToContinue={() => setModalChild("refill-options")}
          onPaymentSuccess={handlePaymentSuccess}
          onPaymentError={handlePaymentError}
        />
      )}
      {modalChild === "refill-options" && !!refillModals?.products && (
        <RefillOptionsModal
          data={refillModals.products}
          onPaymentSuccess={handlePaymentSuccess}
          onPaymentError={handlePaymentError}
        />
      )}
    </ModalSheet>
  );
}
