"use client";
import { Placeholder } from "@/components/ui/placeholder";
import { Spinner } from "@/components/ui/spinner";
import { useServer } from "@/lib/hooks/use-server";
import type { ServerResponse } from "@/lib/types/mh-server";
import { X } from "lucide-react";
import { ServerMainPage } from "./server-page";
import { useMHSFServer } from "@/lib/hooks/use-mhsf-server";
import { AnimatedText } from "@/components/ui/animated-text";
import { useSettingsStore } from "@/lib/hooks/use-settings-store";
import { Button } from "@/components/ui/button";
import { DebugProvider } from "./debug/debug-provider";
import { ReportingProvider } from "./reporting/reporting-provider";
import { ServerEditorProvider } from "./server-editor/server-editor-provider";

export function ServerProvider({ serverId }: { serverId: string }) {
  const { server, error, loading } = useServer({ id: serverId });
  const settings = useSettingsStore();
  const mhsf = useMHSFServer(serverId);

  if (error !== null)
    return (
      <div className="absolute top-[50%] left-[50%]">
        <Placeholder
          icon={<X />}
          title="Error while fetching server"
          description={
            <>
              Try again later <br /> If this occurs again, please contact
              support or make a GitHub issue. <br /> {error}
            </>
          }
        />
      </div>
    );

  return (
    <DebugProvider
      debugOptions={{
        serverName: (server ?? { name: "" }).name,
        serverId: serverId,
        mhsfData: mhsf.server,
        serverData: server,
        onlineServerData: null,
      }}
    >
      {loading || mhsf.loading ? (
        <div className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 block justify-center text-center gap-2">
          <span className="w-full flex justify-center">
            <Spinner />
          </span>

          <span>
            <AnimatedText
              text={
                loading && mhsf.loading
                  ? "Loading server and MHSF data..."
                  : loading
                    ? "Loading server data..."
                    : "Loading MHSF data..."
              }
              className="text-center w-full mt-2"
            />
          </span>
          {settings.get("debug-mode") === "true" && (
            <Button
              onClick={() => window.dispatchEvent(new Event("open-debug-menu"))}
            >
              Debug Stack
            </Button>
          )}
        </div>
      ) : (
        <div className="px-10">
          <ServerEditorProvider>
            <ReportingProvider server={mhsf}>
              <ServerMainPage
                server={server as ServerResponse}
                mhsfData={mhsf}
              />
            </ReportingProvider>
          </ServerEditorProvider>
        </div>
      )}
    </DebugProvider>
  );
}