<html>
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ethetic</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: #121212;
        color: #e0e0e0;
        font-family: 'Roboto', Arial, sans-serif;
        line-height: 1.6;
      }

      .container {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
      }

      /* Header Styling */
      .header {
        background-color: #171717; /* 23, 23, 23 */
        color: #e0e0e0;
        padding: 10px;
        border: 1px solid #aaaaaa; /* 170, 170, 170 */
        border-radius: 8px;
        margin-bottom: 20px; /* Gap between header and editor */
        font-size: 18px;
      }

      #editor {
        width: 100%;
        height: 65vh;
        margin: 20px 0;
        margin-top: 109px; /* This moves the editor down */
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #444;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        background: #131313; /* Changed background color */
      }

      .execute-btn, .clear-btn {
        display: inline-block;
        background: #131313; /* Dark background color (19,19,19) */
        color: #fff;
        border: 0.7px solid #aaaaaa; /* Border with RGB value (170,170,170) */
        padding: 15px 30px;
        font-size: 16px;
        border-radius: 8px;
        cursor: pointer;
        margin-top: -12px;
        box-shadow: none;
      }

      .execute-btn:hover, .clear-btn:hover {
        background: #1c1c1c; /* Slightly lighter background for hover effect */
      }

      .credits {
        margin-top: 30px;
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
      }

      .credits a {
        color: #4ecdc4;
        text-decoration: none;
        transition: color 0.2s;
      }

      .credits a:hover {
        color: #00ffcc;
      }

      .button-container {
        display: flex;
        gap: 10px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- Header Updated with 'ethetic - loader' -->
      <div class="header">
        ethetic - loader
      </div>

      <div id="editor"></div>

      <div class="button-container">
        <button class="execute-btn" onclick="executeScript()">Execute</button>
        <button class="clear-btn" onclick="clearEditor()">Clear</button>
      </div>
    </div>

    <script>
      require.config({
        paths: {
          vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs'
        }
      });

      window.MonacoEnvironment = {
        getWorkerUrl: function () {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {
              baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/'
            };
            importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/base/worker/workerMain.js');
          `)}`; 
        }
      };

      require(['vs/editor/editor.main'], function () {
        // Define a custom theme
        monaco.editor.defineTheme('custom-dark', {
          base: 'vs-dark',
          inherit: true,
          rules: [
            { token: 'comment', foreground: '7f7f7f', fontStyle: 'italic' },
            { token: 'keyword', foreground: 'ff79c6', fontStyle: 'bold' },
            { token: 'variable', foreground: 'f1fa8c' },
            { token: 'string', foreground: '50fa7b' },
            { token: 'number', foreground: 'bd93f9' },
            { token: 'operator', foreground: 'ffb86c' },
            { token: 'type', foreground: 'ff5555', fontStyle: 'italic' },
          ],
          colors: {
            'editor.background': '#131313', /* Monaco Editor Background */
            'editor.foreground': '#f8f8f2',
            'editorCursor.foreground': '#ff79c6',
            'editor.lineHighlightBackground': '#44475a',
            'editor.selectionBackground': '#bd93f9',
            'editor.selectionHighlightBackground': '#6272a4',
          }
        });

        // Create the Monaco editor instance with the custom theme and smooth typing
        let editor = monaco.editor.create(document.getElementById('editor'), {
          value: 'print("ethetic ( powered by cxapi)")',
          language: 'lua',
          theme: 'custom-dark',
          automaticLayout: true,
          minimap: {
            enabled: true
          },
          fontSize: 14,
          wordWrap: 'on',
          lineNumbers: 'on',
          renderLineHighlight: 'all',
          autoClosingBrackets: true,
          autoClosingQuotes: true,
          matchBrackets: true,
          fontFamily: '"Roboto", "Arial", sans-serif', // Set font to Roboto or Arial
          fontWeight: 'bold', // Make the font bold
          fontLigatures: true, // Enable smooth typing using ligatures
          scrollbar: {
            vertical: 'auto',
            horizontal: 'auto',
            alwaysConsumeMouseWheel: false,
          }
        });

        // Adding Autocomplete / IntelliSense
        monaco.languages.registerCompletionItemProvider('lua', {
          provideCompletionItems: function (model, position) {
            var word = model.getWordAtPosition(position);
            var suggestions = [
              {
                label: 'print',
                kind: monaco.languages.CompletionItemKind.Function,
                insertText: 'print()',
                documentation: 'Prints output to the console',
              },
              {
                label: 'if',
                kind: monaco.languages.CompletionItemKind.Keyword,
                insertText: 'if () then\n  \nend',
                documentation: 'Start an if condition block',
              },
              {
                label: 'for',
                kind: monaco.languages.CompletionItemKind.Keyword,
                insertText: 'for i = 1, 10 do\n  \nend',
                documentation: 'For loop iteration',
              },
              {
                label: 'local',
                kind: monaco.languages.CompletionItemKind.Keyword,
                insertText: 'local ',
                documentation: 'Define a local variable',
              },
              // Add more suggestions as needed
            ];

            return { suggestions: suggestions };
          }
        });

        // Execute the script function
        window.executeScript = function () {
          const editorContent = editor.getValue();
          console.log("Editor content:", editorContent);

          try {
            fetch('http://localhost:5000/message', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ content: editorContent })
            })
              .then(response => response.json())
              .then(data => {
                console.log("Server responded:", data);
              })
              .catch(error => {
                console.error("Error:", error);
              });
          } catch (e) {
            console.error("Error while sending JSON:", e);
            alert("There was an issue sending the JSON data.");
          }
        };

        // Clear the editor function
        window.clearEditor = function () {
          editor.setValue('');
        };
      });
    </script>
  </body>
</html>
