import {
  useState,
  useEffect,
  useLayoutEffect,
  useRef,
  useCallback,
  memo,
} from "react";
import { useTranslation } from "react-i18next";
import { motion } from "framer-motion";
import { TauriService, PlaytimeResponse } from "../../services/TauriService";
import CustomTUModal from "../modals/CustomTUModal";
import SetUidModal from "../modals/SetUidModal";
import ImportWorldModal from "../modals/ImportWorldModal";
import PlaytimeModal from "../modals/PlaytimeModal";
import CustomizeModal from "../modals/CustomizeModal";
import DownloadDlcModal from "../modals/DownloadDlcModal";
import OptionsModal from "../modals/OptionsModal";
import { parseSchema } from "../../utils/argsSchema";
import {
  useUI,
  useConfig,
  useAudio,
  useGame,
} from "../../context/LauncherContext";
import { ScreenshotImage } from "../common/ScreenshotImage";
import { usePlatform } from "../../hooks/usePlatform";
import type { Edition } from "../../types/edition";
import { HIDDEN_INSTANCE_URL } from "../../types/edition";
interface DeleteConfirmButtonProps {
  label: string;
  onClick: () => void;
  isDanger?: boolean;
}

const DeleteConfirmButton = memo(function DeleteConfirmButton({
  label,
  onClick,
  isDanger = false,
}: DeleteConfirmButtonProps) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className={`w-24 h-10 flex items-center justify-center mc-text-shadow transition-colors ${
        isDanger ? "text-red-500" : "text-white"
      } ${isHovered ? (isDanger ? "text-red-400" : "text-[#FFFF55]") : ""}`}
      style={{
        backgroundImage: isHovered
          ? "url('/images/button_highlighted.png')"
          : "url('/images/Button_Background.png')",
        backgroundSize: "100% 100%",
        imageRendering: "pixelated",
      }}
    >
      {label}
    </button>
  );
});

