import { lazy, Suspense } from "react";
import { useMachine } from "@xstate/react";
import { motion } from "motion/react";

import tg from "@/tg";
import { settingsMachine } from "./settingsMachine";
import SettingsModal, { type SettingsModalId } from "./components/SettingsModal";

const FAQModal = lazy(() => import("./components/FAQModal"));
const AccountModal = lazy(() => import("./components/AccountModal"));
const SupportModal = lazy(() => import("./components/SupportModal"));
const TransactionsHistoryModal = lazy(() => import("./components/TransactionsHistoryModal"));
const LanguageModal = lazy(() => import("./components/LanguageModal"));

import classes from "./Settings.module.css";
import { usePlaySound } from "@/audio";

export default function Settings() {
  const play = usePlaySound();

  const [state, send] = useMachine(settingsMachine);

  const isOpen = state.value !== "closed";

  const toggle = () => {
    play("click");
    tg.hapticFeedback.click();
    if (isOpen) {
      send({ type: "CLOSE" });
    } else {
      send({ type: "OPEN_SETTINGS" });
    }
  };

  const handleClose = () => {
    send({ type: "CLOSE" });
  };

  const handleBack = () => {
    send({ type: "BACK" });
  };

  const handleNavigate = (modal: SettingsModalId) => {
    const eventMap = {
      faq: "OPEN_FAQ",
      account: "OPEN_ACCOUNT",
      support: "OPEN_SUPPORT",
      transactionsHistory: "OPEN_TRANSACTIONS_HISTORY",
      language: "OPEN_LANGUAGE",
    } satisfies Record<SettingsModalId, string>;
    send({ type: eventMap[modal] as Parameters<typeof send>[0]["type"] });
  };

  return (
    <>
      <motion.button
        initial={{ scale: 0, x: "50%", y: "-50%" }}
        animate={{ scale: 1, x: 0, y: 0 }}
        whileTap={{ scale: 0.95 }}
        transition={{ duration: 0.1, type: "spring" }}
        className={classes.settings}
        onClick={toggle}
      >
        <div className={classes.bars}>
          {[0, 1, 2].map((i) => (
            <motion.span
              key={i}
              className={classes.bar}
              initial={{ scale: 0 }}
              animate={
                isOpen
                  ? i === 0
                    ? { scale: 1, rotate: 45, y: 12 }
                    : i === 1
                      ? { scale: 1, opacity: 0, scaleX: 0 }
                      : { scale: 1, rotate: -45, y: -12 }
                  : { scale: 1, rotate: 0, y: 0, opacity: 1, scaleX: 1 }
              }
              transition={{
                scale: { delay: 0.05 * i + 0.1, duration: 0.15, type: "spring" },
                default: { duration: 0.1 },
              }}
            />
          ))}
        </div>
      </motion.button>

      <SettingsModal
        open={state.value === "settings"}
        onClose={handleClose}
        onNavigate={handleNavigate}
      />

      <Suspense>
        <FAQModal open={state.value === "faq"} onClose={handleClose} />

        <AccountModal open={state.value === "account"} onClose={handleClose} />

        <SupportModal open={state.value === "support"} onClose={handleClose} />

        <TransactionsHistoryModal
          open={state.value === "transactionsHistory"}
          onClose={handleClose}
        />

        <LanguageModal
          open={state.value === "language"}
          onClose={handleClose}
          onBack={handleBack}
        />
      </Suspense>
    </>
  );
}
