import Header from "@/components/header/Header";
import DashboardLayout from "@/components/Layout/DashboardLayout";
import PreviousButton from "@/components/previousBtn/previousButton";
import Loader from "@/components/Loader/loader";
import ConfirmationPopup from "@/components/confirmationPopup/confirmationPopup";
import ActionButton from "@/components/ui/ActionButton";
import privacyStyles from "@/styles/modules/privacyPolicy.module.css";
import styles from "@/styles/modules/databaseTarget.module.css";
import { useSession } from "next-auth/react";
import { useState } from "react";
import toast from "react-hot-toast";
import {
  useGetDbTargetQuery,
  useSetDbTargetMutation,
} from "@/utils/Redux-Toolkit/services/DbTarget";
import { getDbLabel } from "@/utils/dbTargetLabels";

const DatabaseTarget = () => {
  const session = useSession();
  const token = session?.data?.user?.token;
  const [pendingTarget, setPendingTarget] = useState<string | null>(null);

  const { data, isLoading, error } = useGetDbTargetQuery(
    { token },
    { skip: !token, refetchOnMountOrArgChange: true }
  );
  const [setDbTarget, { isLoading: isSwitching }] = useSetDbTargetMutation();

  const activeDb = data?.data?.activeDb;
  const availableDbs = data?.data?.availableDbs || [];

  const confirmSwitch = async () => {
    if (!pendingTarget) return;
    try {
      const response = await setDbTarget({
        token,
        target: pendingTarget,
      }).unwrap();
      if (!response.status) {
        toast.error(response.message || "Failed to switch database.");
        setPendingTarget(null);
        return;
      }
      toast.success(`Switched to ${getDbLabel(response.data?.activeDb)}`);
      setPendingTarget(null);
      window.location.reload();
    } catch (err: unknown) {
      const message =
        err && typeof err === "object" && "data" in err
          ? (err as { data?: { message?: string } }).data?.message
          : undefined;
      toast.error(message || "Failed to persist database target.");
      setPendingTarget(null);
    }
  };

  return (
    <DashboardLayout>
      <Header />
      <div className="mainContent">
        <div className={privacyStyles.topPart}>
          <div className={privacyStyles.leftSideContent}>
            <PreviousButton />
            <h1>Database Target</h1>
          </div>
        </div>

        <p className={styles.intro}>
          This switches the entire backend — APIs, chat, queues, and webhooks —
          to one MongoDB database. Users and assignments in the other database
          will not appear until you switch back.
        </p>

        {isLoading ? (
          <Loader
            style={
              {
                "--loaderColor": "#1D428A",
              } as React.CSSProperties
            }
          />
        ) : error ? (
          <div className="fullWidth">
            <p className="errorMessage">Oh, there was an error.</p>
          </div>
        ) : (
          <div className={styles.cardList}>
            {availableDbs.map((name) => {
              const isActive = name === activeDb;
              return (
                <div
                  key={name}
                  className={`${styles.card} ${isActive ? styles.cardActive : ""}`}
                >
                  <div className={styles.cardCopy}>
                    <h2>{getDbLabel(name)}</h2>
                    <p>{name}</p>
                  </div>
                  {isActive ? (
                    <span className={styles.badge}>Active</span>
                  ) : (
                    <ActionButton
                      variant="primary"
                      disabled={isSwitching}
                      onClick={() => setPendingTarget(name)}
                    >
                      Switch
                    </ActionButton>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>

      {pendingTarget && (
        <ConfirmationPopup
          heading="Switch database?"
          title={`This will immediately point the whole backend at ${getDbLabel(
            pendingTarget
          )} (${pendingTarget}). Continue?`}
          acceptLabel="Switch"
          rejectLabel="Cancel"
          isLoaderShow={isSwitching}
          acceptedFunction={confirmSwitch}
          rejectedFunction={() => setPendingTarget(null)}
        />
      )}
    </DashboardLayout>
  );
};

export default DatabaseTarget;