import { useState, useEffect, useRef, useMemo, useCallback, memo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  useUI,
  useConfig,
  useAudio,
  useGame,
} from "../../context/LauncherContext";
import {
  lceLiveService,
  LceLiveAccount,
  FriendRequest,
  GameInvite,
  DeviceLinkStartResponse,
} from "../../services/LceLiveService";
import { TauriService } from "../../services/TauriService";
import ChooseInstanceModal from "../modals/ChooseInstanceModal";
import QRCode from "qrcode";

interface LceLiveViewProps {
  addFriendTarget?: string | null;
  onClearAddFriendTarget?: () => void;
}
const LceLiveView = memo(function LceLiveView({
  addFriendTarget,
  onClearAddFriendTarget,
}: LceLiveViewProps) {
  const { setActiveView } = useUI();
  const { animationsEnabled } = useConfig();
  const { playPressSound, playBackSound } = useAudio();
  const { editions, installs } = useGame();
  const [isSignedIn, setIsSignedIn] = useState(lceLiveService.signedIn);
  const [currentTab, setCurrentTab] = useState<
    "friends" | "requests" | "invites" | "device_link"
  >("friends");
  const [focusIndex, setFocusIndex] = useState<number | null>(0);
  const [acceptInvite, setAcceptInvite] = useState<GameInvite | null>(null);
  const [friends, setFriends] = useState<LceLiveAccount[]>([]);
  const [incomingReqs, setIncomingReqs] = useState<FriendRequest[]>([]);
  const [outgoingReqs, setOutgoingReqs] = useState<FriendRequest[]>([]);
  const [invites, setInvites] = useState<GameInvite[]>([]);
  const [linkData, setLinkData] = useState<DeviceLinkStartResponse | null>(
    null,
  );
  const [linkError, setLinkError] = useState<string | null>(null);
  const [isHosting, setIsHosting] = useState(false);
  const [_hostStatus, setHostStatus] = useState("");
  const [hostIp, setHostIp] = useState("");
  const [hostPort, setHostPort] = useState(19132);
  const [isDiscovering, setIsDiscovering] = useState(false);
  const [invitedFriends, setInvitedFriends] = useState<Set<string>>(new Set());
  const [showHostMethodPicker, setShowHostMethodPicker] = useState(false);
  const [isAddingFriend, setIsAddingFriend] = useState(false);
  const [addFriendUsername, setAddFriendUsername] = useState("");
  const addFriendInputRef = useRef<HTMLInputElement>(null);
  const [errorModal, setErrorModal] = useState<string | null>(null);
  const [qrDataUrl, setQrDataUrl] = useState<string>("");
  const containerRef = useRef<HTMLDivElement>(null);
  const scrollRef = useRef<HTMLDivElement>(null);
  const fetchSocialData = async () => {
    if (!lceLiveService.signedIn) return;
    try {
      const [f, reqs, invs] = await Promise.all([
        lceLiveService.getFriends(),
        lceLiveService.getPendingRequests(),
        lceLiveService.getGameInvites(),
      ]);
      setFriends(f);
      setIncomingReqs(reqs.incoming);
      setOutgoingReqs(reqs.outgoing);
      setInvites(invs.filter((i: GameInvite) => i.status === "pending"));
    } catch (e: unknown) {
      console.error(e);
    }
  };

  useEffect(() => {
    if (isSignedIn) {
      if (currentTab === "device_link") setCurrentTab("friends");
      fetchSocialData();
      const pollInvites = setInterval(async () => {
        try {
          const invs = await lceLiveService.getGameInvites();
          setInvites(invs.filter((i: GameInvite) => i.status === "pending"));
        } catch (e) {
          console.warn("Failed to poll invites", e);
        }
      }, 5000);

      return () => clearInterval(pollInvites);
    } else {
      setCurrentTab("device_link");
    }
  }, [isSignedIn, currentTab]);

  useEffect(() => {
    if (currentTab !== "device_link") return;
    let mounted = true;
    let pollInterval: ReturnType<typeof setInterval> | null = null;
    const startLink = async () => {
      try {
        if (!linkData) {
          const data = await lceLiveService.startDeviceLink();
          if (mounted) setLinkData(data);
        }
      } catch (e: unknown) {
        if (mounted) setLinkError(e instanceof Error ? e.message : String(e));
      }
    };

    startLink();
    if (linkData?.deviceCode) {
      pollInterval = setInterval(
        async () => {
          try {
            const res = await lceLiveService.pollDeviceLink(
              linkData.deviceCode,
            );
            if (res.isLinked && mounted) {
              setIsSignedIn(true);
              setLinkData(null);
              if (pollInterval !== null) clearInterval(pollInterval);
            }
          } catch (e: unknown) {
            console.warn("Poll failed", e);
          }
        },
        Math.max(linkData.intervalSeconds * 1000, 2000),
      );
    }

    return () => {
      mounted = false;
      if (pollInterval !== null) clearInterval(pollInterval);
    };
  }, [currentTab, linkData]);

  useEffect(() => {
    if (!linkData?.verificationUri || !linkData?.userCode) return;
    const authUrl = `${linkData.verificationUri}?code=${linkData.userCode}`;
    QRCode.toDataURL(authUrl, { width: 200, margin: 1 }, (err, url) => {
      if (!err) setQrDataUrl(url);
    });
  }, [linkData]);

  const openAuthUrl = useCallback(() => {
    if (!linkData?.verificationUri || !linkData?.userCode) return;
    const authUrl = `${linkData.verificationUri}?code=${linkData.userCode}`;
    TauriService.openUrl(authUrl);
  }, [linkData]);

  const handleLogout = () => {
    playPressSound();
    lceLiveService.logoutLocal();
    setIsSignedIn(false);
    setLinkData(null);
  };

  const handleAction = async (action: () => Promise<void>) => {
    playPressSound();
    try {
      await action();
      fetchSocialData();
    } catch (e: unknown) {
      setErrorModal(e instanceof Error ? e.message : "An error occurred");
    }
  };

  const handleStartHosting = () => {
    playPressSound();
    setShowHostMethodPicker(true);
    setFocusIndex(0);
  };

  const handleHostDirect = async () => {
    setShowHostMethodPicker(false);
    setFocusIndex(0);
    setIsDiscovering(true);
    setHostStatus("Discovering external IP...");
    try {
      const endpoint = await TauriService.stunDiscover();
      setHostIp(endpoint.ip);
      setHostPort(25565);
      setIsHosting(true);
      setHostStatus(`Hosting at ${endpoint.ip}:25565`);
      setInvitedFriends(new Set());
    } catch (e: unknown) {
      const msg =
        e instanceof Error
          ? e.message
          : typeof e === "string"
            ? e
            : "Unknown error";
      setErrorModal("STUN discovery failed: " + msg);
      setHostStatus("");
    } finally {
      setIsDiscovering(false);
    }
  };

  const handleHostRelay = async () => {
    setShowHostMethodPicker(false);
    setFocusIndex(0);
    setIsDiscovering(true);
    setHostStatus("Discovering external IP for invite...");
    try {
      const endpoint = await TauriService.stunDiscover();
      setHostIp(endpoint.ip);
      setHostPort(25565);
    } catch {
      setHostIp("127.0.0.1");
      setHostPort(25565);
    }
    setIsHosting(true);
    setHostStatus("Relay ready - invite friends to activate");
    setInvitedFriends(new Set());
    setIsDiscovering(false);
  };

  const handleStopHosting = async () => {
    playPressSound();
    try {
      await TauriService.stopAllProxies();
      await lceLiveService.deactivateGameInvites();
    } catch (e: unknown) {
      console.warn("Stop hosting failed", e);
    }
    setIsHosting(false);
    setHostStatus("");
    setHostIp("");
    setInvitedFriends(new Set());
  };

  const handleInviteFriend = async (friend: LceLiveAccount) => {
    playPressSound();
    const name = lceLiveService.displayUsername;
    const sessionId = crypto.randomUUID();
    try {
      await lceLiveService.sendGameInvite(
        friend.accountId,
        hostIp,
        hostPort,
        name,
        sessionId,
      );
      setInvitedFriends((prev) => new Set(prev).add(friend.accountId));
      setHostStatus("Connecting relay...");
      TauriService.startHostRelay(
        lceLiveService.apiBaseUrl,
        lceLiveService.accessToken ?? "",
        sessionId,
        25565,
      )
        .then(() => setHostStatus("Relay active"))
        .catch((relayErr: unknown) => {
          const relayMsg =
            relayErr instanceof Error
              ? relayErr.message
              : typeof relayErr === "string"
                ? relayErr
                : "Unknown error";
          console.warn("Relay failed:", relayMsg);
          setHostStatus("Relay disconnected");
        });
    } catch (e: unknown) {
      const msg =
        e instanceof Error
          ? e.message
          : typeof e === "string"
            ? e
            : "Unknown error";
      setErrorModal("Failed to send invite: " + msg);
    }
  };

  type MenuItem = {
    id: string;
    type: "button" | "friend" | "request_in" | "request_out" | "invite";
    label: string;
    onClick: () => void;
    onClickSecondary?: () => void;
  };

  const menuItems = useMemo<MenuItem[]>(() => {
    const items: MenuItem[] = [];
    if (currentTab === "device_link") {
      if (linkData) {
        items.push({
          id: "link_retry",
          type: "button",
          label: "Restart Link",
          onClick: () => {
            setLinkData(null);
            playPressSound();
          },
        });
      }
    } else if (currentTab === "friends") {
      if (!isDiscovering && !showHostMethodPicker) {
        if (!isHosting) {
          items.push({
            id: "host_game",
            type: "button",
            label: "Host Game",
            onClick: handleStartHosting,
          });
        } else {
          items.push({
            id: "stop_hosting",
            type: "button",
            label: "Stop Hosting",
            onClick: handleStopHosting,
          });
        }
      }
      items.push({
        id: "add_friend",
        type: "button",
        label: "Add Friend",
        onClick: () => {
          playPressSound();
          setIsAddingFriend(true);
          setAddFriendUsername("");
        },
      });
      items.push({
        id: "sign_out",
        type: "button",
        label: "Sign Out",
        onClick: handleLogout,
      });
      friends.forEach((f) => {
        items.push({
          id: `friend_${f.accountId}`,
          type: "friend",
          label: f.displayName,
          onClick: isHosting
            ? () => handleInviteFriend(f)
            : () =>
                handleAction(() => lceLiveService.removeFriend(f.accountId)),
          onClickSecondary: isHosting
            ? () => handleAction(() => lceLiveService.removeFriend(f.accountId))
            : undefined,
        });
      });
    } else if (currentTab === "requests") {
      incomingReqs.forEach((r) => {
        items.push({
          id: `req_in_${r.username}`,
          type: "request_in",
          label: r.displayName,
          onClick: () =>
            handleAction(() => lceLiveService.sendFriendRequest(r.username)),
          onClickSecondary: () =>
            handleAction(() =>
              lceLiveService.declineFriendRequest(r.accountId),
            ),
        });
      });
      outgoingReqs.forEach((r) => {
        items.push({
          id: `req_out_${r.username}`,
          type: "request_out",
          label: r.displayName,
          onClick: () =>
            handleAction(() =>
              lceLiveService.declineFriendRequest(r.accountId),
            ),
        });
      });
    } else if (currentTab === "invites") {
      invites.forEach((inv) => {
        items.push({
          id: `inv_${inv.inviteId}`,
          type: "invite",
          label:
            typeof inv.from === "string" ? "Unknown" : inv.from.displayName,
          onClick: () => {
            playPressSound();
            setAcceptInvite(inv);
          },
          onClickSecondary: () =>
            handleAction(() => lceLiveService.declineGameInvite(inv.inviteId)),
        });
      });
    }

    return items;
  }, [
    currentTab,
    friends,
    incomingReqs,
    outgoingReqs,
    invites,
    linkData,
    playPressSound,
    isHosting,
    isDiscovering,
    showHostMethodPicker,
  ]);

  useEffect(() => {
    if (!addFriendTarget) return;
    setCurrentTab("friends");
    handleAction(() =>
      lceLiveService.sendFriendRequest(addFriendTarget),
    );
    onClearAddFriendTarget?.();
  }, [addFriendTarget, onClearAddFriendTarget]);

  const tabs: ("friends" | "requests" | "invites")[] = [
    "friends",
    "requests",
    "invites",
  ];
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (errorModal) {
        if (e.key === "Escape" || e.key === "Enter") {
          setErrorModal(null);
        }
        return;
      }

      if (isAddingFriend) {
        if (e.key === "Escape") {
          setIsAddingFriend(false);
          playBackSound();
        } else if (e.key === "Enter") {
          if (addFriendUsername.trim() !== "") {
            handleAction(() =>
              lceLiveService.sendFriendRequest(addFriendUsername.trim()),
            );
            setIsAddingFriend(false);
          }
        }
        return;
      }

      if (showHostMethodPicker) {
        if (e.key === "Escape" || e.key === "Backspace") {
          setShowHostMethodPicker(false);
          setFocusIndex(0);
          playBackSound();
        } else if (e.key === "ArrowDown") {
          setFocusIndex((prev) => (prev === null || prev >= 2 ? 0 : prev + 1));
        } else if (e.key === "ArrowUp") {
          setFocusIndex((prev) => (prev === null || prev <= 0 ? 2 : prev - 1));
        } else if (e.key === "Enter") {
          if (focusIndex === 0) handleHostRelay();
          else if (focusIndex === 1) handleHostDirect();
          else if (focusIndex === 2) {
            setShowHostMethodPicker(false);
            setFocusIndex(0);
            playBackSound();
          }
        }
        return;
      }

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

      if (currentTab !== "device_link") {
        const curIdx = tabs.indexOf(currentTab);
        if (e.key === "q" || e.key === "Q" || e.key === "ArrowLeft") {
          const next = curIdx > 0 ? tabs[curIdx - 1] : tabs[tabs.length - 1];
          setCurrentTab(next);
          setFocusIndex(0);
          playPressSound();
          return;
        }
        if (e.key === "e" || e.key === "E" || e.key === "ArrowRight") {
          const next = curIdx < tabs.length - 1 ? tabs[curIdx + 1] : tabs[0];
          setCurrentTab(next);
          setFocusIndex(0);
          playPressSound();
          return;
        }
      }

      const itemCount = menuItems.length;
      if (itemCount > 0) {
        if (e.key === "ArrowDown") {
          setFocusIndex((prev) =>
            prev === null || prev >= itemCount - 1 ? 0 : prev + 1,
          );
        } else if (e.key === "ArrowUp") {
          setFocusIndex((prev) =>
            prev === null || prev <= 0 ? itemCount - 1 : prev - 1,
          );
        } else if (e.key === "Enter" && focusIndex !== null) {
          menuItems[focusIndex]?.onClick();
        }
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [
    focusIndex,
    menuItems,
    currentTab,
    playBackSound,
    setActiveView,
    isAddingFriend,
    addFriendUsername,
    errorModal,
    showHostMethodPicker,
    handleHostDirect,
    handleHostRelay,
  ]);

  useEffect(() => {
    if (isAddingFriend && addFriendInputRef.current) {
      addFriendInputRef.current.focus();
    } else if (focusIndex !== null) {
      const el = containerRef.current?.querySelector(
        `[data-index="${focusIndex}"]`,
      ) as HTMLElement;
      if (el) {
        el.focus();
        if (scrollRef.current) {
          const rect = el.getBoundingClientRect();
          const scrollRect = scrollRef.current.getBoundingClientRect();
          if (rect.bottom > scrollRect.bottom || rect.top < scrollRect.top) {
            el.scrollIntoView({ behavior: "smooth", block: "center" });
          }
        }
      }
    }
  }, [focusIndex, isAddingFriend]);
  const renderContent = () => {
    if (currentTab === "device_link") {
      return (
        <div className="flex flex-col items-center justify-center flex-1 text-center py-12">
          {!linkData ? (
            <p className="text-lg text-[#2a2a2a] font-bold">
              {linkError || "Starting device link..."}
            </p>
          ) : (
            <div className="flex items-start justify-center gap-10 w-full max-w-2xl">
              <div className="flex flex-col items-center space-y-4 flex-1 min-w-0">
                <p className="text-lg text-[#2a2a2a] font-bold">
                  Open this link in your browser:
                </p>
                <p className="text-[#111] text-base font-bold tracking-widest break-all bg-black/10 px-4 py-2 rounded shadow-inner">
                  {linkData.verificationUri}
                </p>
                <p className="text-lg text-[#2a2a2a] font-bold">
                  And enter the code:
                </p>
                <p className="text-[#111] text-4xl tracking-[0.2em] font-bold bg-black/10 px-6 py-3 rounded shadow-inner">
                  {linkData.userCode}
                </p>
              </div>
              <div className="flex flex-col items-center gap-3 shrink-0">
                {qrDataUrl && (
                  <img
                    src={qrDataUrl}
                    alt="QR Code"
                    className="w-48 h-48 image-rendering-pixelated"
                  />
                )}
                <button
                  onClick={openAuthUrl}
                  className="h-10 px-6 flex items-center justify-center text-white mc-text-shadow text-base font-bold uppercase tracking-widest outline-none border-none hover:text-[#FFFF55] transition-colors"
                  style={{
                    backgroundImage: "url('/images/button_highlighted.png')",
                    backgroundSize: "100% 100%",
                    imageRendering: "pixelated",
                  }}
                >
                  Open in Browser
                </button>
              </div>
            </div>
          )}
        </div>
      );
    }

    const topButtons = menuItems.filter((m) => m.type === "button");
    const listItems = menuItems.filter((m) => m.type !== "button");
    return (
      <div className="flex flex-col h-full space-y-4">
        {topButtons.length > 0 && (
          <div className="flex gap-4 flex-wrap">
            {topButtons.map((btn) => {
              const idx = menuItems.indexOf(btn);
              const isFocused = focusIndex === idx;
              return (
                <button
                  key={btn.id}
                  data-index={idx}
                  onMouseEnter={() => setFocusIndex(idx)}
                  onClick={btn.onClick}
                  className={`flex-1 h-12 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none transition-all ${isFocused ? "text-[#FFFF55] mc-text-shadow scale-[1.02] z-10 relative drop-shadow-md" : "text-white mc-text-shadow hover:text-gray-200"}`}
                  style={{
                    backgroundImage: isFocused
                      ? "url('/images/button_highlighted.png')"
                      : "url('/images/Button_Background.png')",
                    backgroundSize: "100% 100%",
                    imageRendering: "pixelated",
                  }}
                >
                  {btn.label}
                </button>
              );
            })}
          </div>
        )}

        <div className="flex flex-col flex-1 bg-black/5 shadow-inner rounded overflow-hidden border-4 border-[#222]">
          <div className="bg-black/10 px-4 py-3 text-[#2a2a2a] font-bold tracking-widest uppercase border-b-4 border-[#222] flex justify-between shadow-sm z-10">
            <span>
              {currentTab === "friends"
                ? "Joinable Friends"
                : currentTab === "requests"
                  ? "Pending Requests"
                  : "Game Invites"}
            </span>
            <span className="text-[#111]">{listItems.length}</span>
          </div>

          <div ref={scrollRef} className="flex-1 overflow-y-auto w-full">
            {listItems.length === 0 ? (
              <div className="flex items-center justify-center h-[200px] text-[#555] font-bold">
                None available
              </div>
            ) : (
              <div className="flex flex-col p-2 space-y-2">
                {listItems.map((item) => {
                  const idx = menuItems.indexOf(item);
                  const isFocused = focusIndex === idx;
                  return (
                    <div
                      key={item.id}
                      data-index={idx}
                      onMouseEnter={() => setFocusIndex(idx)}
                      className={`w-full flex items-center justify-between px-4 py-3 relative outline-none border-none rounded ${isFocused ? "bg-black/15 shadow-inner" : "bg-transparent"}`}
                      tabIndex={-1}
                    >
                      <div className="flex items-center w-full">
                        <div className="flex flex-col ml-2 flex-1 min-w-0">
                          <span className="text-[#2a2a2a] font-bold text-2xl truncate pr-4">
                            {item.label}
                          </span>
                          <span className="text-[#555] text-base font-bold truncate">
                            @
                            {menuItems.find((m) => m.id === item.id)?.type ===
                            "friend"
                              ? friends.find(
                                  (f) => `friend_${f.accountId}` === item.id,
                                )?.username
                              : item.type === "request_in"
                                ? incomingReqs.find(
                                    (f) => `req_in_${f.accountId}` === item.id,
                                  )?.username
                                : item.type === "request_out"
                                  ? outgoingReqs.find(
                                      (f) =>
                                        `req_out_${f.accountId}` === item.id,
                                    )?.username
                                  : "Invite"}
                          </span>
                        </div>
                      </div>
                      <div className="flex space-x-3 pr-2 shrink-0">
                        {item.type === "friend" && !isHosting && (
                          <button
                            className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
                            style={{
                              backgroundImage:
                                "url('/images/Button_Background.png')",
                              backgroundSize: "100% 100%",
                              imageRendering: "pixelated",
                            }}
                            onClick={item.onClick}
                          >
                            REMOVE
                          </button>
                        )}
                        {item.type === "friend" && isHosting && (
                          <>
                            <button
                              className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
                              style={{
                                backgroundImage:
                                  "url('/images/button_highlighted.png')",
                                backgroundSize: "100% 100%",
                                imageRendering: "pixelated",
                              }}
                              onClick={item.onClick}
                            >
                              {invitedFriends.has(
                                item.id.replace("friend_", ""),
                              )
                                ? "INVITED"
                                : "INVITE"}
                            </button>
                            <button
                              className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
                              style={{
                                backgroundImage:
                                  "url('/images/Button_Background.png')",
                                backgroundSize: "100% 100%",
                                imageRendering: "pixelated",
                              }}
                              onClick={(e) => {
                                e.stopPropagation();
                                item.onClickSecondary?.();
                              }}
                            >
                              REMOVE
                            </button>
                          </>
                        )}
                        {item.type === "request_out" && (
                          <button
                            className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
                            style={{
                              backgroundImage:
                                "url('/images/Button_Background.png')",
                              backgroundSize: "100% 100%",
                              imageRendering: "pixelated",
                            }}
                            onClick={item.onClick}
                          >
                            CANCEL
                          </button>
                        )}
                        {(item.type === "request_in" ||
                          item.type === "invite") && (
                          <>
                            <button
                              className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
                              style={{
                                backgroundImage:
                                  "url('/images/button_highlighted.png')",
                                backgroundSize: "100% 100%",
                                imageRendering: "pixelated",
                              }}
                              onClick={item.onClick}
                            >
                              ACCEPT
                            </button>
                            <button
                              className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
                              style={{
                                backgroundImage:
                                  "url('/images/Button_Background.png')",
                                backgroundSize: "100% 100%",
                                imageRendering: "pixelated",
                              }}
                              onClick={(e) => {
                                e.stopPropagation();
                                item.onClickSecondary?.();
                              }}
                            >
                              DECLINE
                            </button>
                          </>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };
  return (
    <motion.div
      ref={containerRef}
      tabIndex={-1}
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: animationsEnabled ? 0.3 : 0 }}
      className="flex flex-col items-center justify-center w-full h-full absolute inset-0 outline-none p-12"
    >
      <div className="w-full max-w-5xl h-full flex flex-col mt-[4vh] mb-[4vh] relative drop-shadow-2xl">
        {currentTab !== "device_link" && (
          <div
            className="flex z-10 space-x-2 px-12 relative w-full items-end"
            style={{ marginBottom: "-4px" }}
          >
            {tabs.map((t) => (
              <button
                key={t}
                className={`flex-1 font-bold text-xl outline-none uppercase transition-all duration-200 ease-in-out ${currentTab === t ? "text-[#2a2a2a] z-20 pb-6 pt-5 text-2xl drop-shadow-[5px_-5px_15px_rgba(0,0,0,0.3)] rounded-t border-4 border-[#222] border-b-0" : "text-[#555] mt-2 py-4 hover:bg-black/30 bg-black/10 hover:text-[#222] border-4 border-transparent border-b-0"}`}
                style={{
                  backgroundImage: "url('/images/background.png')",
                  backgroundSize: "100% 100%",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "bottom",
                  imageRendering: "pixelated",
                }}
                onClick={() => {
                  setCurrentTab(t);
                  setFocusIndex(0);
                  playPressSound();
                }}
              >
                <div className="flex items-center justify-center">
                  {t}
                  {t === "requests" && incomingReqs.length > 0 && (
                    <span
                      className={`ml-3 text-white text-base px-3 py-1 rounded-full shadow-inner border-2 font-normal ${currentTab === t ? "bg-[#d72f2f] border-[#8a1a1a]" : "bg-[#a81f1f] border-[#111]"}`}
                    >
                      {incomingReqs.length}
                    </span>
                  )}
                  {t === "invites" && invites.length > 0 && (
                    <span
                      className={`ml-3 text-white text-base px-3 py-1 rounded-full shadow-inner border-2 font-normal ${currentTab === t ? "bg-[#30872a] border-[#1b5e16]" : "bg-[#23681d] border-[#111]"}`}
                    >
                      {invites.length}
                    </span>
                  )}
                </div>
              </button>
            ))}
          </div>
        )}

        <div
          className="flex-1 flex flex-col p-8 z-10 relative overflow-hidden rounded-b shadow-[0_0_30px_rgba(0,0,0,0.6)] border-4 border-[#222] border-t-0"
          style={{
            backgroundImage: "url('/images/background.png')",
            backgroundSize: "100% auto",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "top",
            imageRendering: "pixelated",
          }}
        >
          {renderContent()}
        </div>
        <div className="flex justify-center pt-4 pb-2">
          <img
            src="/images/lcelive.png"
            alt="LCELive"
            className="h-5 opacity-70 cursor-pointer"
            onClick={() => TauriService.openUrl("https://lcelive.co.uk")}
          />
        </div>
      </div>

      <AnimatePresence>
        {isAddingFriend && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm outline-none border-none"
          >
            <div
              className="relative w-[420px] p-8 flex flex-col items-center shadow-2xl"
              style={{
                backgroundImage: "url('/images/frame_background.png')",
                backgroundSize: "100% 100%",
                imageRendering: "pixelated",
              }}
            >
              <h2 className="text-[#FFFF55] text-3xl mc-text-shadow mb-6 border-b-2 border-[#373737] pb-2 w-full text-center uppercase tracking-widest">
                Add Friend
              </h2>
              <input
                ref={addFriendInputRef}
                type="text"
                className="bg-black/20 border-4 border-[#555] text-white p-4 w-full text-2xl font-bold outline-none focus:border-[#FFFF55] transition-colors placeholder:text-[#888] mb-6 mc-text-shadow"
                placeholder="Username"
                value={addFriendUsername}
                onChange={(e) => setAddFriendUsername(e.target.value)}
              />
              <div className="flex gap-4 w-full">
                <button
                  className="h-12 flex-1 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest hover:text-[#FFFF55] outline-none border-none"
                  style={{
                    backgroundImage: "url('/images/button_highlighted.png')",
                    backgroundSize: "100% 100%",
                    imageRendering: "pixelated",
                  }}
                  onClick={() => {
                    playPressSound();
                    if (addFriendUsername.trim() !== "") {
                      handleAction(() =>
                        lceLiveService.sendFriendRequest(
                          addFriendUsername.trim(),
                        ),
                      );
                      setIsAddingFriend(false);
                    }
                  }}
                >
                  Send
                </button>
                <button
                  className="h-12 flex-1 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest hover:text-[#FFFF55] outline-none border-none"
                  style={{
                    backgroundImage: "url('/images/Button_Background.png')",
                    backgroundSize: "100% 100%",
                    imageRendering: "pixelated",
                  }}
                  onClick={() => {
                    setIsAddingFriend(false);
                    playBackSound();
                  }}
                >
                  Cancel
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {showHostMethodPicker && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[105] flex items-center justify-center bg-black/80 backdrop-blur-sm outline-none border-none"
          >
            <div
              className="relative w-[420px] p-8 flex flex-col items-center shadow-2xl gap-4"
              style={{
                backgroundImage: "url('/images/frame_background.png')",
                backgroundSize: "100% 100%",
                imageRendering: "pixelated",
              }}
            >
              <h2 className="text-[#FFFF55] text-3xl mc-text-shadow mb-2 border-b-2 border-[#373737] pb-2 w-full text-center uppercase tracking-widest">
                Host Game
              </h2>
              <button
                data-index={0}
                onMouseEnter={() => setFocusIndex(0)}
                onClick={handleHostRelay}
                className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none ${focusIndex === 0 ? "text-[#FFFF55] mc-text-shadow" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
                style={{
                  backgroundImage:
                    focusIndex === 0
                      ? "url('/images/button_highlighted.png')"
                      : "url('/images/Button_Background.png')",
                  backgroundSize: "100% 100%",
                  imageRendering: "pixelated",
                }}
              >
                Relay
              </button>
              <button
                data-index={1}
                onMouseEnter={() => setFocusIndex(1)}
                onClick={handleHostDirect}
                className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none ${focusIndex === 1 ? "text-[#FFFF55] mc-text-shadow" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
                style={{
                  backgroundImage:
                    focusIndex === 1
                      ? "url('/images/button_highlighted.png')"
                      : "url('/images/Button_Background.png')",
                  backgroundSize: "100% 100%",
                  imageRendering: "pixelated",
                }}
              >
                Direct (STUN)
              </button>
              <button
                data-index={2}
                onMouseEnter={() => setFocusIndex(2)}
                onClick={() => {
                  setShowHostMethodPicker(false);
                  setFocusIndex(0);
                  playBackSound();
                }}
                className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none ${focusIndex === 2 ? "text-[#FFFF55] mc-text-shadow" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
                style={{
                  backgroundImage:
                    focusIndex === 2
                      ? "url('/images/button_highlighted.png')"
                      : "url('/images/Button_Background.png')",
                  backgroundSize: "100% 100%",
                  imageRendering: "pixelated",
                }}
              >
                Cancel
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <AnimatePresence>
        {errorModal && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-[110] flex items-center justify-center bg-black/80 backdrop-blur-sm outline-none border-none"
          >
            <div
              className="relative w-[400px] p-8 flex flex-col items-center shadow-2xl"
              style={{
                backgroundImage: "url('/images/frame_background.png')",
                backgroundSize: "100% 100%",
                imageRendering: "pixelated",
              }}
            >
              <h2 className="text-[#FFFF55] text-2xl mc-text-shadow mb-4 border-b-2 border-[#373737] pb-2 w-full text-center uppercase tracking-widest">
                Error
              </h2>
              <p className="text-white text-lg mc-text-shadow text-center mb-6">
                {errorModal}
              </p>
              <button
                className="h-12 w-48 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest hover:text-[#FFFF55] outline-none border-none"
                style={{
                  backgroundImage: "url('/images/button_highlighted.png')",
                  backgroundSize: "100% 100%",
                  imageRendering: "pixelated",
                }}
                onClick={() => setErrorModal(null)}
              >
                OK
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <ChooseInstanceModal
        isOpen={acceptInvite !== null}
        onClose={() => {
          setAcceptInvite(null);
          fetchSocialData();
        }}
        playPressSound={playPressSound}
        playBackSound={playBackSound}
        editions={editions}
        installs={installs}
        invite={acceptInvite}
      />
    </motion.div>
  );
});

export default LceLiveView;
