import { useEffect, useState, useMemo, useCallback, useRef } from "react";
import { motion, AnimatePresence, MotionConfig } from "framer-motion";
import "../css/App.css";
import HomeView from "../components/views/HomeView";
import SettingsView from "../components/views/SettingsView";
import VersionsView from "../components/views/VersionsView";
import DevtoolsView from "../components/views/DevtoolsView";
import GuidesView from "../components/views/GuidesView";
import SkinsView from "../components/views/SkinsView";
import WorkshopView from "../components/views/WorkshopView";
import SetupView from "../components/views/SetupView";
import PckEditorView from "../components/views/PckEditorView";
import { ArcEditorView } from "../components/views/ArcEditorView";
import LocEditorView from "../components/views/LocEditorView";
import GrfEditorView from "../components/views/GrfEditorView";
import ColEditorView from "../components/views/ColEditorView";
import OptionsEditorView from "../components/views/OptionsEditorView";
import ModelEditorView from "../components/views/ModelEditorView";
import ScreenshotsView from "../components/views/ScreenshotsView";
import SwfView from "../components/views/SwfView";
import LceOnlineView from "../components/views/LceOnlineView";
import CreditsView from "../components/views/CreditsView";
import SkinViewer from "../components/common/SkinViewer";
import PanoramaBackground from "../components/common/PanoramaBackground";
import { ClickParticles } from "../components/common/ClickParticles";
import { CinematicIntro } from "../components/common/CinematicIntro";
import { DownloadOverlay } from "../components/layout/DownloadOverlay";
import { AppHeader } from "../components/layout/AppHeader";
import { AchievementToast } from "../components/common/AchievementToast";
import GameLogModal from "../components/modals/GameLogModal";
import {
  useUI,
  useConfig,
  useAudio,
  useGame,
  useSkin,
} from "../context/LauncherContext";
import { TauriService } from "../services/TauriService";
import { lceOnlineService } from "../services/LceOnlineService";
import { useLceOnlineNotifications } from "../hooks/useLceOnlineNotifications";
import { usePluginViews } from "../plugins/PluginContext";
import { usePlatform } from "../hooks/usePlatform";
import { PluginManager } from "../plugins/PluginManager";
import { PluginViewContainer } from "../components/plugins/PluginViewContainer";
import type { Edition } from "../types/edition";
import type { ToastOptions } from "../plugins/types";
import pkg from "../../package.json";
import { getCurrent, onOpenUrl } from "@tauri-apps/plugin-deep-link";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { listen } from "@tauri-apps/api/event";
export default function App() {
  const ui = useUI();
  const {
    showIntro,
    setShowIntro,
    activeView,
    setActiveView,
    isUiHidden,
    setIsUiHidden,
    focusSection,
    onNavigateToMenu,
    updateMessage,
    updateUrl,
    clearUpdateMessage,
    connected,
  } = ui;
  const config = useConfig();
  const audio = useAudio();
  const game = useGame();
  const skin = useSkin();
  const { skinUrl, setSkinUrl, capeUrl } = skin;
  const notifications = useLceOnlineNotifications();
  const {
    friendRequestMessage,
    InviteMessage,
    clearFriendRequestMessage,
    clearInviteMessage,
    invites,
  } = notifications;
  const [showSetup, setShowSetup] = useState(false);
  const [isSetupChecked, setIsSetupChecked] = useState(false);
  const pendingDeepLinks = useRef<string[]>([]);
  const appReadyRef = useRef(false);
  const [workshopTarget, setWorkshopTarget] = useState<{
    id: string;
    type?: string;
  } | null>(null);
  const [addFriendTarget, setAddFriendTarget] = useState<string | null>(null);
  const displayIsDay = config.isDayTime;
  const clearError = useCallback(() => game.setError(null), [game]);
  const clearGameUpdate = useCallback(
    () => game.setGameUpdateMessage(null),
    [game],
  );
  const clearSteamSuccess = useCallback(
    () => game.setSteamSuccessMessage(null),
    [game],
  );
  const pluginViews = usePluginViews();
  const [pluginToast, setPluginToast] = useState<{
    message: string;
    options?: ToastOptions;
  } | null>(null);
  useEffect(() => {
    const pm = PluginManager.instance;
    pm.setNavigateCallback((viewId) => {
      setActiveView(viewId);
    });
    pm.setToastCallback((_pluginId, message, options) => {
      setPluginToast({ message, options });
    });
    pm.setSoundCallback((name) => {
      audio.playSfx(name);
    });
  }, [setActiveView, audio.playSfx]);

  useEffect(() => {
    if (!config.isLoaded) return;
    PluginManager.instance.updateSnapshots(
      { ...config } as unknown as Record<string, unknown>,
      {
        isGameRunning: game.isGameRunning,
        downloadProgress: game.downloadProgress,
        downloadingIds: game.downloadingIds,
      },
      game.installs,
    );
  }, [
    config,
    game.isGameRunning,
    game.downloadProgress,
    game.downloadingIds,
    game.installs,
    config.isLoaded,
  ]);

  useEffect(() => {
    if (showIntro && config.skipIntro) {
      setShowIntro(false);
    }
  }, [showIntro, config.skipIntro, setShowIntro]);

  const processDeepLink = useCallback(
    (url: string) => {
      try {
        const parsed = new URL(url);
        const path = parsed.hostname + parsed.pathname;
        const parts = path.replace(/^\/+/, "").split("/").filter(Boolean);
        if (parts.length === 0) return;
        const action = parts[0];
        if (action === "launch") {
          if (parts.length >= 2) {
            let instanceId = decodeURIComponent(parts[1]);
            if (instanceId === "neolegacy") instanceId = "legacy_evolved"; //neo: piebot said so
            TauriService.launchGame(instanceId, []).catch(console.error);
          } else {
            setActiveView("main");
            game.handleLaunch().catch(console.error);
          }
          return;
        }

        if (action === "lceonline" && parts.length >= 2) {
          if (parts[1] === "auth") {
            const token = parsed.searchParams.get("token");
            if (token) {
              lceOnlineService.loginWithTokenAndFetchAccount(token);
              setActiveView("lceonline");
              return;
            }
          }
          if (parts[1] === "addfriend") {
            const username = parsed.searchParams.get("username");
            if (username) {
              setActiveView("lceonline");
              setAddFriendTarget(username);
              return;
            }
          }
        }

        if (action === "workshop" && parts.length >= 2) {
          const workshopId = decodeURIComponent(parts[1]);
          const knownTypes = ["normal", "bytebukkit", "plugin", "version"];
          let workshopType: string | undefined;
          if (parts.length >= 3) {
            workshopType = parts[2];
          } else if (parsed.searchParams.get("type")) {
            workshopType = parsed.searchParams.get("type")!;
          } else {
            workshopType = knownTypes.find((t) => parsed.searchParams.has(t));
          }
          setActiveView("workshop");
          setWorkshopTarget({ id: workshopId, type: workshopType });
          return;
        }

        setActiveView(action); //neo: yeah no im not checking if its valid or not.
      } catch (e) {
        console.error("failed to parse deep link:", e);
      }
    },
    [setActiveView, game.handleLaunch, setWorkshopTarget],
  );

  const appReady =
    config.isLoaded && isSetupChecked && !showSetup && !showIntro;

  useEffect(() => {
    if (appReady) {
      appReadyRef.current = true;
      if (pendingDeepLinks.current.length > 0) {
        for (const url of pendingDeepLinks.current) {
          processDeepLink(url);
        }
        pendingDeepLinks.current = [];
      }
    }
  }, [appReady, processDeepLink]);

  const queueDeepLink = useCallback(
    (url: string) => {
      if (appReadyRef.current) {
        processDeepLink(url);
      } else {
        pendingDeepLinks.current.push(url);
      }
    },
    [processDeepLink],
  );

  useEffect(() => {
    getCurrent()
      .then((urls) => {
        if (urls && urls.length > 0) {
          queueDeepLink(urls[0]);
        }
      })
      .catch(() => {});

    let unlistenOpenUrl: Function;
    onOpenUrl((payload) => {
      for (const url of payload) {
        queueDeepLink(url);
      }
    }).then((unlistenFn) => {
      unlistenOpenUrl = unlistenFn;
    });

    let unlistenEvent: Function;
    listen<string[]>("deep-link", (event) => {
      for (const url of event.payload) {
        queueDeepLink(url);
      }
    }).then((unlistenFn) => {
      unlistenEvent = unlistenFn;
    });

    return () => {
      if (unlistenOpenUrl) unlistenOpenUrl();
      if (unlistenEvent) unlistenEvent();
    };
  }, [queueDeepLink]);
  const { isMac, isAndroid } = usePlatform();
  const [isFullscreen, setIsFullscreen] = useState(false);
  useEffect(() => {
    const appWindow = getCurrentWindow();
    if (!isMac && !isAndroid) appWindow.setDecorations(false);
    const checkFs = async () => setIsFullscreen(await appWindow.isFullscreen());
    checkFs();
    const unlisten = appWindow.onResized(checkFs);
    return () => {
      unlisten.then((fn: () => void) => fn());
    };
  }, [isMac, isAndroid]);
  const showHeader = (!isMac || isFullscreen) && !isAndroid;
  useEffect(() => {
    if (config.isLoaded) {
      const setupCompleted =
        localStorage.getItem("lce-setup-completed") === "true";
      setShowSetup(!setupCompleted);
      setIsSetupChecked(true);
    }
  }, [config.isLoaded]);

  const selectedEdition = useMemo(
    () => game.editions.find((e: Edition) => e.instanceId === config.profile),
    [game.editions, config.profile],
  );
  const selectedVersionName = selectedEdition?.name ?? "";
  const hasAnyInstall = game.installs.length > 0;
  const titleImage = selectedEdition?.titleImage ?? "/images/MenuTitle.png";
  const TITLE_HIDDEN_VIEWS = new Set([
    //neo: why an entire Set for that? yes. the answer is yes.
    "workshop",
    "lceonline",
    "devtools",
    "guides",
    "pck-editor",
    "arc-editor",
    "loc-editor",
    "grf-editor",
    "col-editor",
    "options-editor",
    "model-editor",
    "swf-editor",
  ]);
  useEffect(() => {
    const handleContextMenu = (e: MouseEvent) => e.preventDefault();
    document.addEventListener("contextmenu", handleContextMenu);
    return () => document.removeEventListener("contextmenu", handleContextMenu);
  }, []);

  const animDuration = config.animationsEnabled ? undefined : { duration: 0 };
  const uiFade = useMemo(
    () => ({
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      transition: animDuration ?? { duration: 0.5 },
    }),
    [animDuration],
  );

  const backgroundFade = useMemo(
    () => ({
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      transition: animDuration ?? { duration: 0.8 },
    }),
    [animDuration],
  );

  if (!config.isLoaded || !isSetupChecked) {
    return <div className="w-screen h-screen bg-black" />;
  }

  if (showSetup) {
    return (
      <div
        className={`w-screen h-screen overflow-hidden select-none flex flex-col relative bg-black text-white font-['Mojangles'] outline-none focus:outline-none ${!config.animationsEnabled ? "no-animations" : ""}`}
      >
        {showHeader && (
          <AppHeader playPressSound={audio.playPressSound} uiFade={uiFade} />
        )}
        <div className="absolute inset-0">
          <AnimatePresence>
            <motion.div
              key={displayIsDay ? "day" : "night"}
              className="absolute inset-0"
              {...backgroundFade}
            >
              <PanoramaBackground
                profile={selectedEdition?.panorama ?? "vanilla_tu19"}
                isDay={displayIsDay}
              />
            </motion.div>
          </AnimatePresence>
        </div>
        <SetupView
          onComplete={() => {
            setShowSetup(false);
            setShowIntro(true);
          }}
        />
      </div>
    );
  }

  if (showIntro && !config.skipIntro) {
    return (
      <div
        className={`w-screen h-screen overflow-hidden select-none flex flex-col relative bg-black text-white font-['Mojangles'] outline-none focus:outline-none ${!config.animationsEnabled ? "no-animations" : ""}`}
      >
        <CinematicIntro
          onComplete={() => {
            setShowIntro(false);
          }}
          startMusic={audio.startMusic}
        />
      </div>
    );
  }

  return (
    <MotionConfig transition={config.animationsEnabled ? {} : { duration: 0 }}>
      <div
        className={`w-screen h-screen overflow-hidden select-none flex flex-col relative bg-black text-white font-['Mojangles'] outline-none focus:outline-none ${!config.animationsEnabled ? "no-animations" : ""}`}
      >
        <div className="absolute inset-0">
          <AnimatePresence>
            <motion.div
              key={displayIsDay ? "day" : "night"}
              className="absolute inset-0"
              {...backgroundFade}
            >
              <PanoramaBackground
                profile={selectedEdition?.panorama ?? "vanilla_tu19"}
                isDay={displayIsDay}
              />
            </motion.div>
          </AnimatePresence>
        </div>

        {config.vfxEnabled && <ClickParticles />}
        {showHeader && (
          <AppHeader playPressSound={audio.playPressSound} uiFade={uiFade} />
        )}

        <DownloadOverlay
          downloadProgress={game.downloadProgress}
          downloadingIds={game.downloadingIds}
          editions={game.editions}
        />

        <AchievementToast
          message={game.gameLog ? null : game.error}
          onClose={clearError}
        />
        <GameLogModal
          isOpen={!!game.gameLog}
          log={game.gameLog}
          onClose={game.clearGameLog}
          playBackSound={audio.playBackSound}
        />

        <AchievementToast
          message={updateMessage}
          onClose={clearUpdateMessage}
          onClick={() =>
            TauriService.openUrl(
              updateUrl ||
                "https://github.com/LCE-Hub/LCE-Emerald-Launcher/releases/latest",
            )
          }
          title="Update Available!"
          variant="update"
        />

        <AchievementToast
          message={game.gameUpdateMessage}
          onClose={clearGameUpdate}
          onClick={() => {
            clearGameUpdate();
            setActiveView("versions");
          }}
          title="Game Update Available!"
          variant="update"
        />

        <AchievementToast
          message={game.steamSuccessMessage}
          onClose={clearSteamSuccess}
          title="Steam Integration"
          variant="steam"
        />

        {pluginToast && (
          <AchievementToast
            message={pluginToast.message}
            onClose={() => setPluginToast(null)}
            title={pluginToast.options?.title}
            variant={pluginToast.options?.variant}
          />
        )}

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className={`flex flex-col h-full z-10 w-full relative ${showHeader ? "pt-12" : ""}`}
        >
          {!config.legacyMode && !isAndroid && (
            <motion.div {...uiFade} className="absolute top-10 left-8 z-50">
              <button
                onClick={() => {
                  audio.playPressSound();
                  setIsUiHidden(!isUiHidden);
                }}
                className="outline-none bg-transparent border-none"
              >
                <img
                  src={
                    isUiHidden
                      ? "/images/Unhide_UI_Button.png"
                      : "/images/Hide_UI_Button.png"
                  }
                  className="w-10 h-10 cursor-pointer object-contain"
                  style={{ imageRendering: "pixelated" }}
                />
              </button>
            </motion.div>
          )}

          {isAndroid && activeView !== "main" && (
            <motion.div {...uiFade} className="absolute top-10 left-8 z-50">
              <button
                onClick={() => {
                  audio.playBackSound();
                  setActiveView("main");
                }}
                className="outline-none border-none flex items-center justify-center w-10 h-10 cursor-pointer"
                aria-label="Back"
                style={{
                  backgroundImage: "url('/images/Button_Square.png')",
                  backgroundSize: "100% 100%",
                  imageRendering: "pixelated",
                }}
                onMouseEnter={(e) =>
                  ((
                    e.currentTarget as HTMLButtonElement
                  ).style.backgroundImage =
                    "url('/images/Button_Square_Highlighted.png')")
                }
                onMouseLeave={(e) =>
                  ((
                    e.currentTarget as HTMLButtonElement
                  ).style.backgroundImage = "url('/images/Button_Square.png')")
                }
              >
                <svg
                  width="26"
                  height="26"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="#FFFFFF"
                  strokeWidth="2.5"
                  strokeLinecap="square"
                  strokeLinejoin="miter"
                  className="drop-shadow-[2px_2px_0_rgba(0,0,0,0.8)]"
                >
                  <polyline points="15 18 9 12 15 6" />
                </svg>
              </button>
            </motion.div>
          )}

          {!config.legacyMode && (
            <motion.div
              {...uiFade}
              className="absolute bottom-6 right-8 z-50 flex items-center gap-3"
            >
              <span className="text-[#E0E0E0] text-[10px] mc-text-shadow tracking-widest uppercase opacity-70 mt-1">
                {displayIsDay ? "Day" : "Night"}
              </span>
              <button
                onClick={() => {
                  audio.playPressSound();
                  config.setIsDayTime(!config.isDayTime);
                }}
                className="outline-none bg-transparent border-none"
              >
                <img
                  src={
                    displayIsDay
                      ? "/images/Day_Toggle.png"
                      : "/images/Night_Toggle.png"
                  }
                  alt="Toggle Time"
                  className="w-12 h-12 cursor-pointer block object-contain"
                  style={{ imageRendering: "pixelated" }}
                />
              </button>
            </motion.div>
          )}

          {isUiHidden && !displayIsDay && activeView === "devtools" && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.8 }}
              className="absolute inset-0 z-[100] flex items-center justify-center pointer-events-none"
            >
              <button
                onClick={() => {
                  audio.playPressSound();
                  setIsUiHidden(false);
                  setActiveView("swf-editor");
                }}
                className="pointer-events-auto outline-none bg-transparent border-none flex flex-col items-center gap-2 group"
              >
                <img
                  src="/images/tools/pck.png"
                  className="w-16 h-16 cursor-pointer object-contain opacity-50 drop-shadow-[0_4px_4px_rgba(0,0,0,1)] grayscale"
                  style={{ imageRendering: "pixelated" }}
                  onError={(e) => {
                    (e.target as HTMLImageElement).src =
                      "/images/Button_Background.png";
                  }}
                />
                <span className="text-[#FFFF55] text-sm mc-text-shadow">
                  SWF Editor
                </span>
              </button>
            </motion.div>
          )}

          <div className="shrink-0 flex justify-center py-4 relative w-full pt-4">
            <div className="relative w-full max-w-135 flex justify-center">
              {activeView !== "credits" &&
                !TITLE_HIDDEN_VIEWS.has(activeView) && (
                  <motion.img
                    layoutId="mainLogo"
                    src={titleImage}
                    transition={{
                      type: "spring",
                      stiffness: 300,
                      damping: 25,
                    }}
                    className="w-full drop-shadow-[0_8px_6px_rgba(0,0,0,0.8)] pointer-events-none"
                    style={{ imageRendering: "pixelated" }}
                  />
                )}
              {activeView !== "credits" &&
                !TITLE_HIDDEN_VIEWS.has(activeView) && (
                  <motion.div
                    {...uiFade}
                    className="absolute bottom-[20%] right-[5%] w-0 h-0 flex items-center justify-center"
                  >
                    <div
                      onClick={audio.cycleSplash}
                      className="mc-splash text-[#FFFF55] text-[28px] z-100 cursor-pointer whitespace-nowrap"
                      style={{ textShadow: "2px 2px 0px #3F3F00" }}
                    >
                      {audio.splashIndex === -1
                        ? `Welcome ${config.username}!`
                        : audio.splashes[audio.splashIndex]}
                    </div>
                  </motion.div>
                )}
              {activeView === "main" &&
                hasAnyInstall &&
                titleImage === "/images/MenuTitle.png" && (
                  <motion.div
                    {...uiFade}
                    className="absolute -bottom-6 text-[#A0A0A0] text-sm mc-text-shadow tracking-widest uppercase opacity-80 font-['Mojangles']"
                  >
                    {selectedVersionName}
                  </motion.div>
                )}
            </div>
          </div>

          <main className="flex-1 w-full relative min-h-0">
            <div
              className={`w-full h-full flex flex-col items-center justify-center ${isUiHidden ? "opacity-0 pointer-events-none" : "opacity-100"}`}
            >
              <AnimatePresence mode="wait">
                {activeView === "main" && (
                  <SkinViewer
                    key="skin-viewer"
                    username={config.username}
                    setUsername={config.setUsername}
                    playPressSound={audio.playPressSound}
                    skinUrl={skinUrl}
                    capeUrl={config.legacyMode ? null : capeUrl}
                    setSkinUrl={setSkinUrl}
                    setActiveView={setActiveView}
                    setIsUiHidden={setIsUiHidden}
                    isFocusedSection={focusSection === "skin"}
                    onNavigateRight={onNavigateToMenu}
                  />
                )}
              </AnimatePresence>

              <div className="w-full h-full max-w-7xl relative flex justify-center items-center overflow-hidden">
                <AnimatePresence mode="wait">
                  {activeView === "main" && <HomeView key="main-view" />}
                  {activeView === "settings" && (
                    <SettingsView key="settings-view" />
                  )}
                  {activeView === "versions" && (
                    <VersionsView key="versions-view" />
                  )}
                  {activeView === "workshop" && (
                    <WorkshopView
                      key="workshop-view"
                      workshopTarget={workshopTarget}
                      onClearWorkshopTarget={() => setWorkshopTarget(null)}
                    />
                  )}
                  {activeView === "devtools" && (
                    <DevtoolsView key="devtools-view" />
                  )}
                  {activeView === "guides" && <GuidesView key="guides-view" />}
                  {activeView === "pck-editor" && (
                    <PckEditorView key="pck-editor-view" />
                  )}
                  {activeView === "arc-editor" && (
                    <ArcEditorView key="arc-editor-view" />
                  )}
                  {activeView === "loc-editor" && (
                    <LocEditorView key="loc-editor-view" />
                  )}
                  {activeView === "grf-editor" && (
                    <GrfEditorView key="grf-editor-view" />
                  )}
                  {activeView === "col-editor" && (
                    <ColEditorView key="col-editor-view" />
                  )}
                  {activeView === "options-editor" && (
                    <OptionsEditorView key="options-editor-view" />
                  )}
                  {activeView === "model-editor" && (
                    <ModelEditorView key="model-editor-view" />
                  )}
                  {activeView === "swf-editor" && (
                    <SwfView key="swf-editor-view" />
                  )}
                  {activeView === "lceonline" && (
                    <LceOnlineView
                      key="lceonline-view"
                      addFriendTarget={addFriendTarget}
                      onClearAddFriendTarget={() => setAddFriendTarget(null)}
                      invites={invites}
                    />
                  )}
                  {activeView === "skins" && <SkinsView key="skins-view" />}
                  {activeView === "screenshots" && (
                    <ScreenshotsView key="screenshots-view" />
                  )}
                  {activeView === "credits" && (
                    <CreditsView key="credits-view" />
                  )}
                  {pluginViews.map((pv) => {
                    if (activeView === pv.id) {
                      return <PluginViewContainer key={pv.id} registry={pv} />;
                    }
                    return null;
                  })}
                </AnimatePresence>
              </div>
            </div>
          </main>

          <motion.footer
            {...uiFade}
            className="shrink-0 p-4 flex justify-between items-end text-[10px] text-[#A0A0A0] mc-text-shadow bg-gradient-to-t from-black/80 to-transparent uppercase tracking-widest opacity-60 font-['Mojangles']"
            style={{ fontWeight: "normal" }}
          >
            <div className="flex-1 text-left whitespace-nowrap">
              Version: {pkg.version} ({__BUILD_DATE__})
            </div>
            <div className="flex-[2] text-center whitespace-nowrap">
              Not affiliated with Mojang AB or Microsoft. "Minecraft" is a
              trademark of Mojang Synergies AB.
            </div>
            <div className="flex-1 text-right whitespace-nowrap">
              {connected && "CONTROLLER CONNECTED"}
            </div>
          </motion.footer>
        </motion.div>

        <AchievementToast
          message={friendRequestMessage}
          onClose={clearFriendRequestMessage}
          onClick={() => {
            clearFriendRequestMessage();
            setActiveView("lceonline");
          }}
          title="Friend Request"
          variant="update"
        />

        <AchievementToast
          message={InviteMessage}
          onClose={clearInviteMessage}
          onClick={() => {
            clearInviteMessage();
            setActiveView("lceonline");
          }}
          title="Game Invite"
          variant="update"
        />
      </div>
    </MotionConfig>
  );
}