import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { motion } from "framer-motion";
import { TauriService } from "../../services/TauriService";
import { lceOnlineService } from "../../services/LceOnlineService";
import type { Edition } from "../../types/edition";
interface GameInvite {
  inviteId: string;
  from: string;
  hostIp: string;
  hostPort: number;
  hostName: string;
  sessionId?: string;
  status: string;
}

export default function ChooseInstanceModal({
  isOpen,
  onClose,
  playPressSound,
  playBackSound,
  editions,
  installs,
  invite,
}: {
  isOpen: boolean;
  onClose: () => void;
  playPressSound: (s?: string) => void;
  playBackSound: (s?: string) => void;
  editions: Edition[];
  installs: string[];
  invite: GameInvite | null;
}) {
  const { t } = useTranslation();
  const [selectedInstance, setSelectedInstance] = useState<string>("");
  const [status, setStatus] = useState<string>("");
  const [error, setError] = useState<string>("");
  const [isJoining, setIsJoining] = useState(false);
  const [focusIndex, setFocusIndex] = useState(0);
  const validInstances = editions.filter((e: Edition) =>
    installs.includes(e.instanceId),
  );

  useEffect(() => {
    if (!isOpen) {
      setSelectedInstance("");
      setStatus("");
      setError("");
      setIsJoining(false);
      setFocusIndex(0);
    }
  }, [isOpen]);

  useEffect(() => {
    if (isOpen && validInstances.length > 0 && !selectedInstance) {
      setSelectedInstance(validInstances[0].instanceId);
    }
  }, [isOpen, validInstances, selectedInstance]);

  const handleJoin = async () => {
    if (!invite || !selectedInstance) return;
    playPressSound();
    setIsJoining(true);
    setError("");
    setStatus(t("modals.chooseInstance.launching"));
    try {
      const sessionId = invite.sessionId || "";
      if (sessionId) {
        setStatus(t("modals.chooseInstance.connectingRelay"));
        const accessToken = lceOnlineService.accessToken ?? "";
        const relayPromise = TauriService.startRelayProxy(
          accessToken,
          sessionId,
        );
        setStatus(t("modals.chooseInstance.launching"));
        await TauriService.launchGame(
          selectedInstance,
          [
            {
              name: invite.hostName || "LCEOnline Game",
              ip: "127.0.0.1",
              port: 61000,
            },
          ],
          ["-ip", "127.0.0.1", "-port", "61000", "-quitondisconnect"],
        );
        await relayPromise;
      } else {
        await TauriService.stopAllProxies();
        await TauriService.launchGame(selectedInstance, [
          {
            name: invite.hostName || "LCEOnline Game",
            ip: invite.hostIp,
            port: invite.hostPort,
          },
        ]);
      }
      onClose();
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : String(e));
      setStatus("");
      setIsJoining(false);
    }
  };

  useEffect(() => {
    if (!isOpen) return;
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        playBackSound();
        if (isJoining) return;
        onClose();
      } else if (e.key === "ArrowDown" || e.key === "Tab") {
        e.preventDefault();
        const max = 1 + (validInstances.length > 0 ? 1 : 0) + 1;
        setFocusIndex((prev) => (prev + 1) % max);
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        const max = 1 + (validInstances.length > 0 ? 1 : 0) + 1;
        setFocusIndex((prev) => (prev - 1 + max) % max);
      } else if (e.key === "Enter") {
        if (focusIndex === 0 && validInstances.length > 0) {
          const currentIdx = validInstances.findIndex(
            (i: Edition) => i.instanceId === selectedInstance,
          );
          const next = (currentIdx + 1) % validInstances.length;
          setSelectedInstance(validInstances[next].instanceId);
          playPressSound();
        } else if (focusIndex === 1 && !isJoining) {
          handleJoin();
        } else if (
          focusIndex === (validInstances.length > 0 ? 2 : 1) &&
          !isJoining
        ) {
          onClose();
        }
      }
    };
    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [isOpen, focusIndex, selectedInstance, validInstances, isJoining]);

  if (!isOpen) return null;
  const hostName = invite
    ? typeof invite.from === "string"
      ? invite.from
      : invite.hostName
    : "";

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 w-screen h-screen z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md outline-none border-none"
    >
      <div
        className="relative w-[450px] p-6 flex flex-col items-center shadow-2xl"
        style={{
          backgroundImage: "url('/images/frame_background.png')",
          backgroundSize: "100% 100%",
          imageRendering: "pixelated",
        }}
      >
        {!isJoining ? (
          <>
            <h2 className="text-[#FFFF55] text-2xl mc-text-shadow mb-2 border-b-2 border-[#373737] pb-2 w-full text-center uppercase">
              {t("modals.chooseInstance.title")}
            </h2>
            <p className="text-white text-sm mc-text-shadow mb-4 text-center">
              {t("modals.chooseInstance.joinPrompt", {
                name: hostName,
              })}
            </p>

            {validInstances.length > 0 ? (
              <div
                className="w-full mb-4 flex flex-col gap-2 max-h-[300px] overflow-y-auto"
                style={{
                  scrollbarWidth: "thin",
                  scrollbarColor: "#373737 transparent",
                }}
              >
                {validInstances.map((inst: Edition) => {
                  const isSelected = selectedInstance === inst.instanceId;
                  return (
                    <div
                      key={inst.instanceId}
                      onClick={() => {
                        playPressSound();
                        setSelectedInstance(inst.instanceId);
                      }}
                      onMouseEnter={() => setFocusIndex(0)}
                      className={`w-full px-4 py-3 cursor-pointer flex items-center gap-3 transition-all outline-none border-none ${isSelected ? "bg-white/15 border-l-4 border-[#FFFF55]" : "bg-black/20 hover:bg-black/30 border-l-4 border-transparent"}`}
                      style={{ imageRendering: "pixelated" }}
                    >
                      <div
                        className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${isSelected ? "border-[#FFFF55]" : "border-gray-500"}`}
                      >
                        {isSelected && (
                          <div className="w-2 h-2 rounded-full bg-[#FFFF55]" />
                        )}
                      </div>
                      <div className="flex flex-col">
                        <span className="text-white text-lg font-bold mc-text-shadow">
                          {inst.name}
                        </span>
                        {inst.selectedBranch && (
                          <span className="text-gray-400 text-xs">
                            {inst.selectedBranch}
                          </span>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <p className="text-red-400 text-sm mc-text-shadow mb-4 text-center">
                {t("modals.chooseInstance.noInstances")}
              </p>
            )}

            {error && (
              <div className="text-red-500 text-center mc-text-shadow uppercase text-xs tracking-widest mb-3">
                {error}
              </div>
            )}

            <div className="flex gap-4 w-full justify-center">
              <button
                onMouseEnter={() => {
                  const cancelIdx = validInstances.length > 0 ? 2 : 1;
                  setFocusIndex(cancelIdx);
                }}
                onClick={() => {
                  playBackSound();
                  onClose();
                }}
                className={`w-32 h-10 flex items-center justify-center text-xl mc-text-shadow transition-colors outline-none border-none ${(() => {
                  const cancelIdx = validInstances.length > 0 ? 2 : 1;
                  return focusIndex === cancelIdx
                    ? "text-[#FFFF55]"
                    : "text-white";
                })()}`}
                style={{
                  backgroundImage: (() => {
                    const cancelIdx = validInstances.length > 0 ? 2 : 1;
                    return focusIndex === cancelIdx
                      ? "url('/images/button_highlighted.png')"
                      : "url('/images/Button_Background.png')";
                  })(),
                  backgroundSize: "100% 100%",
                  imageRendering: "pixelated",
                }}
              >
                {t("modals.chooseInstance.cancel")}
              </button>
              {validInstances.length > 0 && (
                <button
                  onMouseEnter={() => setFocusIndex(1)}
                  onClick={handleJoin}
                  className={`w-32 h-10 flex items-center justify-center text-xl mc-text-shadow transition-colors outline-none border-none ${focusIndex === 1 ? "text-[#FFFF55]" : "text-white"}`}
                  style={{
                    backgroundImage:
                      focusIndex === 1
                        ? "url('/images/button_highlighted.png')"
                        : "url('/images/Button_Background.png')",
                    backgroundSize: "100% 100%",
                    imageRendering: "pixelated",
                  }}
                >
                  {t("modals.chooseInstance.join")}
                </button>
              )}
            </div>
          </>
        ) : (
          <>
            <h2 className="text-[#FFFF55] text-2xl mc-text-shadow mb-4 border-b-2 border-[#373737] pb-2 w-full text-center uppercase">
              {t("modals.chooseInstance.joiningTitle")}
            </h2>
            <div className="flex flex-col items-center gap-4 py-8">
              <div className="w-12 h-12 border-4 border-[#FFFF55] border-t-transparent rounded-full animate-spin" />
              <p className="text-white text-lg mc-text-shadow text-center">
                {status}
              </p>
            </div>
            {error && (
              <div className="text-red-500 text-center mc-text-shadow uppercase text-xs tracking-widest mb-3">
                {error}
              </div>
            )}
          </>
        )}
      </div>
    </motion.div>
  );
}