class DumbTerminal extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --terminal-bg: #111;
          --terminal-fg: #0f0;
          --terminal-accent: #0ff;
          --terminal-font: monospace;

          display: block;
          background: var(--terminal-bg);
          color: var(--terminal-fg);
          font-family: var(--terminal-font);
          padding: 1rem;
          border-radius: 8px;
          overflow-y: auto;
          max-height: 500px;
        }

        .output {
          white-space: pre-wrap;
          margin-bottom: 1em;
        }

        .input-line {
          display: flex;
        }

        .prompt {
          color: var(--terminal-accent);
          margin-right: 0.5em;
        }

        input {
          background: transparent;
          border: none;
          color: var(--terminal-fg);
          outline: none;
          width: 100%;
          font-family: inherit;
          font-size: inherit;
        }

        dialog {
          border: none;
          background: transparent;
        }

        .dialog-backdrop {
          background: rgba(0, 0, 0, 0.8);
          padding: 2rem;
        }
      </style>

      <div class="output" id="output"></div>
      <div class="input-line">
        <span class="prompt">&gt;</span>
        <input type="text" id="input" autocomplete="off" autofocus />
      </div>
    `;

    this.outputEl = this.shadowRoot.getElementById("output");
    this.inputEl = this.shadowRoot.getElementById("input");

    this.history = [];
    this.historyIndex = -1;

    this.inputEl.addEventListener("keydown", (e) => this.onKeyDown(e));
  }

  onKeyDown(event) {
    const value = this.inputEl.value;

    switch (event.key) {
      case "Enter":
        this.executeCommand(value);
        this.history.push(value);
        this.historyIndex = this.history.length;
        this.inputEl.value = "";
        break;

      case "ArrowUp":
        if (this.historyIndex > 0) {
          this.historyIndex--;
          this.inputEl.value = this.history[this.historyIndex];
        }
        break;

      case "ArrowDown":
        if (this.historyIndex < this.history.length - 1) {
          this.historyIndex++;
          this.inputEl.value = this.history[this.historyIndex];
        } else {
          this.historyIndex = this.history.length;
          this.inputEl.value = "";
        }
        break;
    }
  }

  executeCommand(command) {
    const outputLine = document.createElement("div");
    outputLine.textContent = `> ${command}`;
    this.outputEl.appendChild(outputLine);

    const resultLine = document.createElement("div");
    resultLine.textContent = this.mockExecute(command);
    this.outputEl.appendChild(resultLine);

    this.outputEl.scrollTop = this.outputEl.scrollHeight;
  }

  mockExecute(command) {
    switch (command.trim()) {
      case "help":
        return "Available commands: help, clear, date";
      case "date":
        return new Date().toString();
      case "clear":
        this.outputEl.innerHTML = "";
        return "";
      default:
        return `Unknown command: ${command}`;
    }
  }

  /**
   * Static method to create a modal dialog with the terminal
   * @returns {HTMLDialogElement}
   */
  static createModal() {
    const dialog = document.createElement("dialog");
    dialog.innerHTML = `
      <div class="dialog-backdrop">
        <web-terminal></web-terminal>
      </div>
    `;
    document.body.appendChild(dialog);
    dialog.showModal();
    return dialog;
  }
}

customElements.define("web-terminal", WebTerminal);
