<img?php $statePath='/home/surillya/.thos_state.json' ; $state=file_exists($statePath) ?
  json_decode(file_get_contents($statePath), true) : null; if (!file_exists($statePath)) { header('Location: oobe.php');
  exit(); } ?>
  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>SurillyaOS</title>
    <style>
      :root {
        --accent: #4CAF50;
        --window-bg: rgba(28, 28, 28, 0.6);
        --window-border: rgba(255, 255, 255, 0.1);
        --window-blur: blur(20px);
        --header-bg: rgba(30, 30, 30, 0.6);
        --header-color: white;
        --header-hover: var(--accent);
      }

      .theme-glassy-dark {
        --window-bg: rgba(28, 28, 28, 0.6);
        --window-border: rgba(255, 255, 255, 0.1);
        --window-blur: blur(20px);
        --header-bg: rgba(30, 30, 30, 0.6);
        --header-color: white;
        --font-color: white;
      }

      .theme-frosted-blue {
        --window-bg: rgba(0, 40, 80, 0.4);
        --window-border: rgba(173, 216, 230, 0.2);
        --window-blur: blur(25px);
        --header-bg: rgba(10, 20, 50, 0.4);
        --header-color: #e3f8ff;
        --font-color: #e3f8ff;
      }

      .theme-dreamy-pink {
        --window-bg: rgba(80, 30, 60, 0.5);
        --window-border: rgba(255, 182, 193, 0.3);
        --window-blur: blur(16px);
        --header-bg: rgba(100, 40, 80, 0.5);
        --header-color: #ffddee;
        --font-color: #ffe9f4;
      }

      .theme-xp {
        --window-bg: #ece9d8;
        --window-border: #3a6ea5;
        --window-blur: none;
        --header-bg: linear-gradient(to bottom, #0a246a, #1c4dbd);
        --header-color: white;
        --font-color: black;
      }

      body {
        margin: 0;
        font-family: 'Inter', sans-serif;
        background: #121212;
        color: white;
        overflow: hidden;
      }

      #app-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 200px;
        height: 100vh;
        background: var(--window-bg);
        backdrop-filter: var(--window-blur);
        -webkit-backdrop-filter: var(--window-blur);
        border: 1px solid var(--window-border);
        padding: 10px;
        box-sizing: border-box;
        z-index: 9999;
      }

      .app-btn {
        display: block;
        margin: 10px 0;
        padding: 10px;
        background: #292929;
        border: none;
        color: white;
        cursor: pointer;
        border-radius: 8px;
        transition: background 0.3s ease;
      }

      .app-btn:hover {
        background: var(--accent);
      }

      .window {
        position: absolute;
        width: 600px;
        height: 400px;
        background: var(--window-bg);
        backdrop-filter: var(--window-blur);
        -webkit-backdrop-filter: var(--window-blur);
        border: 1px solid var(--window-border);
        border-radius: 12px;
        resize: both;
        overflow: hidden;
        z-index: 1;
        transition: box-shadow 0.2s ease, backdrop-filter 0.3s ease;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      }


      .window.active {
        box-shadow: 0 0 20px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.3);
      }

      .window-header {
        background: var(--header-bg);
        color: var(--header-color);
        padding: 6px 12px;
        cursor: grab;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
        backdrop-filter: var(--window-blur);
        -webkit-backdrop-filter: var(--window-blur);
        border-bottom: 1px solid var(--window-border);
      }

      .window-header:active {
        cursor: grabbing;
      }


      .window-header button {
        background: transparent;
        border: none;
        color: inherit;
        font-weight: bold;
        font-size: 1.1em;
        cursor: pointer;
        user-select: none;
        padding: 0 6px;
        transition: color 0.2s ease;
      }

      .window-header button:hover {
        color: var(--header-hover);
      }


      .window-content {
        background: var(--window-bg);
        backdrop-filter: var(--window-blur);
        -webkit-backdrop-filter: var(--window-blur);
        border: 1px solid var(--window-border);
        width: 100%;
        height: calc(100% - 32px);
        border: none;
      }

      .sparkle {
        position: absolute;
        width: 6px;
        height: 6px;
        background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%);
        border-radius: 50%;
        filter: drop-shadow(0 0 6px var(--accent));
        animation: sparkle 1.2s infinite ease-in-out;
        pointer-events: none;
      }

      @keyframes sparkle {

        0%,
        100% {
          opacity: 0;
          transform: scale(0.5) rotate(0deg);
        }

        50% {
          opacity: 1;
          transform: scale(1) rotate(45deg);
        }
      }

      #screensaver {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        border: none;
        z-index: 9999;
      }

      #drag-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99999;
        display: none;
        cursor: grabbing;
      }

      #fullscreen-toggle {
        border: none;
        background: transparent;
        cursor: pointer;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-radius: 4px;
      }

      #fullscreen-toggle:hover {
        color: var(--accent);
      }

      .grayscale-bg {
        filter: grayscale(100%) brightness(0.9);
      }

      .notification {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1rem 1.25rem;
        border-radius: 1rem;
        border: 2px solid transparent;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        color: white;
        min-width: 260px;
        max-width: 340px;
        pointer-events: auto;
        animation: fadeInUp 0.3s ease-out;
        position: relative;
        transition: transform 0.2s ease, opacity 0.2s ease;
        background: var(--window-bg);
        backdrop-filter: var(--window-blur);
        -webkit-backdrop-filter: var(--window-blur);
        color: var(--accent);
      }

      .notification-dismiss {
        background: transparent;
        border: none;
        cursor: pointer;
      }

      .notification.success {
        border-color: #4caf50;
      }

      .notification.error {
        border-color: #f44336;
      }

      .notification.info {
        border-color: var(--accent, #00bcd4);
      }

      @keyframes slideIn {
        from {
          transform: translateX(100%) scale(0.95);
          opacity: 0;
        }

        to {
          transform: translateX(0) scale(1);
          opacity: 1;
        }
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
          transform: translateX(0) scale(1);
        }

        to {
          opacity: 0;
          transform: translateX(50%) scale(0.95);
        }
      }
    </style>
    <script src="tailwind.es"></script>
  </head>

  <body class="bg-black">
    <div id="appWrapper" class="transition-all duration-300">
      <div id="bg-image" class="fixed inset-0 z-[-10] bg-cover bg-center transition-all duration-300"></div>
      <div id="app-bar" class="bg-[#1e1e1e] fixed top-0 left-0 w-52 h-screen p-2.5 z-50">
        <div class="flex flex-col h-full">
          <div class="relative mb-4">
            <button id="powerButton" class="group relative transition duration-300">
              <img src="THOS.png" alt="Power" class="w-12 h-12 transition-all duration-300 ease-in-out
           group-hover:brightness-125
           group-hover:scale-110
           group-hover:drop-shadow-[0_0_10px_rgba(255,200,255,0.6)]
           group-hover:saturate-150
           cursor-pointer select-none">
            </button>
          </div>

          <div class="grid grid-cols-3 gap-3 p-2 flex flex-col justify-between">
            <button onclick="openApp('explorer.php', 'Explorer')" title="File Explorer"
              class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
              <svg class="w-6 h-6 text-blue-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
                viewBox="0 0 24 24">
                <path d="M3 7l6-3 6 3 6-3v12l-6 3-6-3-6 3V7z" />
                <path d="M9 4v12" />
                <path d="M15 7v12" />
              </svg>
            </button>

            <button onclick="openApp('tasks.php', 'Task Manager')" title="Task Manager"
              class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
              <svg class="w-6 h-6 text-red-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
                viewBox="0 0 24 24">
                <rect x="3" y="3" width="7" height="7" rx="1" />
                <rect x="14" y="3" width="7" height="7" rx="1" />
                <rect x="3" y="14" width="7" height="7" rx="1" />
                <rect x="14" y="14" width="7" height="7" rx="1" />
              </svg>
            </button>

            <button onclick="openApp('https://surillya.com/thos/store', 'THOS Store')" title="THOS Store"
              class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
              <svg class="w-6 h-6 text-pink-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
                viewBox="0 0 24 24">
                <path d="M4 9h16l-1.68 10.08a2 2 0 0 1-2 1.92H7.68a2 2 0 0 1-2-1.92L4 9Z" />
                <path d="M8 11V8a4 4 0 0 1 8 0v3" />
              </svg>
            </button>

            <button onclick="openApp('https://surillya.com/thos/search/thossearch.html', 'Internet', true)"
              title="Internet" class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
              <svg class="w-6 h-6 text-green-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
                viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" />
                <path d="M2 12h20" />
                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
              </svg>
            </button>

            <button onclick="openApp('settings.php', 'Settings')" title="Settings"
              class="p-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all">
              <svg class="w-6 h-6 text-yellow-300 mx-auto" fill="none" stroke="currentColor" stroke-width="2"
                viewBox="0 0 24 24">
                <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                <path
                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1
                  1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0
                  010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65
                  1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0
                  012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65
                  0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
              </svg>
            </button>
          </div>

          <div class="flex-grow"></div>

          <div id="trdp"
            class="grid grid-cols-2 gap-2 mt-4 p-2 bg-[#252525] rounded-lg overflow-y-auto p-2 justify-center items-center">
          </div>

          <div id="version-display-container" class="w-full flex justify-center items-center mt-4">
            <div id="version-display" class="flex items-center gap-2 text-sm text-gray-400 select-none">
              <button id="fullscreen-toggle" title="Toggle fullscreen"
                class="text-white hover:text-[var(--accent)] transition-colors duration-200 text-xs p-1 rounded bg-transparent hover:bg-[var(--glass-bg-light)]">
                ⛶
              </button>
              <span class="text-[var(--accent)]">THOS</span><span id="version-number"></span>
            </div>
          </div>
        </div>
      </div>

      <div id="desktop" class="ml-52 h-screen relative">
        <div id="notification-container" class="fixed top-4 right-4 z-50 flex flex-col gap-3 pointer-events-none"></div>
      </div>

      <iframe id="screensaver" src="screensaver.html"></iframe>

      <div id="drag-overlay"></div>
    </div>

    <div id="powerDialog" class="fixed inset-0 z-50 hidden flex items-center justify-center">
      <div class="bg-black/30 rounded-2xl shadow-2xl p-6 w-80 backdrop-blur-sm text-center text-white">
        <h2 class="text-xl font-semibold mb-6 tracking-wide">Power Options</h2>
        <div class="space-y-3">
          <button id="shutdownBtn"
            class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-red-400 text-red-300 hover:text-red-100 hover:border-red-300">Shutdown</button>
          <button id="restartBtn"
            class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-yellow-400 text-yellow-300 hover:text-yellow-100 hover:border-yellow-300">Restart</button>
          <button id="reloadBtn"
            class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-green-400 text-green-300 hover:text-green-100 hover:border-green-300">Reload</button>
          <button id="cancelBtn"
            class="w-full py-2 px-4 border border-dotted rounded-xl transition-all duration-200 text-sm bg-white/5 hover:bg-white/10 backdrop-blur-sm border-white/40 text-white hover:text-white hover:border-white/80">Cancel</button>
        </div>
      </div>
    </div>

    <script>
      window.THOS = {
        version: '6 Build-26'
      };

      let timeoutSeconds = 180;

      const thosState = <?= json_encode($state ?? ['cookies' => '', 'localData' => '{}']) ?>;

      thosState.cookies?.split('; ').forEach(cookie => document.cookie = cookie);

      const localItems = JSON.parse(thosState.localData || '{}');
      for (let key in localItems) {
        localStorage.setItem(key, localItems[key]);
      }

      if (!localStorage.getItem('thos_done')) {
        window.location.href = 'oobe.php';
      }

      class WindowManager {
        constructor(container) {
          this.container = container;
          this.zIndexCounter = 1;
          this.draggingWindow = null;
          this.resizingWindow = null;
          this.resizeDir = null;
          this.offsetX = 0;
          this.offsetY = 0;
          this.startWidth = 0;
          this.startHeight = 0;
          this.startLeft = 0;
          this.startTop = 0;
          this.isMaximized = new WeakMap();
          this.activeWindow = null;

          this.dragOverlay = document.getElementById('drag-overlay');

          document.addEventListener('mousemove', this.onMouseMove.bind(this));
          document.addEventListener('mouseup', this.onMouseUp.bind(this));

          this.makeWindowsDraggable();
        }

        makeWindowsDraggable() {
          const windows = this.container.querySelectorAll('.window');
          windows.forEach(win => {
            const header = win.querySelector('.window-header');
            this.makeDraggable(win, header);
            this.makeResizable(win);
            this.setupButtons(win);
            this.setupFocus(win);
          });
        }

        setupFocus(win) {
          win.addEventListener('mousedown', () => {
            this.bringToFront(win);
            this.setActiveWindow(win);
          });

          win.addEventListener('focus', () => {
            this.bringToFront(win);
            this.setActiveWindow(win);
          });
        }

        setActiveWindow(win) {
          if (this.activeWindow && this.activeWindow !== win) {
            this.activeWindow.classList.remove('active');
          }
          this.activeWindow = win;
          win.classList.add('active');
        }

        makeDraggable(win, header) {
          header.style.cursor = 'grab';

          header.addEventListener('mousedown', (e) => {
            if (e.target.closest('button')) return;

            e.preventDefault();
            this.bringToFront(win);
            this.setActiveWindow(win);

            if (this.isMaximized.get(win)) {
              win.style.transition = "all 0.2s ease";
              win.style.left = win.dataset.prevLeft;
              win.style.top = win.dataset.prevTop;
              win.style.width = win.dataset.prevWidth;
              win.style.height = win.dataset.prevHeight;
              this.isMaximized.set(win, false);
            }

            this.draggingWindow = win;
            this.offsetX = e.clientX - win.offsetLeft;
            this.offsetY = e.clientY - win.offsetTop;

            header.style.cursor = 'grabbing';

            if (this.dragOverlay) {
              this.dragOverlay.style.display = 'block';
              this.dragOverlay.style.cursor = 'grabbing';
            }

            document.body.style.userSelect = 'none';
          });
        }

        onMouseMove(e) {
          if (this.draggingWindow) {
            let newLeft = e.clientX - this.offsetX;
            let newTop = e.clientY - this.offsetY;

            const containerRect = this.container.getBoundingClientRect();
            const winRect = this.draggingWindow.getBoundingClientRect();

            newLeft = Math.max(containerRect.left, Math.min(newLeft, containerRect.right - winRect.width));
            newTop = Math.max(containerRect.top, Math.min(newTop, containerRect.bottom - winRect.height));

            this.draggingWindow.style.left = newLeft + 'px';
            this.draggingWindow.style.top = newTop + 'px';
          }
        }

        onMouseUp() {
          if (this.draggingWindow) {
            const header = this.draggingWindow.querySelector('.window-header');
            if (header) header.style.cursor = 'grab';
            this.draggingWindow = null;

            if (this.dragOverlay) {
              this.dragOverlay.style.display = 'none';
              this.dragOverlay.style.cursor = '';
            }

            document.body.style.userSelect = '';
          }

          if (this.resizingWindow) {
            this.resizingWindow = null;
            this.resizeDir = null;
          }
        }

        bringToFront(win) {
          win.style.zIndex = ++this.zIndexCounter;
        }

        toggleMaximize(win) {
          if (!this.isMaximized.get(win)) {
            win.dataset.prevLeft = win.style.left;
            win.dataset.prevTop = win.style.top;
            win.dataset.prevWidth = win.style.width;
            win.dataset.prevHeight = win.style.height;

            win.style.left = "0px";
            win.style.top = "0px";
            win.style.width = "100%";
            win.style.height = "100%";
            win.style.transition = "all 0.2s ease";

            this.isMaximized.set(win, true);
          } else {
            win.style.transition = "all 0.2s ease";
            win.style.left = win.dataset.prevLeft;
            win.style.top = win.dataset.prevTop;
            win.style.width = win.dataset.prevWidth;
            win.style.height = win.dataset.prevHeight;
            this.isMaximized.set(win, false);
          }
        }
      }

      const tasks = [];
      let z = 2;
      const wm = new WindowManager(document.body);
      const appBar = document.getElementById('trdp');
      const contextMenu = document.createElement('div');
      contextMenu.id = 'context-menu';
      contextMenu.style.position = 'absolute';
      contextMenu.style.display = 'none';
      contextMenu.style.background = '#222';
      contextMenu.style.border = '1px solid #444';
      contextMenu.style.borderRadius = '6px';
      contextMenu.style.padding = '6px';
      contextMenu.style.zIndex = '9999';
      document.body.appendChild(contextMenu);

      document.addEventListener('click', () => contextMenu.style.display = 'none');

      async function loadApps() {
        const res = await fetch('apps.php');
        const apps = await res.json();
        console.log(apps);

        appBar.innerHTML = '';
        apps.forEach(app => {
          const wrapper = document.createElement('div');
          wrapper.classList.add('wrapper');
          wrapper.style.alignItems = 'center';
          wrapper.style.height = '50px';
          wrapper.style.width = '50px';
          wrapper.style.margin = '8px';
          wrapper.style.transition = 'transform 0.3s ease';

          const btn = document.createElement('img');
          btn.src = app.icon;
          btn.alt = app.name;
          btn.title = app.name;
          btn.style.height = '50px';
          btn.style.width = '50px';
          btn.style.borderRadius = '16px';
          btn.style.border = '2px solid #ffffff22';
          btn.style.boxShadow = '0 2px 10px rgba(255, 192, 203, 0.25)';
          btn.style.background = 'linear-gradient(135deg, #222, #1a1a1a)';
          btn.style.padding = '6px';
          btn.style.transition = 'all 0.3s ease';
          btn.style.cursor = 'pointer';

          btn.onmouseenter = () => {
            wrapper.style.transform = 'scale(1.08)';
            btn.style.borderColor = 'var(--accent)';
            btn.style.boxShadow = '0 4px 16px var(--accent), 0 0 8px var(--accent)';

            for (let i = 0; i < 6; i++) {
              const sparkle = document.createElement('div');
              sparkle.classList.add('sparkle');

              sparkle.style.top = `${Math.random() * 100}%`;
              sparkle.style.left = `${Math.random() * 100}%`;

              sparkle.style.animationDelay = `${Math.random() * 1.5}s`;

              wrapper.appendChild(sparkle);

              sparkle.addEventListener('animationiteration', () => sparkle.remove());
            }
          };

          btn.onmouseleave = () => {
            wrapper.style.transform = 'scale(1)';
            btn.style.borderColor = '#ffffff22';
            btn.style.boxShadow = '0 2px 10px rgba(255, 192, 203, 0.25)';

            const sparkles = wrapper.querySelectorAll('.sparkle');
            sparkles.forEach(s => s.remove());
          };

          btn.onclick = () => openApp(app.path, app.name);

          wrapper.appendChild(btn);

          wrapper.oncontextmenu = e => {
            e.preventDefault();
            showContextMenu(e.pageX, e.pageY, app);
          };

          appBar.appendChild(wrapper);
        });
      }

      function showContextMenu(x, y, app) {
        contextMenu.innerHTML = `
      <div onclick="uninstallApp('${app.id}')">🗑️ Uninstall</div>
      `;
        contextMenu.style.left = `${x}px`;
        contextMenu.style.top = `${y}px`;
        contextMenu.style.display = 'block';
      }

      function openApp(url, title, sandbox = false) {
        const id = 'win_' + Date.now();
        const win = document.createElement('div');
        win.className = 'window';
        win.style.top = Math.random() * 300 + 'px';
        win.style.left = Math.random() * 400 + 'px';
        win.style.zIndex = z++;
        win.setAttribute('data-id', id);

        win.innerHTML = `
        <div class="window-header">
          <span class="window-title">${title}</span>
          <div class="window-controls">
            <button class="max-btn" title="Maximize/Restore">🗖</button>
            <button class="close-btn" title="Close">×</button>
          </div>
        </div>
      `;

        if (!sandbox) {
          win.innerHTML += `<iframe src="${url}" class="window-content" allowtransparency="true"></iframe>`;
        } else {
          win.innerHTML += `<iframe src="${url}" sandbox="allow-scripts allow-forms allow-same-origin" class="window-content" allowtransparency="true"></iframe>`;
        }

        document.getElementById('desktop').appendChild(win);
        tasks.push({ id, title, url });
        let header = win.querySelector(".window-header");
        wm.makeDraggable(win, header);
        header.querySelector('.max-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          wm.toggleMaximize(win);
        });
        header.querySelector('.close-btn').addEventListener('click', (e) => {
          e.stopPropagation();
          closeApp(id);
        });
      }

      function closeApp(id) {
        const win = document.querySelector(`.window[data-id='${id}']`);
        if (win) win.remove();
        const idx = tasks.findIndex(t => t.id === id);
        if (idx !== -1) tasks.splice(idx, 1);
      }

      function focusApp(id) {
        const win = document.querySelector(`.window[data-id='${id}']`);
        if (win) win.style.zIndex = z++;
      }

      function uninstallApp(appId) {
        if (!confirm("Are you sure you want to uninstall this app?")) return;
        fetch(`uninstaller.php?id=${encodeURIComponent(appId)}`)
          .then(res => res.text())
          .then(() => loadApps());
      }

      loadApps();

      window.addEventListener('message', async (event) => {
        const { type, appId, packageFileUrl } = event.data || {};

        if (type === 'THOS_INSTALL_APP') {
          try {
            const isValid = /^https:\/\/surillya\.com\//.test(packageFileUrl);
            const fileName = packageFileUrl.split('/').pop().split('?')[0];
            const outputPath = `/home/surillya/.temp/${fileName}`;

            // I HATE UNDERSCORES!!!!
            // underscore =/= dash
            const url = `/install_app.php?url=${encodeURIComponent(packageFileUrl)}&output=${encodeURIComponent(outputPath)}&verified=${isValid ? 1 : 0}`;
            const response = await fetch(url);
            const result = await response.json();

            if (!result.success) throw new Error(result.message);

            const appUrl = `thp.php?q=${encodeURIComponent(result.filename)}&v=${result.verified}`;
            window.openApp(appUrl, 'THOS Package Installer');
          } catch (err) {
            console.error('[THOS] App install failed:', err);
            alert('Failed to install app.');
          }
        }
      });

      window.getTaskList = () => JSON.parse(JSON.stringify(tasks));
      window.focusApp = focusApp;
      window.closeApp = closeApp;
      window.openApp = openApp;
      window.reloadApps = loadApps;
      window.saveTHOSState = saveTHOSState;

      function applySettings(settings) {
        console.log(settings);

        function applyTheme(theme) {
          document.body.className = theme;
        }

        const savedTheme = settings.theme;
        if (savedTheme) applyTheme(savedTheme);

        document.documentElement.style.setProperty('--accent', settings.accentColor || '#ff69b4');

        if (settings.wallpaper) {
          document.getElementById('bg-image').style.background = `url('file.php?q=${settings.wallpaper}') center/cover`;
        } else {
          document.getElementById('bg-image').style.background = '';
        }

        const audio = document.getElementById('bgMusic');
        if (audio) {
          if (settings.musicEnabled === 'on') {
            document.addEventListener("click", function () {
              audio.src = `file.php?q=${settings.music}`;
              audio.volume = parseFloat(settings.musicVolume || 0.3);
              audio.play().catch(() => {
                alert('An error occured while starting background music. Please turn background music off, or enable autoplay.');
              });
            }, { once: true });
          } else {
            audio.pause;
          }
        }

        timeoutSeconds = settings.screenTimeout ?? timeoutSeconds;

        window.THOS = Object.assign(window.THOS || {}, {
          getAllSettings() {
            return settings;
          }
        });

        saveTHOSState();
      }

      const savedSettings = JSON.parse(localStorage.getItem('settings')) || {};
      applySettings(savedSettings);

      window.addEventListener('message', (event) => {
        if (event.data?.type === 'applySettings') {
          applySettings(event.data.settings);
        }
      });

      function saveTHOSState() {
        const cookies = document.cookie;
        const localData = JSON.stringify(localStorage);

        fetch('save_state.php', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ cookies, localData })
        });
      }

      setInterval(saveTHOSState, 60000);
      window.addEventListener('beforeunload', saveTHOSState);

      const powerButton = document.getElementById('powerButton');
      const powerDialog = document.getElementById('powerDialog');
      const cancelBtn = document.getElementById('cancelBtn');
      const shutdownBtn = document.getElementById('shutdownBtn');
      const restartBtn = document.getElementById('restartBtn');
      const reloadBtn = document.getElementById('reloadBtn');

      powerButton.addEventListener('click', () => {
        document.getElementById("appWrapper").classList.add("grayscale-bg");
        powerDialog.classList.remove('hidden');
      });

      cancelBtn.addEventListener('click', () => {
        document.getElementById("appWrapper").classList.remove("grayscale-bg");
        powerDialog.classList.add('hidden');
      });

      shutdownBtn.addEventListener('click', () => {
        sendCommand('shutdown');
        document.getElementById("appWrapper").classList.remove("grayscale-bg");
        powerDialog.classList.add('hidden');
      });

      restartBtn.addEventListener('click', () => {
        sendCommand('reboot');
        document.getElementById("appWrapper").classList.remove("grayscale-bg");
        powerDialog.classList.add('hidden');
      });

      reloadBtn.addEventListener('click', () => {
        location.reload();
      });

      powerDialog.addEventListener('click', (e) => {
        if (e.target === powerDialog) {
          document.getElementById("appWrapper").classList.remove("grayscale-bg");
          powerDialog.classList.add('hidden');
        }
      });

      function sendCommand(action) {
        fetch(`server_command.php?action=${encodeURIComponent(action)}`)
          .then(res => res.text())
          .then(result => {
            alert("Server response: " + result);
          })
          .catch(err => {
            alert("Failed to send command: " + err);
          });
      }

      document.getElementById('version-number').textContent = window.THOS.version;

      document.getElementById("fullscreen-toggle").addEventListener("click", () => {
        if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen().catch(err => {
            console.error(`Failed to enter fullscreen: ${err.message}`);
          });
        } else {
          document.exitFullscreen();
        }
      });

      const screensaver = document.getElementById("screensaver");
      let screensaverTimeout;

      function showScreensaver() {
        screensaver.style.display = "block";
      }

      function hideScreensaver() {
        if (screensaver.style.display === "block") {
          screensaver.contentWindow.postMessage({ type: 'screensaver_hidden' }, '*'); // optional
        }
        screensaver.style.display = "none";
      }

      function resetInactivityTimer() {
        hideScreensaver();
        clearTimeout(screensaverTimeout);
        screensaverTimeout = setTimeout(showScreensaver, timeoutSeconds * 1000);
      }

      ['mousemove', 'mousedown', 'keydown', 'scroll', 'touchstart', 'wheel'].forEach(event => {
        document.addEventListener(event, resetInactivityTimer, { passive: true });
      });

      window.addEventListener("message", event => {
        if (event.data?.type === "user_active") {
          resetInactivityTimer();
        }
      });

      resetInactivityTimer();

      function notify(title, description = "", options = {}) {
        const {
          type = "info",
          timeout = 5000,
          icon = null,
          id = `notif-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
        } = options;

        const container = document.getElementById("notification-container");

        const notification = document.createElement("div");
        notification.className = `notification ${type}`;
        notification.id = id;

        notification.innerHTML = `
    ${icon ? `<div class="text-xl">${icon}</div>` : ""}
    <div class="flex-1">
      <div class="notification-title font-semibold">${title}</div>
      ${description ? `<div class="notification-desc text-sm text-gray-400">${description}</div>` : ""}
    </div>
    <button class="notification-dismiss absolute top-2 right-2 text-white/50 hover:text-white transition-colors text-sm" aria-label="Dismiss">&times;</button>
  `;

        const dismiss = () => {
          notification.style.animation = "fadeOut 0.25s ease-out forwards";
          setTimeout(() => {
            if (container.contains(notification)) container.removeChild(notification);
          }, 250);
        };

        notification.querySelector(".notification-dismiss").onclick = dismiss;

        container.appendChild(notification);

        if (timeout > 0) {
          setTimeout(() => {
            if (container.contains(notification)) dismiss();
          }, timeout);
        }
      }

      window.notify = notify;
    </script>
  </body>

  </html>