const ROW_ESTIMATE = 52;
const ROW_GAP = 4;
const VersionsView = memo(function VersionsView() {
  const { t } = useTranslation();
  const { setActiveView } = useUI();
  const {
    setProfile: setSelectedProfile,
    animationsEnabled,
    instanceLaunchArgs,
    setInstanceLaunchArgs,
  } = useConfig();
  const { playPressSound, playBackSound } = useAudio();
  const {
    editions,
    installs: installedVersions,
    toggleInstall,
    handleUninstall,
    handleCancelDownload,
    deleteCustomEdition: onDeleteEdition,
    addCustomEdition: onAddEdition,
    updateCustomEdition: onUpdateEdition,
    downloadingIds,
    updatesAvailable,
    addToSteam,
    cycleBranch,
    customizations,
    updateCustomization,
    saveCustomPath,
  } = useGame();
  const { isDayTime } = useConfig();
  const { isAndroid } = usePlatform();
  const visibleEditions = editions.filter(
    (e) =>
      e.url !== HIDDEN_INSTANCE_URL || installedVersions.includes(e.instanceId),
  );
  const [focusIndex, setFocusIndex] = useState<number>(0);
  const [focusBtn, setFocusBtn] = useState<number>(0);
  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
  const [isSetUidModalOpen, setIsSetUidModalOpen] = useState(false);
  const [setUidTargetId, setSetUidTargetId] = useState("");
  const [editingEdition, setEditingEdition] = useState<Edition | null>(null);
  const [isImportWorldModalOpen, setIsImportWorldModalOpen] = useState(false);
  const [importWorldTarget, setImportWorldTarget] = useState<{
    id: string;
    name: string;
  } | null>(null);
  const [isPlaytimeModalOpen, setIsPlaytimeModalOpen] = useState(false);
  const [playtimeTarget, setPlaytimeTarget] = useState<{
    id: string;
    name: string;
  } | null>(null);
  const [isCustomizeModalOpen, setIsCustomizeModalOpen] = useState(false);
  const [customizeTarget, setCustomizeTarget] = useState<Edition | null>(null);
  const [_playtimeMap, setPlaytimeMap] = useState<
    Record<string, PlaytimeResponse>
  >({});
  const [initialPath, setInitialPath] = useState<string>("");
  const [_hoveredBtn, setHoveredBtn] = useState<{
    row: number;
    btn: string;
  } | null>(null);
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
  const [deleteConfirmEdition, setDeleteConfirmEdition] =
    useState<Edition | null>(null);
  const [isDlcModalOpen, setIsDlcModalOpen] = useState(false);
  const [dlcTargetEdition, setDlcTargetEdition] = useState<Edition | null>(
    null,
  );
  const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
  const [optionsTarget, setOptionsTarget] = useState<{
    id: string;
    name: string;
  } | null>(null);
  const [argsSchemas, setArgsSchemas] = useState<Record<string, boolean>>({});
  const [thumb, setThumb] = useState({ height: 0, top: 0 });
  const containerRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const thumbRef = useRef<HTMLDivElement>(null);
  const dragOffsetRef = useRef(0);
  const draggingRef = useRef(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const [menuDir, setMenuDir] = useState<"down" | "up">("down");
  const ITEM_COUNT = visibleEditions.length;
  const [visibleRange, setVisibleRange] = useState<{
    start: number;
    end: number;
  }>({
    start: 0,
    end: visibleEditions.length ? visibleEditions.length - 1 : 0,
  });
  const itemHeightsRef = useRef<number[]>([]);
  const observersRef = useRef<Map<number, ResizeObserver>>(new Map());
  const visibleEditionsRef = useRef(visibleEditions);
  visibleEditionsRef.current = visibleEditions;
  const focusIndexRef = useRef(focusIndex);
  const openMenuIdRef = useRef(openMenuId);
  const updateThumb = useCallback(() => {
    const container = listRef.current;
    const track = trackRef.current;
    if (!container || !track) return;
    const scrollHeight = container.scrollHeight;
    const clientHeight = container.clientHeight;
    const scrollable = scrollHeight - clientHeight;
    if (scrollable <= 0) {
      setThumb((prev) =>
        prev.height === 0 && prev.top === 0 ? prev : { height: 0, top: 0 },
      );
      return;
    }
    const trackHeight = track.clientHeight;
    const HANDLE = 40;
    const STEP = HANDLE + 4;
    const maxTop = trackHeight - HANDLE;
    const maxIndex = Math.max(1, Math.floor(maxTop / STEP));
    const index = Math.min(
      maxIndex,
      Math.round((container.scrollTop / scrollable) * maxIndex),
    );
    const top = index * STEP;
    setThumb((prev) =>
      prev.top === top && prev.height === HANDLE
        ? prev
        : { height: HANDLE, top },
    );
  }, []);

  const handleThumbPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
    e.preventDefault();
    draggingRef.current = true;
    dragOffsetRef.current =
      e.clientY - e.currentTarget.getBoundingClientRect().top;
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const handleThumbPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    if (!draggingRef.current) return;
    const container = listRef.current;
    const track = trackRef.current;
    if (!container || !track) return;
    const trackRect = track.getBoundingClientRect();
    const trackTop = trackRect.top + track.clientTop;
    const y = e.clientY - trackTop - dragOffsetRef.current;
    const trackHeight = track.clientHeight;
    const maxTop = Math.max(0, trackHeight - thumb.height);
    const scrollable = container.scrollHeight - container.clientHeight;
    if (scrollable <= 0) return;
    const clampedY = Math.min(Math.max(y, 0), maxTop);
    container.scrollTop = (clampedY / maxTop) * scrollable;
  };

  const handleThumbPointerUp = () => {
    draggingRef.current = false;
  };

  const updateVisibleRange = useCallback(() => {
    const container = listRef.current;
    const editions = visibleEditionsRef.current;
    if (!container) return;
    const scrollTop = container.scrollTop;
    const viewportHeight = container.clientHeight;
    const heights = itemHeightsRef.current;
    const n = editions.length;
    let acc = 0;
    let start = n;
    let end = -1;
    for (let i = 0; i < n; i++) {
      const itemTop = acc;
      const itemNeo = acc + (heights[i] ?? ROW_ESTIMATE); //neo: me fr fr :3
      if (itemTop >= scrollTop && itemNeo <= scrollTop + viewportHeight) {
        if (start === n) start = i;
        end = i;
      }
      acc += (heights[i] ?? ROW_ESTIMATE) + ROW_GAP;
    }
    if (start === n) start = 0;
    if (end < 0) end = n - 1;
    const fi = focusIndexRef.current;
    if (fi >= 0 && fi < n) {
      start = Math.min(start, fi);
      end = Math.max(end, fi);
    }
    const menuId = openMenuIdRef.current;
    if (menuId) {
      const mi = editions.findIndex((e) => e.id === menuId);
      if (mi >= 0) {
        start = Math.min(start, mi);
        end = Math.max(end, mi);
      }
    }
    setVisibleRange((prev) =>
      prev.start === start && prev.end === end ? prev : { start, end },
    );
    updateThumb();
  }, [updateThumb]);

  const setRowRef = (index: number) => (el: HTMLDivElement | null) => {
    if (el) {
      let ro = observersRef.current.get(index);
      if (!ro) {
        ro = new ResizeObserver(() => {
          itemHeightsRef.current[index] = el.offsetHeight;
          updateVisibleRange();
        });
        observersRef.current.set(index, ro);
      }
      ro.observe(el);
    } else {
      const ro = observersRef.current.get(index);
      if (ro) {
        ro.disconnect();
        observersRef.current.delete(index);
      }
    }
  };

  useEffect(() => {
    focusIndexRef.current = focusIndex;
  }, [focusIndex]);

  useEffect(() => {
    openMenuIdRef.current = openMenuId;
  }, [openMenuId]);

  useEffect(() => {
    const container = listRef.current;
    if (!container) return;
    const ro = new ResizeObserver(() => updateVisibleRange());
    ro.observe(container);
    updateVisibleRange();
    return () => {
      ro.disconnect();
      observersRef.current.forEach((obs) => obs.disconnect());
      observersRef.current.clear();
    };
  }, [updateVisibleRange]);
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (document.activeElement?.tagName === "INPUT") return;
      if (
        isImportModalOpen ||
        isSetUidModalOpen ||
        isImportWorldModalOpen ||
        isPlaytimeModalOpen ||
        isCustomizeModalOpen ||
        isDlcModalOpen ||
        isOptionsModalOpen ||
        deleteConfirmEdition
      ) {
        return;
      }

      if (e.key === "Escape" || e.key === "Backspace") {
        playBackSound();
        setActiveView("main");
        return;
      }

      if (e.key === "ArrowDown") {
        e.preventDefault();
        setFocusIndex((prev) => (prev >= ITEM_COUNT - 1 ? 0 : prev + 1));
        setFocusBtn(0);
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        setFocusIndex((prev) => (prev <= 0 ? ITEM_COUNT - 1 : prev - 1));
        setFocusBtn(0);
      } else if (e.key === "ArrowLeft") {
        e.preventDefault();
        if (focusIndex < visibleEditions.length) {
          const edition = visibleEditions[focusIndex];
          const isInstalled = installedVersions.includes(edition.instanceId);
          const maxBtn = isInstalled ? 1 : 2;
          setFocusBtn((prev) => (prev <= 0 ? maxBtn : prev - 1));
        }
      } else if (e.key === "ArrowRight") {
        e.preventDefault();
        if (focusIndex < visibleEditions.length) {
          const edition = visibleEditions[focusIndex];
          const isInstalled = installedVersions.includes(edition.instanceId);
          const maxBtn = isInstalled ? 1 : 2;
          setFocusBtn((prev) => (prev >= maxBtn ? 0 : prev + 1));
        }
      } else if (e.key === "Enter") {
        e.preventDefault();
        if (focusIndex < visibleEditions.length) {
          const edition = visibleEditions[focusIndex];
          const isInstalled = installedVersions.includes(edition.instanceId);
          const isDownloading = downloadingIds.includes(edition.instanceId);
          if (focusBtn === 0) {
            playPressSound();
            setOpenMenuId(null);
            setSelectedProfile(edition.instanceId);
          } else if (focusBtn === 2 || (focusBtn === 1 && isInstalled)) {
            playPressSound();
            setOpenMenuId(openMenuId === edition.id ? null : edition.id);
          } else if (focusBtn === 1 && !isInstalled) {
            playPressSound();
            if (isDownloading) {
              handleCancelDownload(edition.instanceId);
            } else {
              toggleInstall(edition.instanceId);
            }
          }
        } else if (focusIndex === visibleEditions.length) {
          playPressSound();
          setIsImportModalOpen(true);
        } else if (focusIndex === visibleEditions.length + 1) {
          playPressSound();
          handleImportFolder();
        } else {
          playBackSound();
          setActiveView("main");
        }
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [
    focusIndex,
    focusBtn,
    editions,
    installedVersions,
    downloadingIds,
    ITEM_COUNT,
    playPressSound,
    playBackSound,
    setSelectedProfile,
    setActiveView,
    toggleInstall,
    handleCancelDownload,
    addToSteam,
    isDayTime,
    isImportModalOpen,
    isSetUidModalOpen,
    isImportWorldModalOpen,
    isPlaytimeModalOpen,
    isCustomizeModalOpen,
    isDlcModalOpen,
    isOptionsModalOpen,
    deleteConfirmEdition,
  ]);

  useEffect(() => {
    if (focusIndex < visibleEditions.length && listRef.current) {
      const el = listRef.current.querySelector(
        `[data-index="${focusIndex}"]`,
      ) as HTMLElement;
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "nearest" });
      }
    }
  }, [focusIndex]);

  useLayoutEffect(() => {
    if (!openMenuId) return;
    const container = listRef.current;
    const menu = menuRef.current;
    if (!container || !menu) return;
    const row = menu.closest("[data-index]") as HTMLElement | null;
    if (!row) return;
    const containerRect = container.getBoundingClientRect();
    const rowRect = row.getBoundingClientRect();
    const menuHeight = menu.offsetHeight;
    const spaceBelow = containerRect.bottom - rowRect.bottom;
    const spaceAbove = rowRect.top - containerRect.top;
    setMenuDir(
      spaceBelow < menuHeight && spaceAbove > spaceBelow ? "up" : "down",
    );
  }, [openMenuId]);

  useEffect(() => {
    const fetchPlaytimes = async () => {
      const map: Record<string, PlaytimeResponse> = {};
      await Promise.all(
        installedVersions.map(async (id) => {
          try {
            map[id] = await TauriService.getPlaytime(id);
          } catch (e) {
            console.error(e);
          }
        }),
      );
      setPlaytimeMap(map);
    };
    fetchPlaytimes();
  }, [installedVersions]);

  useEffect(() => {
    let cancelled = false;
    const checkSchemas = async () => {
      const map: Record<string, boolean> = {};
      await Promise.all(
        installedVersions.map(async (id) => {
          try {
            const schema = await TauriService.getInstanceArgsSchema(id);
            map[id] = !!schema && parseSchema(schema) !== null;
          } catch (e) {
            console.error(e);
            map[id] = false;
          }
        }),
      );
      if (!cancelled) setArgsSchemas(map);
    };
    checkSchemas();
    return () => {
      cancelled = true;
    };
  }, [installedVersions]);

  const handleEditionClick = (edition: Edition, index: number) => {
    playPressSound();
    setSelectedProfile(edition.instanceId);
    setFocusIndex(index);
  };

  const handleImportFolder = async () => {
    try {
      const folder = await TauriService.pickFolder();
      if (folder) {
        setInitialPath(folder);
        setIsImportModalOpen(true);
      }
    } catch (e) {
      if (e !== "CANCELED") console.error(e);
    }
  };

  const handleImportWorld = (instanceId: string) => {
    const edition = visibleEditions.find(
      (e: Edition) => e.instanceId === instanceId,
    );
    setImportWorldTarget({ id: instanceId, name: edition?.name ?? instanceId });
    setIsImportWorldModalOpen(true);
  };

  return (
    <motion.div
      ref={containerRef}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      transition={{ duration: animationsEnabled ? 0.25 : 0 }}
      className="flex flex-col items-center w-full max-w-5xl outline-none"
    >
      <div className="w-full min-w-120 p-1 mb-3 mc-options-bg relative flex items-stretch">
        <div
          ref={listRef}
          onScroll={updateVisibleRange}
          className="flex-1 min-w-0 h-85 max-h-85 overflow-y-auto snap-y snap-mandatory mc-versionrecess hidden-scrollbar"
        >
          <div className="flex flex-col gap-1 hidden-scrollbar">
            {visibleEditions.map((edition: Edition, i: number) => {
              if (i < visibleRange.start || i > visibleRange.end) {
                return (
                  <div
                    key={edition.id}
                    data-index={i}
                    style={{
                      height: itemHeightsRef.current[i] ?? ROW_ESTIMATE,
                    }}
                    className="w-[calc(100%-20px)] shrink-0 snap-start"
                  />
                );
              }
              const isInstalled = installedVersions.includes(
                edition.instanceId,
              );
              const isFocused = focusIndex === i;
              const isCustom = edition.id.startsWith("custom_");
              const isDownloading = downloadingIds.includes(edition.instanceId);
              const isComingSoon = edition.comingSoon;
              const isDownloadFocused =
                !isInstalled && isFocused && focusBtn === 1;
              const isGearFocused =
                isFocused && focusBtn === (isInstalled ? 1 : 2);
              return (
                <div
                  key={edition.id}
                  data-index={i}
                  ref={setRowRef(i)}
                  className={`w-[calc(100%-20px)] snap-start flex items-center gap-3 ${!isFocused ? "mc-button-ninesliced" : "mc-button-ninesliced-selected"} ${isComingSoon ? "opacity-50 cursor-not-allowed" : ""} relative ${openMenuId === edition.id ? "z-50" : "z-0"}`}
                  onMouseEnter={() => !isComingSoon && setFocusIndex(i)}
                  onMouseLeave={() => setFocusIndex(-1)} //neo: you see this, smartcmd?
                  onClick={() =>
                    !isComingSoon && handleEditionClick(edition, i)
                  }
                >
                  <div className="w-12 h-12 flex items-center justify-center shrink-0 bg-[url(/images/empty.png)] bg-cover bg-center bg-no-repeat">
                    {edition.logo ? (
                      edition.logo.startsWith("http") ||
                      edition.logo.startsWith("/images") ? (
                        <img
                          src={edition.logo}
                          alt=""
                          className={`w-10 h-10 object-contain ${isComingSoon ? "opacity-40 grayscale" : ""}`}
                          style={{ imageRendering: "pixelated" }}
                        />
                      ) : (
                        <ScreenshotImage
                          path={edition.logo}
                          alt=""
                          className={`w-6 h-6 object-contain ${isComingSoon ? "opacity-40 grayscale" : ""}`}
                          style={{ imageRendering: "pixelated" }}
                        />
                      )
                    ) : (
                      <div className="w-6 h-6 bg-gray-600/30 rounded-sm" />
                    )}
                  </div>

                  <div
                    className={`flex-1 text-left min-w-0 outline-none rounded cursor-pointer ${isComingSoon ? "cursor-not-allowed" : ""}`}
                  >
                    <div className="flex items-center gap-2">
                      <span
                        className={`text-xl tracking-wide truncate ${!isFocused ? "text-white" : "text-[#ffff00]"}`}
                        style={{ textShadow: "none" }}
                      >
                        {edition.name}
                      </span>
                      {edition.category &&
                        edition.category.map((cat: string) => (
                          <span
                            key={cat}
                            className="text-[9px] px-1.5 py-0.5 bg-[#444] text-[#aaa] font-bold uppercase border border-[#555] mc-text-shadow"
                          >
                            {cat}
                          </span>
                        ))}
                      {isCustom && !edition.category && (
                        <span className="text-[10px] px-1.5 py-0.5 bg-[#777] text-[#222] font-bold uppercase">
                          {t("versions.custom")}
                        </span>
                      )}
                    </div>
                  </div>

                  <div className="flex items-center gap-2 shrink-0 relative">
                    {!isInstalled && (
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          if (!isDownloading) {
                            toggleInstall(edition.instanceId);
                          } else {
                            handleCancelDownload(edition.instanceId);
                          }
                        }}
                        onMouseEnter={() =>
                          setHoveredBtn({ row: i, btn: "main" })
                        }
                        onMouseLeave={() => setHoveredBtn(null)}
                        className={`w-10 h-10 flex items-center justify-center bg-cover bg-no-repeat bg-center transition-all
                          ${
                            isDownloadFocused
                              ? "bg-[url(/images/checkbox_highlighted.png)] ring-4" //neo: ring-4 does not render at all (i dunno why tbh), so transition from ring-0 to ring-4 creates a transition indicating that it was selected. this is a coincidence but im keeping it
                              : "bg-[url(/images/checkbox.png)] ring-0"
                          }`}
                        style={{
                          imageRendering: "pixelated",
                        }}
                      >
                        <img
                          src={
                            isDownloading
                              ? "/images/Trash_Bin_Icon.png"
                              : "/images/Download_Icon.png"
                          }
                          alt=""
                          className="w-8 h-8 object-contain"
                          style={{
                            imageRendering: "pixelated",
                            filter: isDownloading
                              ? "hue-rotate(300deg)"
                              : "none",
                          }}
                        />
                      </button>
                    )}
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        playPressSound();
                        setOpenMenuId(
                          openMenuId === edition.id ? null : edition.id,
                        );
                      }}
                      onMouseEnter={() =>
                        setHoveredBtn({ row: i, btn: "menu" })
                      }
                      onMouseLeave={() => setHoveredBtn(null)}
                      className={`w-10 h-10 flex flex-col items-center justify-center gap-1 relative bg-cover bg-no-repeat bg-center transition-all
                        ${
                          isGearFocused
                            ? "bg-[url(/images/checkbox_highlighted.png)] ring-4" //neo: same comment as the download button above
                            : "bg-[url(/images/checkbox.png)] ring-0"
                        }`}
                      style={{
                        imageRendering: "pixelated",
                      }}
                    >
                      <div className={"w-8 h-8"}>
                        <img
                          src={
                            updatesAvailable?.[edition.instanceId]
                              ? "/images/Update_Icon.png"
                              : "/images/gear.png"
                          }
                        />
                      </div>
                    </button>

                    {openMenuId === edition.id && (
                      <div
                        ref={menuRef}
                        className={`absolute right-0 ${menuDir === "up" ? "bottom-full mb-2" : "top-11"} w-48 bg-[#1a1a1a] border-2 border-[#555] z-[100] shadow-2xl p-0.5 animate-in fade-in zoom-in duration-75`}
                        style={{
                          imageRendering: "pixelated",
                        }}
                      >
                        {updatesAvailable?.[edition.instanceId] && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              toggleInstall(edition.instanceId);
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-1.5 text-xs text-[#ffff55] hover:text-white hover:bg-[#ffff55]/20 flex items-center gap-2 group transition-colors mc-text-shadow font-bold border-b border-white/5 mb-1"
                          >
                            <img
                              src="/images/Update_Icon.png"
                              alt=""
                              className="w-3 h-3 object-contain"
                              style={{ imageRendering: "pixelated" }}
                            />
                            {t("versions.updateAvailable")}
                          </button>
                        )}
                        {!isAndroid && !isInstalled && (
                          <button
                            onClick={async (e) => {
                              e.stopPropagation();
                              playPressSound();
                              setOpenMenuId(null);
                              try {
                                const folder = await TauriService.pickFolder();
                                if (folder) {
                                  const entries =
                                    await TauriService.listDirectory(folder);
                                  if (entries.length > 0) {
                                    const dialog =
                                      document.createElement("div");
                                    dialog.className =
                                      "fixed inset-0 bg-black/80 flex items-center justify-center z-50";
                                    dialog.innerHTML = `
                                      <div class="w-[420px] p-4 flex flex-col items-center mc-options-bg">
                                        <h3 class="text-2xl font-bold text-[#333333] mb-4 text-left w-full px-4 mc-text-shadow">${t("versions.invalidDirectory")}</h3>
                                        <p class="text-[#333333] mb-6 text-left w-full px-4">${t("versions.selectEmptyDirectory")}</p>
                                        <div class="flex flex-col gap-3 w-full px-4">
                                          <button id="empty-dir-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Layout_Button_Bmp.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/Layout_Button_Over.png)'" onmouseleave="this.style.backgroundImage='url(/images/Layout_Button_Bmp.png)'">${t("common.ok")}</button>
                                        </div>
                                      </div>
                                    `;
                                    document.body.appendChild(dialog);
                                    const close = () =>
                                      document.body.removeChild(dialog);
                                    dialog
                                      .querySelector("#empty-dir-ok")
                                      ?.addEventListener("click", close);
                                    dialog.addEventListener("click", (e) => {
                                      if (e.target === dialog) close();
                                    });
                                    return;
                                  }
                                  await saveCustomPath(
                                    edition.instanceId,
                                    folder,
                                  );
                                  toggleInstall(edition.instanceId);
                                }
                              } catch (err) {
                                if (err !== "CANCELED") console.error(err);
                              }
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <img
                              src="/images/Download_Icon.png"
                              alt=""
                              className="w-3.5 h-3.5 object-contain"
                              style={{ imageRendering: "pixelated" }}
                            />
                            {t("versions.downloadToCustomPath")}
                          </button>
                        )}
                        {edition.officialDLC && isInstalled ? (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              setDlcTargetEdition(edition);
                              setIsDlcModalOpen(true);
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-[10px] text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              className="w-3.5 h-3.5"
                            >
                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                              <polyline points="17 8 12 3 7 8" />
                              <line x1="12" y1="3" x2="12" y2="15" />
                            </svg>
                            {t("versions.downloadDlc")}
                          </button>
                        ) : null}{" "}
                        {argsSchemas[edition.instanceId] && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              setOptionsTarget({
                                id: edition.instanceId,
                                name: edition.name,
                              });
                              setIsOptionsModalOpen(true);
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              className="w-3.5 h-3.5"
                            >
                              <line x1="4" y1="21" x2="4" y2="14" />
                              <line x1="4" y1="10" x2="4" y2="3" />
                              <line x1="12" y1="21" x2="12" y2="12" />
                              <line x1="12" y1="8" x2="12" y2="3" />
                              <line x1="20" y1="21" x2="20" y2="16" />
                              <line x1="20" y1="12" x2="20" y2="3" />
                              <line x1="1" y1="14" x2="7" y2="14" />
                              <line x1="9" y1="8" x2="15" y2="8" />
                              <line x1="17" y1="16" x2="23" y2="16" />
                            </svg>
                            {t("versions.options")}
                          </button>
                        )}
                        {Array.isArray(edition.branches) &&
                          edition.branches.length > 0 && (
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                playPressSound();
                                cycleBranch(edition.id);
                              }}
                              className="w-full text-left px-3 py-1.5 text-[10px] text-white mc-text-shadow flex items-center justify-between group"
                            >
                              <span className="text-[#AAAAAA] font-bold">
                                {t("versions.channel")}
                              </span>
                              <span className="text-[#ffff55] font-bold">
                                {edition.selectedBranch ?? t("versions.latest")}
                              </span>
                            </button>
                          )}
                        <div className="h-[1px] bg-white/5 my-0.5 mx-1" />
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            playPressSound();
                            toggleInstall(edition.instanceId);
                            setOpenMenuId(null);
                          }}
                          className="w-full text-left px-3 py-1.5 text-xs text-[#dddddd] hover:bg-[#ffff55]/20 flex items-center gap-2 group transition-colors mc-text-shadow font-bold border-b border-white/5 mb-1"
                        >
                          <img
                            src="/images/tools/pck.png" //neo: i have no other image to use lol
                            alt=""
                            className="w-3 h-3 object-contain"
                            style={{ imageRendering: "pixelated" }}
                          />
                          {t("versions.repair")}
                        </button>
                        {!isAndroid && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              TauriService.openInstanceFolder(
                                edition.instanceId,
                              );
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <img
                              src="/images/Folder_Icon.png"
                              alt=""
                              className="w-3.5 h-3.5 object-contain"
                              style={{ imageRendering: "pixelated" }}
                            />
                            {t("versions.openFolder")}
                          </button>
                        )}{" "}
                        {!isAndroid && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              const PANORAMA_PROFILES = [
                                "legacy_evolved",
                                "vanilla_tu19",
                                "360revived",
                                "vanilla_tu24",
                              ];
                              const panoId = PANORAMA_PROFILES.includes(
                                edition.id,
                              )
                                ? edition.id
                                : "vanilla_tu19";
                              const panoramaUrl = `/panorama/${panoId}_Panorama_Background_${isDayTime ? "Day" : "Night"}.png`;
                              addToSteam(
                                edition.instanceId,
                                edition.name,
                                edition.titleImage ?? "",
                                panoramaUrl,
                              );
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <img
                              src="/images/steam.png"
                              alt=""
                              className="w-3.5 h-3.5 object-contain invert brightness-0"
                              style={{ imageRendering: "pixelated" }}
                            />
                            {t("versions.addToSteam")}
                          </button>
                        )}{" "}
                        {!isAndroid && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              handleImportWorld(edition.instanceId);
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              className="w-3.5 h-3.5"
                            >
                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                              <polyline points="7 10 12 15 17 10" />
                              <line x1="12" y1="15" x2="12" y2="3" />
                            </svg>
                            {t("versions.importWorld")}
                          </button>
                        )}{" "}
                        {!isAndroid && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              TauriService.backupInstance(
                                edition.instanceId,
                              ).catch((err) => {
                                if (err !== "CANCELED") console.error(err);
                              });
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              className="w-3.5 h-3.5"
                            >
                              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
                              <polyline points="17 21 17 13 7 13 7 21" />
                              <polyline points="7 3 7 8 15 8" />
                            </svg>
                            {t("versions.backup")}
                          </button>
                        )}{" "}
                        {!isAndroid && (
                          <button
                            onClick={async (e) => {
                              e.stopPropagation();
                              playPressSound();
                              setOpenMenuId(null);
                              try {
                                await TauriService.restoreInstance();
                              } catch (err) {
                                if (err !== "CANCELED") console.error(err);
                              }
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              className="w-3.5 h-3.5"
                            >
                              <path d="M21 12a9 9 0 1 1-9-9 9 9 0 0 1 9 9z" />
                              <polyline points="12 7 12 12 15 15" />
                            </svg>
                            {t("versions.restore")}
                          </button>
                        )}{" "}
                        {!isAndroid && (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              setCustomizeTarget(edition);
                              setIsCustomizeModalOpen(true);
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              className="w-3.5 h-3.5"
                            >
                              <path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
                            </svg>
                            {t("versions.customize")}
                          </button>
                        )}{" "}
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            playPressSound();
                            setSetUidTargetId(edition.instanceId);
                            setIsSetUidModalOpen(true);
                            setOpenMenuId(null);
                          }}
                          className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
                        >
                          <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            className="w-3.5 h-3.5"
                          >
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                          </svg>
                          {t("versions.setUid")}
                        </button>{" "}
                        {isCustom ? (
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              playPressSound();
                              setEditingEdition(edition);
                              setIsImportModalOpen(true);
                              setOpenMenuId(null);
                            }}
                            className="w-full text-left px-3 py-2 text-xs text-[#aaaaaa] flex items-center gap-2 mc-text-shadow"
                          >
                            <svg
                              width="14"
                              height="14"
                              viewBox="0 0 24 24"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="2"
                              className="w-3.5 h-3.5"
                            >
                              <path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
                            </svg>
                            {t("versions.editCustom")}
                          </button>
                        ) : null}{" "}
                        <div className="h-[2px] bg-[#555] my-0.5 mx-1" />
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            playBackSound();
                            if (isCustom) {
                              onDeleteEdition(edition.id);
                            } else {
                              setDeleteConfirmEdition(edition);
                            }
                            setOpenMenuId(null);
                          }}
                          className="w-full text-left px-3 py-2 text-xs text-red-500 hover:text-red-400 hover:bg-red-500/10 flex items-center gap-2 transition-colors mc-text-shadow font-bold"
                        >
                          <img
                            src="/images/Trash_Bin_Icon.png"
                            alt=""
                            className="w-3.5 h-3.5 object-contain"
                            style={{ imageRendering: "pixelated" }}
                          />
                          {isCustom
                            ? t("versions.removeCustom")
                            : t("versions.uninstall")}
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
            <div
              className="w-[calc(100%-20px)] shrink-0"
              style={{ height: ROW_ESTIMATE }}
            />
          </div>
        </div>

        <div
          ref={trackRef}
          className="w-13 h-85 max-h-85 shrink-0 relative select-none mc-versionrecess"
        >
          {thumb.height > 0 && (
            <div
              ref={thumbRef}
              onPointerDown={handleThumbPointerDown}
              onPointerMove={handleThumbPointerMove}
              onPointerUp={handleThumbPointerUp}
              onPointerCancel={handleThumbPointerUp}
              className="absolute left-1/2 -translate-x-[30px] w-10 h-10 mc-options-bg cursor-pointer"
              style={{ top: thumb.top - 12 }}
            >
              {
                //neo: oh my goodness this took me a lot to figure out, anyway its just a transparent <hr> so the div isnt empty so that the border-image renders
              }
              <hr style={{ color: "transparent" }} />
            </div>
          )}
        </div>

        {!isAndroid && (
          <div className="absolute left-3 bottom-6 z-10 flex items-center gap-1 pb-1 pr-1 w-fit mc-help">
            <button
              onClick={() => {
                playPressSound();
                setInitialPath("");
                setIsImportModalOpen(true);
              }}
              onMouseEnter={() => setFocusIndex(visibleEditions.length)}
              onMouseLeave={() => setHoveredBtn(null)}
              className="w-8 h-8 flex items-center justify-center text-[#333333] mc-optionbutton"
              style={{
                imageRendering: "pixelated",
              }}
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="3"
                strokeLinecap="square"
              >
                <path d="M12 5v14M5 12h14" />
              </svg>
            </button>

            <button
              onClick={() => {
                playPressSound();
                handleImportFolder();
              }}
              onMouseEnter={() => setFocusIndex(visibleEditions.length + 1)}
              onMouseLeave={() => setHoveredBtn(null)}
              title={t("modals.customTu.importTitle")}
              className="w-8 h-8 flex items-center justify-center text-[#333333] mc-optionbutton"
              style={{
                imageRendering: "pixelated",
              }}
            >
              <img
                src="/images/Folder_Icon.png"
                alt={t("modals.customTu.importTitle")}
                className="w-5 h-5 object-contain invert"
                style={{ imageRendering: "pixelated" }}
              />
            </button>
          </div>
        )}
      </div>

      <div className="mc-help text-xl text-[#FFFFFF] max-h-24 min-h-24 overflow-hidden px-4 w-280">
        {visibleEditions[focusIndex]?.desc ??
          visibleEditions.find((e) => e.id == useConfig().profile)?.desc ??
          ""}
      </div>

      {!isAndroid && (
        <div className="flex justify-center">
          <button
            data-index={visibleEditions.length + 2}
            onMouseEnter={() => setFocusIndex(visibleEditions.length + 2)}
            onClick={() => {
              playBackSound();
              setActiveView("main");
            }}
            className="w-48 h-10 flex items-center justify-center text-xl mc-text-shadow text-white"
            style={{
              backgroundImage:
                focusIndex === visibleEditions.length + 2
                  ? "url('/images/button_highlighted.png')"
                  : "url('/images/Button_Background.png')",
              backgroundSize: "100% 100%",
              imageRendering: "pixelated",
            }}
          >
            {t("common.done")}
          </button>{" "}
        </div>
      )}

      <CustomTUModal
        isOpen={isImportModalOpen}
        onClose={() => {
          setIsImportModalOpen(false);
          setEditingEdition(null);
          setInitialPath("");
        }}
        onImport={(ed: {
          name: string;
          desc: string;
          url: string;
          path?: string;
        }) => {
          if (editingEdition) {
            onUpdateEdition(editingEdition.id, ed);
          } else {
            const id = onAddEdition(ed);
            setSelectedProfile(id);
          }
        }}
        playPressSound={playPressSound}
        playBackSound={playBackSound}
        editingEdition={editingEdition}
        initialPath={initialPath}
      />

      <SetUidModal
        isOpen={isSetUidModalOpen}
        onClose={() => setIsSetUidModalOpen(false)}
        playPressSound={playPressSound}
        playBackSound={playBackSound}
        instances={visibleEditions}
        installedVersions={installedVersions}
        targetInstanceId={setUidTargetId}
      />

      <ImportWorldModal
        isOpen={isImportWorldModalOpen}
        onClose={() => {
          setIsImportWorldModalOpen(false);
          setImportWorldTarget(null);
        }}
        playPressSound={playPressSound}
        playBackSound={playBackSound}
        targetInstanceId={importWorldTarget?.id ?? ""}
        targetInstanceName={importWorldTarget?.name ?? ""}
      />

      <PlaytimeModal
        isOpen={isPlaytimeModalOpen}
        onClose={() => {
          setIsPlaytimeModalOpen(false);
          setPlaytimeTarget(null);
        }}
        playBackSound={playBackSound}
        instanceId={playtimeTarget?.id ?? ""}
        instanceName={playtimeTarget?.name ?? ""}
      />

      <CustomizeModal
        isOpen={isCustomizeModalOpen}
        onClose={() => {
          setIsCustomizeModalOpen(false);
          setCustomizeTarget(null);
        }}
        playPressSound={playPressSound}
        playBackSound={playBackSound}
        editionName={customizeTarget?.name ?? ""}
        currentTitleImage={
          customizeTarget
            ? customizations[customizeTarget.instanceId]?.titleImage ||
              customizeTarget.titleImage
            : undefined
        }
        currentPanorama={
          customizeTarget
            ? customizations[customizeTarget.instanceId]?.panorama ||
              customizeTarget.panorama
            : undefined
        }
        onSave={(updates) => {
          if (customizeTarget) {
            updateCustomization(customizeTarget.instanceId, updates);
          }
        }}
      />

      <DownloadDlcModal
        isOpen={isDlcModalOpen}
        onClose={() => {
          setIsDlcModalOpen(false);
          setDlcTargetEdition(null);
        }}
        playPressSound={playPressSound}
        playBackSound={playBackSound}
        editionName={dlcTargetEdition?.name ?? ""}
        instanceId={dlcTargetEdition?.instanceId ?? ""}
        officialDLC={dlcTargetEdition?.officialDLC ?? ""}
      />

      <OptionsModal
        isOpen={isOptionsModalOpen}
        onClose={() => {
          setIsOptionsModalOpen(false);
          setOptionsTarget(null);
        }}
        playPressSound={playPressSound}
        playBackSound={playBackSound}
        instanceId={optionsTarget?.id ?? ""}
        instanceName={optionsTarget?.name ?? ""}
        savedValues={
          optionsTarget
            ? instanceLaunchArgs[optionsTarget.id]?.values
            : undefined
        }
        onSave={(instanceId, values, args) => {
          setInstanceLaunchArgs((prev) => ({
            ...prev,
            [instanceId]: { values, args },
          }));
        }}
      />

      {deleteConfirmEdition && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
          <div
            className="w-[400px] p-6"
            style={{
              backgroundImage: "url('/images/Download_Background.png')",
              backgroundSize: "100% 100%",
              backgroundRepeat: "no-repeat",
              imageRendering: "pixelated",
            }}
          >
            <h3 className="text-xl text-white mc-text-shadow mb-4 text-center">
              {t("versions.deleteTitle", { name: deleteConfirmEdition.name })}
            </h3>
            <p className="text-sm text-white mb-6 text-center leading-relaxed">
              {t("versions.deleteWarning")}
            </p>
            <div className="flex justify-center gap-4">
              <DeleteConfirmButton
                label={t("common.cancel")}
                onClick={() => {
                  playBackSound();
                  setDeleteConfirmEdition(null);
                }}
              />
              <DeleteConfirmButton
                label={t("common.delete")}
                isDanger
                onClick={() => {
                  playPressSound();
                  handleUninstall(deleteConfirmEdition.id);
                  setDeleteConfirmEdition(null);
                }}
              />
            </div>
          </div>
        </div>
      )}
    </motion.div>
  );
});

export default VersionsView;