import { Switch , Button as AntdButton } from "antd";
import { LockClosedIcon } from "@heroicons/react/16/solid";
import { useShallow } from "zustand/react/shallow";
import { AnimatePresence, motion } from "framer-motion";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Keyboard from "react-simple-keyboard";
import { useReactAt } from "i18n-auto-extractor/react";
import {  isMobile } from "react-device-detect";

import Card from "@components/Card";
import "react-simple-keyboard/build/css/index.css";

import DetachIconRaw from "@/assets/detach-icon.svg";
import { cx } from "@/cva.config";
import { useHidStore, useSettingsStore, useUiStore } from "@/hooks/stores";
import useKeyboard from "@/hooks/useKeyboard";
import { keyDisplayMap, keyDisplayMap2, keys, modifiers, sKeyDisplayMap } from "@/keyboardMappings";
import { dark_bg2_style} from "@/layout/theme_color";

import GoBottomSvg from "@/assets/second/gobottom.svg?react";

export const DetachIcon = ({ className }: { className?: string }) => {
  return <img src={DetachIconRaw} alt="Detach Icon" className={className} />;
};

function KeyboardWrapper() {
  const { $at } = useReactAt();
  const [layoutName, setLayoutName] = useState("default");

  const keyboardRef = useRef<HTMLDivElement>(null);
  const showAttachedVirtualKeyboard = useUiStore(
    state => state.isAttachedVirtualKeyboardVisible,
  );

  const { sendKeyboardEvent, resetKeyboardState } = useKeyboard();

  const [isDragging, setIsDragging] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [newPosition, setNewPosition] = useState({ x: 0, y: 0 });
  
  // State for locked modifier keys
  const [lockedModifiers, setLockedModifiers] = useState({
    ctrl: false,
    alt: false,
    meta: false,
    shift: false,
  });

  // Toggle for modifier key behavior: true = lock mode, false = direct trigger mode
  const [modifierLockMode, setModifierLockMode] = useState(isMobile);

  // Clear locked modifiers when switching to direct mode
  useEffect(() => {
    if (!modifierLockMode) {
      setLockedModifiers({
        ctrl: false,
        alt: false,
        meta: false,
        shift: false,
      });
      setLayoutName("default");
    }
  }, [modifierLockMode]);

  // Force sticky mode on mobile
  useEffect(() => {
    if (isMobile) {
      setModifierLockMode(true);
    }
  }, [isMobile]);

  const [useNum, setUseNum] = useState(false);
  const [useFn, setUseFn] = useState(false);
  const [stickyModifiers, setStickyModifiers] = useState<string[]>([]);
  const modifierButtonTheme = useMemo(
    () => [{ class: "hg-mod-active", buttons: stickyModifiers.join(" ") }],
    [stickyModifiers],
  );
  const isCapsLockActive = useHidStore(useShallow(state => state.keyboardLedState?.caps_lock));

  // HID related states
  const keyboardLedStateSyncAvailable = useHidStore(state => state.keyboardLedStateSyncAvailable);
  const keyboardLedSync = useSettingsStore(state => state.keyboardLedSync);
  const isKeyboardLedManagedByHost = useMemo(() =>
      keyboardLedSync !== "browser" && keyboardLedStateSyncAvailable,
    [keyboardLedSync, keyboardLedStateSyncAvailable],
  );

  const setIsCapsLockActive = useHidStore(state => state.setIsCapsLockActive);

  const startDrag = useCallback((e: MouseEvent | TouchEvent) => {
    if (!keyboardRef.current) return;
    if (e instanceof TouchEvent && e.touches.length > 1) return;
    setIsDragging(true);

    const clientX = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
    const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;

    const rect = keyboardRef.current.getBoundingClientRect();
    setPosition({
      x: clientX - rect.left,
      y: clientY - rect.top,
    });
  }, []);

  const onDrag = useCallback(
    (e: MouseEvent | TouchEvent) => {
      if (!keyboardRef.current) return;
      if (isDragging) {
        const clientX = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
        const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;

        const newX = clientX - position.x;
        const newY = clientY - position.y;

        const rect = keyboardRef.current.getBoundingClientRect();
        const maxX = window.innerWidth - rect.width;
        const maxY = window.innerHeight - rect.height;

        setNewPosition({
          x: Math.min(maxX, Math.max(0, newX)),
          y: Math.min(maxY, Math.max(0, newY)),
        });
      }
    },
    [isDragging, position.x, position.y],
  );

  const endDrag = useCallback(() => {
    setIsDragging(false);
  }, []);

  useEffect(() => {
    const handle = keyboardRef.current;
    if (handle) {
      handle.addEventListener("touchstart", startDrag);
      handle.addEventListener("mousedown", startDrag);
    }

    document.addEventListener("mouseup", endDrag);
    document.addEventListener("touchend", endDrag);

    document.addEventListener("mousemove", onDrag);
    document.addEventListener("touchmove", onDrag);

    return () => {
      if (handle) {
        handle.removeEventListener("touchstart", startDrag);
        handle.removeEventListener("mousedown", startDrag);
      }

      document.removeEventListener("mouseup", endDrag);
      document.removeEventListener("touchend", endDrag);

      document.removeEventListener("mousemove", onDrag);
      document.removeEventListener("touchmove", onDrag);
    };
  }, [endDrag, onDrag, startDrag]);

  const onKeyDown = useCallback(
    (key: string, e?: MouseEvent) => {
      if (e) {
        e.preventDefault();
      }
      const isKeyShift = key === "{shift}" || key === "ShiftLeft" || key === "ShiftRight";
      const isKeyCaps = key === "CapsLock";
      const cleanKey = key.replace(/[()]/g, "");
      const keyHasShiftModifier = key.includes("(");

      // Check if this is a modifier key press
      const isModifierKey = key === "ControlLeft" || key === "AltLeft" || key === "MetaLeft" || 
                           key === "AltRight" || key === "MetaRight" || isKeyShift;

      // Handle toggle of layout for shift or caps lock
      const toggleLayout = () => {
        setLayoutName(prevLayout => (prevLayout === "default" ? "shift" : "default"));
      };

      // Handle modifier key press
      if (key === "ControlLeft") {
        if (modifierLockMode) {
          // Lock mode: toggle lock state
          setLockedModifiers(prev => ({ ...prev, ctrl: !prev.ctrl }));
        } else {
          // Direct trigger mode: send key press and release immediately
          sendKeyboardEvent([], [modifiers["ControlLeft"]]);
          setTimeout(resetKeyboardState, 100);
        }
        return;
      }
      if (key === "AltLeft" || key === "AltRight") {
        if (modifierLockMode) {
          setLockedModifiers(prev => ({ ...prev, alt: !prev.alt }));
        } else {
          sendKeyboardEvent([], [modifiers[key]]);
          setTimeout(resetKeyboardState, 100);
        }
        return;
      }
      if (key === "MetaLeft" || key === "MetaRight") {
        if (modifierLockMode) {
          setLockedModifiers(prev => ({ ...prev, meta: !prev.meta }));
        } else {
          sendKeyboardEvent([], [modifiers[key]]);
          setTimeout(resetKeyboardState, 100);
        }
        return;
      }
      if (isKeyShift) {
        if (modifierLockMode) {
          setLockedModifiers(prev => ({ ...prev, shift: !prev.shift }));
          if (lockedModifiers.shift) {
            // If unlocking shift, return to default layout
            setLayoutName("default");
          } else {
            // If locking shift, switch to shift layout
            toggleLayout();
          }
        } else {
          sendKeyboardEvent([], [modifiers["ShiftLeft"]]);
          setTimeout(resetKeyboardState, 100);
        }
        return;
      }

      if (key === "CtrlAltDelete") {
        sendKeyboardEvent(
          [keys["Delete"]],
          [modifiers["ControlLeft"], modifiers["AltLeft"]],
        );
        setTimeout(resetKeyboardState, 100);
        return;
      }

      if (key === "AltMetaEscape") {
        sendKeyboardEvent(
          [keys["Escape"]],
          [modifiers["MetaLeft"], modifiers["AltLeft"]],
        );

        setTimeout(resetKeyboardState, 100);
        return;
      }

      if (key === "CtrlAltBackspace") {
        sendKeyboardEvent(
          [keys["Backspace"]],
          [modifiers["ControlLeft"], modifiers["AltLeft"]],
        );

        setTimeout(resetKeyboardState, 100);
        return;
      }

      if (isKeyCaps) {
        toggleLayout();

        if (isCapsLockActive) {
          if (!isKeyboardLedManagedByHost) {
            setIsCapsLockActive(false);
          }
          sendKeyboardEvent([keys["CapsLock"]], []);
          return;
        }
      }

      // Handle caps lock state change
      if (isKeyCaps && !isKeyboardLedManagedByHost) {
        setIsCapsLockActive(!isCapsLockActive);
      }

      // Collect new active keys and modifiers
      const newKeys = keys[cleanKey] ? [keys[cleanKey]] : [];
      const newModifiers: number[] = [];

      // Add locked modifiers
      if (lockedModifiers.ctrl) {
        newModifiers.push(modifiers["ControlLeft"]);
      }
      if (lockedModifiers.alt) {
        newModifiers.push(modifiers["AltLeft"]);
      }
      if (lockedModifiers.meta) {
        newModifiers.push(modifiers["MetaLeft"]);
      }
      if (lockedModifiers.shift && !isCapsLockActive) {
        newModifiers.push(modifiers["ShiftLeft"]);
      }

      // Add shift modifier for keys with parentheses (if not caps lock and shift not locked)
      if (keyHasShiftModifier && !isCapsLockActive && !lockedModifiers.shift) {
        newModifiers.push(modifiers["ShiftLeft"]);
      }

      // Update current keys and modifiers
      sendKeyboardEvent(newKeys, newModifiers);

      // If shift was used as a modifier and caps lock is not active and shift is not locked, revert to default layout
      if (keyHasShiftModifier && !isCapsLockActive && !lockedModifiers.shift) {
        setLayoutName("default");
      }

      // Auto-unlock modifiers after regular key press (not for combination keys)
      if (!isModifierKey && newKeys.length > 0) {
        setLockedModifiers({
          ctrl: false,
          alt: false,
          meta: false,
          shift: false,
        });
        setLayoutName("default");
      }
      setTimeout(resetKeyboardState, 100);
    },
    [isCapsLockActive, isKeyboardLedManagedByHost, sendKeyboardEvent, resetKeyboardState, setIsCapsLockActive, lockedModifiers, modifierLockMode],
  );

  const virtualKeyboard = useHidStore(state => state.isVirtualKeyboardEnabled);
  const setVirtualKeyboard = useHidStore(state => state.setVirtualKeyboardEnabled);

  const modifierLockButtons = [
    lockedModifiers.ctrl ? "ControlLeft" : "",
    lockedModifiers.alt ? "AltLeft AltRight" : "",
    lockedModifiers.meta ? "MetaLeft MetaRight" : "",
    lockedModifiers.shift ? "ShiftLeft ShiftRight" : "",
  ].filter(Boolean).join(" ").trim();
  
  return (
    <div
      className="transition-all duration-200 ease-in-out"
      style={{
        marginBottom: virtualKeyboard ? "0px" : `-${500}px`,
      }}
    >
      <AnimatePresence>
        {virtualKeyboard && (
          <motion.div
            initial={{ opacity: 0, y: "100%" }}
            animate={{ opacity: 1, y: "0%" }}
            exit={{ opacity: 0, y: "100%" }}
            transition={{
              duration: 0.2,
              ease: "easeInOut",
            }}
          >
            <div
              className={cx(
                !showAttachedVirtualKeyboard
                  ? "fixed left-0 top-0 z-50 select-none"
                  : "relative",
              )}
              ref={keyboardRef}
              style={{
                ...(!showAttachedVirtualKeyboard
                  ? { transform: `translate(${newPosition.x}px, ${newPosition.y}px)` }
                  : {}),
              }}
            >
              <Card
                className={cx("overflow-hidden", {
                  "rounded-none": showAttachedVirtualKeyboard,
                })}
              >
                {isMobile ?
                  <>
                    <div
                      className={`flex items-center justify-center w-full border-b border-b-slate-800/30  px-1 py-0 dark:border-b-slate-300/20 ${dark_bg2_style}`}>

                      <style>
                        {`
                          .simple-keyboard-topcontrol .hg-button.hg-mod-active {
                            background-color: rgba(22,152,217,0.15) !important;
                            border-color: rgba(22,152,217,0.6) !important;
                          }
                          .simple-keyboard-main .hg-button.modifier-locked,
                          .simple-keyboard-topcontrol .hg-button.modifier-locked,
                          .simple-keyboard-main2 .hg-button.modifier-locked {
                            background-color: rgba(22,152,217,0.3) !important;
                            border-color: rgba(22,152,217,0.8) !important;
                            color: rgba(22,152,217,1) !important;
                          }
                          html.dark .simple-keyboard-main .hg-button.modifier-locked,
                          html.dark .simple-keyboard-topcontrol .hg-button.modifier-locked,
                          html.dark .simple-keyboard-main2 .hg-button.modifier-locked {
                            background-color: rgba(22,152,217,0.5) !important;
                            color: white !important;
                          }
                          html.dark .simple-keyboard-topcontrol,
                          html.dark .simple-keyboard-main2 {
                            background-color: transparent !important;
                          }
                          html.dark .simple-keyboard-topcontrol .hg-button,
                          html.dark .simple-keyboard-main2 .hg-button {
                            background-color: rgba(26,26,26,1);
                            color: white;
                          }
                          /* Add click animation */
                          .hg-button:active {
                            background-color: rgba(0,0,0,0.2) !important;
                          }
                          html.dark .hg-button:active {
                            background-color: rgba(255,255,255,0.2) !important;
                          }
                          html.dark .simple-keyboard-topcontrol .hg-button:active,
                          html.dark .simple-keyboard-main2 .hg-button:active {
                            background-color: rgba(255,255,255,0.2) !important;
                          }
                          .hg-button {
                            transition: background-color 0.02s ease-in-out;
                          }
                        `}
                      </style>

                      <Keyboard
                        baseClass="simple-keyboard-topcontrol"
                        layoutName={layoutName}
                        buttonTheme={[
                          ...(stickyModifiers.length ? [{ class: "hg-mod-active", buttons: stickyModifiers.join(" ") }] : []),
                          ...(modifierLockMode && modifierLockButtons ? [{ class: "modifier-locked", buttons: modifierLockButtons }] : [])
                        ]}
                        onKeyPress={(key: string) => {
                          if (key === "Back") {
                            setVirtualKeyboard(false);
                            return;
                          }
                          if (key === "ShiftLeft" || key === "ControlLeft" || key === "AltLeft" || key === "MetaLeft") {
                            onKeyDown(key);
                            return;
                          }
                          onKeyDown(key);
                        }}
                        display={sKeyDisplayMap}
                        layout={{
                          default: [
                            "Escape Tab MetaLeft PageUp ArrowUp PageDown Delete",
                            "ShiftLeft ControlLeft AltLeft ArrowLeft ArrowDown ArrowRight Back",
                          ],
                          shift: [
                            "Escape Tab MetaLeft PageUp ArrowUp PageDown Delete",
                            "ShiftLeft ControlLeft AltLeft ArrowLeft ArrowDown ArrowRight Back",
                          ],
                        }}
                        disableButtonHold={true}
                        syncInstanceInputs={true}
                        debug={false}
                      />
                    </div>
                    <div
                      className={`flex items-center justify-center flex-col border-b border-b-slate-800/30  px-1 py-0 dark:border-b-slate-300/20 ${dark_bg2_style}`}>
                      {
                        useNum?
                          <>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4"}>
                              <Keyboard
                                baseClass="simple-keyboard-main2"
                                layoutName={layoutName}
                                onKeyPress={onKeyDown}
                                display={keyDisplayMap2}
                                buttonTheme={
                                  modifierLockMode && modifierLockButtons
                                    ? [{ class: "modifier-locked", buttons: modifierLockButtons }]
                                    : []
                                }
                                layout={{
                                  default: [
                                    useFn
                                      ? "F1 F2 F3 F4 F5 F6 F7 F8 F9 F10"
                                      : "Digit1 Digit2 Digit3 Digit4 Digit5 Digit6 Digit7 Digit8 Digit9 Digit0",
                                  ],
                                  shift: [
                                    useFn
                                      ? "F1 F2 F3 F4 F5 F6 F7 F8 F9 F10"
                                      : "(Digit1) (Digit2) (Digit3) (Digit4) (Digit5) (Digit6) (Digit7) (Digit8) (Digit9) (Digit0)",
                                  ],
                                }}

                                disableButtonHold={true}
                                syncInstanceInputs={true}
                                debug={false}
                              />
                            </div>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4 px-3"}>
                              <Keyboard
                                baseClass="simple-keyboard-main2"
                                layoutName={layoutName}
                                onKeyPress={(key: string) => {
                                  if (key === "Fn") {
                                    setUseFn(prev => !prev);
                                    return;
                                  }
                                  onKeyDown(key);
                                }}
                                display={keyDisplayMap2}
                                buttonTheme={
                                  modifierLockMode && modifierLockButtons
                                    ? [{ class: "modifier-locked", buttons: modifierLockButtons }]
                                    : []
                                }
                                layout={{
                                  default: [
                                    useFn
                                      ? "Fn Backquote F11 F12 BracketLeft BracketRight Backslash"
                                      : "Fn Backquote Minus Equal BracketLeft BracketRight Backslash",
                                  ],
                                  shift: [
                                    useFn
                                      ? "Fn Backquote F11 F12 BracketLeft BracketRight Backslash"
                                      : "Fn (Backquote) (Minus) (Equal) (BracketLeft) (BracketRight) (Backslash)",
                                  ],
                                }}

                                disableButtonHold={true}
                                syncInstanceInputs={true}
                                debug={false}
                              />
                            </div>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4"}>
                              <Keyboard
                                baseClass="simple-keyboard-main2"
                                layoutName={layoutName}
                                onKeyPress={onKeyDown}
                                display={keyDisplayMap2}
                                buttonTheme={
                                  modifierLockMode && modifierLockButtons
                                    ? [{ class: "modifier-locked", buttons: modifierLockButtons }]
                                    : []
                                }
                                layout={{
                                  default: [

                                    "ShiftLeft Semicolon  Quote Period Slash Backspace",
                                  ],
                                  shift: [

                                    "ShiftLeft (Semicolon) (Quote) (Period) (Slash) Backspace",
                                  ],
                                }}

                                disableButtonHold={true}
                                syncInstanceInputs={true}
                                debug={false}
                              />
                            </div>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4"}>
                              <div className={"w-1/5"}>
                                <Keyboard
                                  baseClass="simple-keyboard-main2"
                                  layoutName={layoutName}
                                  onKeyPress={() => {
                                    setUseNum(false);
                                  }}
                                  display={keyDisplayMap2}
                                  layout={{
                                    default: [
                                      "abc",
                                    ],
                                    shift: [
                                      "abc",
                                    ],
                                  }} />
                              </div>
                              <div className={"w-3/5"}>
                                <Keyboard
                                  baseClass="simple-keyboard-main2"
                                  layoutName={layoutName}
                                  onKeyPress={onKeyDown}
                                  display={keyDisplayMap2}
                                  layout={{
                                    default: [
                                      "Space",
                                    ],
                                    shift: [
                                      "Space",
                                    ],
                                  }}

                                  disableButtonHold={true}
                                  syncInstanceInputs={true}
                                  debug={false}
                                />
                              </div>
                              <div className={"w-1/5"}>
                                <Keyboard
                                  baseClass="simple-keyboard-main2"
                                  layoutName={layoutName}
                                  onKeyPress={onKeyDown}
                                  display={keyDisplayMap2}
                                  layout={{
                                    default: [
                                      "Enter",
                                    ],
                                    shift: [
                                      "Enter",
                                    ],
                                  }} />
                              </div>

                            </div>
                          </>
                          :
                          <>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4"}>
                              <Keyboard
                                baseClass="simple-keyboard-main2"
                                layoutName={layoutName}
                                onKeyPress={onKeyDown}
                                display={keyDisplayMap2}
                                layout={{
                                  default: [
                                    "KeyQ KeyW KeyE KeyR KeyT KeyY KeyU KeyI KeyO KeyP",
                                  ],
                                  shift: [
                                    "(KeyQ) (KeyW) (KeyE) (KeyR) (KeyT) (KeyY) (KeyU) (KeyI) (KeyO) (KeyP)",
                                  ],
                                }}

                                disableButtonHold={true}
                                syncInstanceInputs={true}
                                debug={false}
                              />
                            </div>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4 px-3"}>
                              <Keyboard
                                baseClass="simple-keyboard-main2"
                                layoutName={layoutName}
                                onKeyPress={onKeyDown}
                                display={keyDisplayMap2}
                                layout={{
                                  default: [

                                    "KeyA KeyS KeyD KeyF KeyG KeyH KeyJ KeyK KeyL",

                                  ],
                                  shift: [

                                    "(KeyA) (KeyS) (KeyD) (KeyF) (KeyG) (KeyH) (KeyJ) (KeyK) (KeyL)",

                                  ],
                                }}

                                disableButtonHold={true}
                                syncInstanceInputs={true}
                                debug={false}
                              />
                            </div>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4"}>
                              <Keyboard
                                baseClass="simple-keyboard-main2"
                                layoutName={layoutName}
                                onKeyPress={onKeyDown}
                                display={keyDisplayMap2}
                                layout={{
                                  default: [

                                    "ShiftLeft KeyZ KeyX KeyC KeyV KeyB KeyN KeyM Backspace",
                                  ],
                                  shift: [

                                    "ShiftLeft (KeyZ) (KeyX) (KeyC) (KeyV) (KeyB) (KeyN) (KeyM) Backspace",
                                  ],
                                }}

                                disableButtonHold={true}
                                syncInstanceInputs={true}
                                debug={false}
                              />
                            </div>
                            <div className={"flex flex-row w-full justify-between items-center h-1/4"}>
                              <div className={"w-1/5"}>
                                <Keyboard
                                  baseClass="simple-keyboard-main2"
                                  layoutName={layoutName}
                                  onKeyPress={() => {
                                    setUseNum(true);
                                  }}
                                  display={keyDisplayMap2}
                                  layout={{
                                    default: [
                                      "123",
                                    ],
                                    shift: [
                                      "123",
                                    ],
                                  }} />
                              </div>
                              <div className={"w-3/5"}>
                                <Keyboard
                                  baseClass="simple-keyboard-main2"
                                  layoutName={layoutName}
                                  onKeyPress={onKeyDown}
                                  display={keyDisplayMap2}
                                  layout={{
                                    default: [
                                      "Space",
                                    ],
                                    shift: [
                                      "Space",
                                    ],
                                  }}

                                  disableButtonHold={true}
                                  syncInstanceInputs={true}
                                  debug={false}
                                />
                              </div>
                              <div className={"w-1/5"}>
                                <Keyboard
                                  baseClass="simple-keyboard-main2"
                                  layoutName={layoutName}
                                  onKeyPress={onKeyDown}
                                  display={keyDisplayMap2}
                                  layout={{
                                    default: [
                                      "Enter",
                                    ],
                                    shift: [
                                      "Enter",
                                    ],
                                  }}
                                  
                                  disableButtonHold={true}
                                  syncInstanceInputs={true}
                                  debug={false}
                                />
                              </div>

                            </div>
                          </>
                      }

                    </div>
                  </>
                  :
                  <>
                    <div
                      className={`w-full h-[36px] flex items-center justify-between border-b border-b-slate-800/30 px-2  dark:border-b-slate-300/20 ${dark_bg2_style}`}>
                      <div className=" left-2 flex items-center gap-x-2">
                        {!isMobile && (
                          <div className="flex items-center gap-x-2 ml-2">
                            <Switch
                              size="small"
                              checked={modifierLockMode}
                              onChange={setModifierLockMode}
                              checkedChildren={<LockClosedIcon className="w-3 h-3 mt-0.5" />}
                            />
                            <span className="text-[10px] text-gray-500">
                              {$at("Sticky Keys")}
                            </span>
                          </div>
                        )}
                      </div>
                      <h2 className="select-none self-center font-sans text-[12px] text-[rgba(102,102,102,1)]">
                        {$at("Virtual Keyboard")}
                      </h2>
                      <div className="h-full flex items-center">
                        <div style={{ width: "1px", height: "100%" }}
                             className={"bg-[rgba(229,229,229,1)] dark:bg-[rgba(56,56,56,1)]"}></div>
                        <AntdButton
                          type={"text"}
                          icon={<GoBottomSvg />}
                          onClick={() => setVirtualKeyboard(false)}
                        >
                          {$at("Hide")}
                        </AntdButton>
                      </div>
                    </div>
                    <div>
                      <div className={`flex flex-col ${dark_bg2_style} md:flex-col `}>
                      <style>
                        {`
                          html.dark .simple-keyboard-main,
                          html.dark .simple-keyboard-control,
                          html.dark .simple-keyboard-arrows {
                            background-color: transparent !important;
                          }
                          html.dark .simple-keyboard-main .hg-button,
                          html.dark .simple-keyboard-control .hg-button,
                          html.dark .simple-keyboard-arrows .hg-button {
                            background-color: rgba(44, 44, 46, 1) !important;
                            color: white !important;
                          }
                          /* Add click animation */
                          .hg-button:active {
                            background-color: rgba(0,0,0,0.2) !important;
                          }
                          html.dark .hg-button:active {
                            background-color: rgba(255,255,255,0.2) !important;
                          }
                          /* Specific overrides for dark mode PC layout sections */
                          html.dark .simple-keyboard-main .hg-button:active,
                          html.dark .simple-keyboard-control .hg-button:active,
                          html.dark .simple-keyboard-arrows .hg-button:active {
                            background-color: rgba(255,255,255,0.2) !important;
                          }
                          .hg-button {
                            transition: background-color 0.05s ease-in-out;
                          }
                        `}
                      </style>
                        <div style={{ width: "40%" }} className={"flex items-start justify-center flex-col"}>
                          <div className={"h-[10px]"}></div>
                          <Keyboard
                            baseClass="simple-keyboard-main"
                            layoutName={layoutName}
                            onKeyPress={onKeyDown}
                            buttonTheme={
                              modifierLockMode && modifierLockButtons
                                ? [{ class: "modifier-locked", buttons: modifierLockButtons }]
                                : []
                            }
                            display={keyDisplayMap}
                            layout={{
                              default: [
                                "CtrlAltDelete AltMetaEscape CtrlAltBackspace",

                              ],
                              shift: [
                                "CtrlAltDelete AltMetaEscape CtrlAltBackspace",

                              ],
                            }}
                            disableButtonHold={true}
                            syncInstanceInputs={true}
                            debug={false}
                          />
                        </div>


                        <div className={`flex flex-col  md:flex-row ${dark_bg2_style}`}>
                          <Keyboard
                            baseClass="simple-keyboard-main"
                            layoutName={layoutName}
                            onKeyPress={onKeyDown}
                            display={keyDisplayMap}
                            buttonTheme={
                              modifierLockMode && modifierLockButtons
                                ? [{ class: "modifier-locked", buttons: modifierLockButtons }]
                                : []
                            }
                            layout={{
                              default: [
                                "Escape F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
                                "Backquote Digit1 Digit2 Digit3 Digit4 Digit5 Digit6 Digit7 Digit8 Digit9 Digit0 Minus Equal Backspace",
                                "Tab KeyQ KeyW KeyE KeyR KeyT KeyY KeyU KeyI KeyO KeyP BracketLeft BracketRight Backslash",
                                "CapsLock KeyA KeyS KeyD KeyF KeyG KeyH KeyJ KeyK KeyL Semicolon Quote Enter",
                                "ShiftLeft KeyZ KeyX KeyC KeyV KeyB KeyN KeyM Comma Period Slash ShiftRight",
                                "ControlLeft AltLeft MetaLeft Space MetaRight AltRight",
                              ],
                              shift: [
                                "Escape F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12",
                                "(Backquote) (Digit1) (Digit2) (Digit3) (Digit4) (Digit5) (Digit6) (Digit7) (Digit8) (Digit9) (Digit0) (Minus) (Equal) (Backspace)",
                                "Tab (KeyQ) (KeyW) (KeyE) (KeyR) (KeyT) (KeyY) (KeyU) (KeyI) (KeyO) (KeyP) (BracketLeft) (BracketRight) (Backslash)",
                                "CapsLock (KeyA) (KeyS) (KeyD) (KeyF) (KeyG) (KeyH) (KeyJ) (KeyK) (KeyL) (Semicolon) (Quote) Enter",
                                "ShiftLeft (KeyZ) (KeyX) (KeyC) (KeyV) (KeyB) (KeyN) (KeyM) (Comma) (Period) (Slash) ShiftRight",
                                "ControlLeft AltLeft MetaLeft Space MetaRight AltRight",
                              ],
                            }}
                            disableButtonHold={true}
                            syncInstanceInputs={true}
                            debug={false}
                          />

                          {/*<div className="controlArrows">*/}
                          <div style={{
                            display: "flex",
                            flex: 1,
                            alignItems: "center",
                            flexDirection: "column",
                            justifyContent: "space-between",
                          }}>
                            <Keyboard
                              baseClass="simple-keyboard-control"
                              theme="simple-keyboard hg-theme-default hg-layout-default"
                              layoutName={layoutName}
                              onKeyPress={onKeyDown}
                              display={keyDisplayMap}
                              layout={{
                                default: ["PrintScreen ScrollLock Pause", "Insert Home Pageup", "Delete End Pagedown"],
                                shift: ["(PrintScreen) ScrollLock (Pause)", "Insert Home Pageup", "Delete End Pagedown"],
                              }}
                              syncInstanceInputs={true}
                              debug={false}
                            />
                            <div style={{
                              display: "flex",
                              width: "100%",
                              alignItems: "center",
                              flexDirection: "column",
                              justifyContent: "space-between",
                            }}>
                              <div style={{
                                display: "flex",
                                width: "34%",

                                alignItems: "center",
                                flexDirection: "column",
                                justifyContent: "space-between",
                              }}>
                                <Keyboard
                                  baseClass="simple-keyboard-arrows"
                                  theme="simple-keyboard hg-theme-default hg-layout-default"
                                  onKeyPress={onKeyDown}
                                  display={keyDisplayMap}
                                  layout={{
                                    default: ["ArrowUp"],
                                  }}
                                  syncInstanceInputs={true}
                                  debug={false}

                                />
                              </div>

                              <Keyboard
                                baseClass="simple-keyboard-arrows"
                                theme="simple-keyboard hg-theme-default hg-layout-default"
                                onKeyPress={onKeyDown}
                                display={keyDisplayMap}
                                layout={{
                                  default: ["ArrowLeft ArrowDown ArrowRight"],
                                }}
                                syncInstanceInputs={true}
                                debug={false}
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </>}

              </Card>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default KeyboardWrapper;
