import { useState, useEffect, useRef, 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>
  );
});

function formatPlaytime(seconds: number): string {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  if (h > 0) return `${h}h ${m}m`;
  if (m > 0) return `${m}m`;
  return seconds > 0 ? `${seconds}s` : "";
}

const VersionsView = memo(function VersionsView() {
  const { t } = useTranslation();
  const { setActiveView } = useUI();
  const {
    profile: selectedProfile,
    setProfile: setSelectedProfile,
    animationsEnabled,
    instanceLaunchArgs,
    setInstanceLaunchArgs,
  } = useConfig();
  const { playPressSound, playBackSound } = useAudio();
  const {
    editions,
    installs: installedVersions,
    toggleInstall,
    handleUninstall,
    handleCancelDownload,
    deleteCustomEdition: onDeleteEdition,
    addCustomEdition: onAddEdition,
    updateCustomEdition: onUpdateEdition,
    downloadingIds,
    downloadProgress,
    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 containerRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const ITEM_COUNT = visibleEditions.length + 3;
  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.id);
          const isCustom = edition.id.startsWith("custom_");
          const maxBtn = isInstalled ? (isCustom ? 6 : 4) : 1;
          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.id);
          const isCustom = edition.id.startsWith("custom_");
          const maxBtn = isInstalled ? (isCustom ? 6 : 4) : 1;
          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) {
            if (isInstalled) {
              playPressSound();
              setOpenMenuId(openMenuId === edition.id ? null : edition.id);
            } else {
              if (!isDownloading) {
                playPressSound();
                toggleInstall(edition.instanceId);
              } else {
                handleCancelDownload(edition.instanceId);
              }
            }
          } else if (focusBtn === 1 && !isInstalled) {
            playPressSound();
            setOpenMenuId(openMenuId === edition.id ? null : edition.id);
          } else if (focusBtn === 2) {
            playPressSound();
            cycleBranch(edition.id);
          }
        } 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]);

  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) => {
    const isInstalled = installedVersions.includes(edition.instanceId);
    if (isInstalled) {
      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"
    >
      <h2 className="text-2xl text-white mc-text-shadow mt-2 mb-4 pb-2 w-[40%] max-w-[200px] text-center tracking-widest uppercase font-bold">
        {t("versions.title")}
      </h2>

      <div className="w-full min-w-[480px] p-6 mb-4 mc-options-bg">
        <div
          ref={listRef}
          className="w-full max-h-[45vh] overflow-y-auto py-2 custom-scrollbar"
        >
          <div className="flex flex-col gap-1">
            {visibleEditions.map((edition: Edition, i: number) => {
              const isInstalled = installedVersions.includes(
                edition.instanceId,
              );
              const hasAnyInstall = installedVersions.length > 0;
              const isSelected =
                hasAnyInstall && selectedProfile === edition.instanceId;
              const isFocused = focusIndex === i;
              const isCustom = edition.id.startsWith("custom_");
              const isDownloading = downloadingIds.includes(edition.instanceId);
              const isComingSoon = edition.comingSoon;

              return (
                <div
                  key={edition.id}
                  data-index={i}
                  className={`w-[calc(100%-16px)] mx-2 flex items-center gap-3 p-2 rounded-sm ${
                    isSelected && !isComingSoon ? "bg-[#404040]/50" : ""
                  } ${isFocused && !isComingSoon ? "ring-2 ring-white" : ""} ${
                    isComingSoon ? "opacity-50 cursor-not-allowed" : ""
                  } relative ${openMenuId === edition.id ? "z-50" : "z-0"}`}
                  onMouseEnter={() => !isComingSoon && setFocusIndex(i)}
                >
                  <div className="w-6 flex items-center justify-center flex-shrink-0">
                    {isDownloading ? (
                      <span className="text-xs text-gray-400 font-bold">
                        {Math.floor(downloadProgress[edition.instanceId] || 0)}%
                      </span>
                    ) : edition.logo ? (
                      edition.logo.startsWith("http") ||
                      edition.logo.startsWith("/images") ? (
                        <img
                          src={edition.logo}
                          alt=""
                          className={`w-6 h-6 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
                    onClick={() =>
                      !isComingSoon && handleEditionClick(edition, i)
                    }
                    className={`flex-1 text-left min-w-0 outline-none rounded cursor-pointer ${
                      focusIndex === i && focusBtn === 0 && !isComingSoon
                        ? "ring-2 ring-white"
                        : ""
                    } ${isComingSoon ? "cursor-not-allowed" : ""}`}
                  >
                    <div className="flex items-center gap-2">
                      <span
                        className={`text-xl tracking-wide truncate ${
                          isSelected ? "text-white" : "text-black"
                        }`}
                        style={{ textShadow: "none" }}
                      >
                        {edition.name}
                      </span>
                      {isInstalled && (
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            playPressSound();
                            setPlaytimeTarget({
                              id: edition.instanceId,
                              name: edition.name,
                            });
                            setIsPlaytimeModalOpen(true);
                          }}
                          className="flex items-center gap-1.5 px-2 py-1 bg-black/60 border border-[#555] hover:border-[#FFFF55] group transition-colors flex-shrink-0"
                          title={t("versions.viewPlaytime")}
                        >
                          <svg
                            width="12"
                            height="12"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="#AAAAAA"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            className="group-hover:stroke-[#FFFF55] transition-colors"
                          >
                            <circle cx="12" cy="12" r="10" />
                            <polyline points="12 6 12 12 16 14" />
                          </svg>
                          <span className="text-xs text-[#AAAAAA] group-hover:text-[#FFFF55] leading-none transition-colors">
                            {playtimeMap[edition.instanceId]
                              ? formatPlaytime(
                                  playtimeMap[edition.instanceId].totalSeconds,
                                )
                              : ""}
                          </span>
                        </button>
                      )}
                      {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>
                    <p
                      className={`text-base font-medium leading-tight ${
                        isSelected ? "text-[#DDDDDD]" : "text-[#666666]"
                      }`}
                    >
                      {edition.desc}
                    </p>
                  </div>

                  <div className="flex items-center gap-2 flex-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-9 h-9 flex items-center justify-center ${
                          isDownloading ? "opacity-50" : ""
                        }`}
                        style={{
                          backgroundImage:
                            (hoveredBtn?.row === i &&
                              hoveredBtn?.btn === "main") ||
                            (focusIndex === i && focusBtn === 0)
                              ? "url('/images/Button_Square_Highlighted.png')"
                              : "url('/images/Button_Square.png')",
                          backgroundSize: "100% 100%",
                          imageRendering: "pixelated",
                        }}
                      >
                        <img
                          src={
                            isDownloading
                              ? "/images/Trash_Bin_Icon.png"
                              : "/images/Download_Icon.png"
                          }
                          alt=""
                          className="w-5 h-5 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-9 h-9 flex flex-col items-center justify-center gap-1 transition-colors relative"
                      style={{
                        backgroundImage:
                          (hoveredBtn?.row === i &&
                            hoveredBtn?.btn === "menu") ||
                          (focusIndex === i &&
                            (focusBtn === 0 || focusBtn === 1))
                            ? "url('/images/Button_Square_Highlighted.png')"
                            : "url('/images/Button_Square.png')",
                        backgroundSize: "100% 100%",
                        imageRendering: "pixelated",
                        filter: updatesAvailable?.[edition.instanceId]
                          ? "drop-shadow(0 0 4px rgba(255,255,0,0.8))"
                          : "none",
                      }}
                    >
                      <div
                        className={`w-1.5 h-1.5 ${updatesAvailable?.[edition.instanceId] ? "bg-[#ffff55]" : "bg-white"}`}
                      />
                      <div
                        className={`w-1.5 h-1.5 ${updatesAvailable?.[edition.instanceId] ? "bg-[#ffff55]" : "bg-white"}`}
                      />
                      <div
                        className={`w-1.5 h-1.5 ${updatesAvailable?.[edition.instanceId] ? "bg-[#ffff55]" : "bg-white"}`}
                      />
                    </button>

                    {openMenuId === edition.id && (
                      <div
                        className="absolute right-0 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-full flex items-center justify-center gap-4 p-2 mt-1">
              <button
                onClick={() => {
                  playPressSound();
                  setInitialPath("");
                  setIsImportModalOpen(true);
                }}
                onMouseEnter={() => setFocusIndex(visibleEditions.length)}
                onMouseLeave={() => setHoveredBtn(null)}
                className="w-8 h-8 flex items-center justify-center text-[#3a3a3a]"
                style={{
                  backgroundImage:
                    (hoveredBtn?.row === visibleEditions.length &&
                      hoveredBtn?.btn === "add") ||
                    focusIndex === visibleEditions.length
                      ? "url('/images/Button_Square_Highlighted.png')"
                      : "url('/images/Button_Square.png')",
                  backgroundSize: "100% 100%",
                  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>

              {!isAndroid && (
                <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-[#3a3a3a]"
                  style={{
                    backgroundImage:
                      (hoveredBtn?.row === visibleEditions.length &&
                        hoveredBtn?.btn === "folder_import") ||
                      focusIndex === visibleEditions.length + 1
                        ? "url('/images/Button_Square_Highlighted.png')"
                        : "url('/images/Button_Square.png')",
                    backgroundSize: "100% 100%",
                    imageRendering: "pixelated",
                  }}
                >
                  <img
                    src="/images/Folder_Icon.png"
                    alt={t("modals.customTu.importTitle")}
                    className="w-5 h-5 object-contain"
                    style={{ imageRendering: "pixelated" }}
                  />
                </button>
              )}
            </div>
          </div>
        </div>
      </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 outline-none border-none 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;