import * as vscode from "vscode";
import { getNonce } from "./getNonce";
import { apiBaseUrl } from "./constants";

export class WebviewPanelCostOfDelay {
  /**
   * Track the currently panel. Only allow a single panel to exist at a time.
   */
  public static _site: string;
  public static _view: string;
  public static _title: string;
  public static currentPanel: WebviewPanelCostOfDelay | undefined;

  public static readonly viewType = "web-view-panel";

  private _disposables: vscode.Disposable[] = [];

  public static createOrShow(extensionContext: vscode.ExtensionContext, site: string, view: string) {
    this._site = site;
    this._view = view;

    const column = vscode.window.activeTextEditor
      ? vscode.window.activeTextEditor.viewColumn
      : undefined;

    const title = view === '' ? 'Cost of Delay (CoD)' :
      view === 'EFFORT' ? 'Effort' :
        view === 'LIVE' ? 'Cost of Delay (CoD) - Live Update' :
          view === 'HTML' ? 'Backlog (Bugs & Features with parents)' :
            view === 'WSJF' ? 'Weightest Shortest Job First calculation (WSJF)' :
              'CoD';
    this._title = title;

    // If we already have a panel, show it.
    if (WebviewPanelCostOfDelay.currentPanel) {
      WebviewPanelCostOfDelay.currentPanel._panel.reveal(column);
      WebviewPanelCostOfDelay.currentPanel._update(site, title, view);
      return;
    }

    // Otherwise, create a new panel.
    const panel = vscode.window.createWebviewPanel(
      WebviewPanelCostOfDelay.viewType,
      title,
      column || vscode.ViewColumn.One,
      {
        // Enable javascript in the webview
        enableScripts: true,
        enableFindWidget: true,

        // And restrict the webview to only loading content from our extension's `media` directory.
        localResourceRoots: [
          vscode.Uri.joinPath(extensionContext.extensionUri, "media"),
          vscode.Uri.joinPath(extensionContext.extensionUri, "out/compiled"),
        ],
      }
    );

    WebviewPanelCostOfDelay.currentPanel = new WebviewPanelCostOfDelay(extensionContext, panel, site, title, view);
  }

  public static kill() {
    WebviewPanelCostOfDelay.currentPanel?.dispose();
    WebviewPanelCostOfDelay.currentPanel = undefined;
  }

  public static revive(panel: vscode.WebviewPanel, extensionContext: vscode.ExtensionContext) {
    WebviewPanelCostOfDelay.currentPanel = new WebviewPanelCostOfDelay(extensionContext, panel, this._site, this._title, this._view);
  }

  private constructor(private readonly _extensionContext: vscode.ExtensionContext, private readonly _panel: vscode.WebviewPanel, site: string, title: string, view: string) {

    // Set the webview's initial html content
    this._update(site, title, view);

    // Listen for when the panel is disposed
    // This happens when the user closes the panel or when the panel is closed programmatically
    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);

    // Handle messages from the webview
    this._panel.webview.onDidReceiveMessage(
      (message) => {
        switch (message.command) {
          case "alert":
            vscode.window.showErrorMessage(message.text);
            return;
          default:
            vscode.window.showErrorMessage(message.text);
            break;
        }
      },
      null,
      this._disposables
    );
  }

  public dispose() {
    WebviewPanelCostOfDelay.currentPanel = undefined;

    // Clean up our resources
    this._panel.dispose();

    while (this._disposables.length) {
      const x = this._disposables.pop();
      if (x) {
        x.dispose();
      }
    }
  }

  private async _update(site: string, title: string, view: string) {
    const webview = this._panel.webview;
    this._panel.webview.html = this._getHtmlForWebview(site, title, view, webview);
    webview.onDidReceiveMessage(async (message: string) => {
      vscode.window.showErrorMessage(message);
    });
  }

  private _getHtmlForWebview(site: string, title: string, view: string, webview: vscode.Webview) {
    const baseUri = 'https://eaf-dev.mes.infineon.com';
    const scriptUri = 'cod-1-123-0.js?v=2025-04-14-08-10';

    // Use a nonce to only allow a specific script to be run.
    const nonce = getNonce();

    if (view === 'HTML') {
      return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infineon - ${title}</title>
</head>
<body>
  <iframe width="100%" style="height: 100vh;" src="${baseUri}/html/mes.html?site=${site}" title="${title}">
  </iframe>
</body>
</html>`;
    }
    else {
      const styleBootstrapUri = webview.asWebviewUri(
        vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "bootstrap.min.css")
      );
      const styleCostOfDelayUri = webview.asWebviewUri(
        vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "cod.css")
      );
      const scriptJQueryUri = webview.asWebviewUri(
        vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "jquery-1.6.4.min.js")
      );
      const scriptSignalRUri = webview.asWebviewUri(
        vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "jquery.signalR-2.4.3.min.js")
      );
      const scriptCostOfDelayUri = webview.asWebviewUri(
        vscode.Uri.joinPath(this._extensionContext.extensionUri, "media", "cost-of-delay.js")
      );

      return `<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infineon - ${title}</title>
    <link href="${styleBootstrapUri}" rel="stylesheet" />
    <link href="${styleCostOfDelayUri}" rel="stylesheet" />
    <script nonce="${nonce}" src="${scriptJQueryUri}"></script>
    <script nonce="${nonce}" src="${scriptSignalRUri}"></script>
    <script nonce="${nonce}" src="${baseUri}/js/${scriptUri}" type="text/javascript"></script>
    <script nonce="${nonce}">
      const _webviewSite = '${site}';
      const _webviewView = '${view}';
      const acquiredVsCodeApi = acquireVsCodeApi();
      const apiBaseUrl = ${JSON.stringify(apiBaseUrl)}
      const _webviewUsername = '${process.env.USERNAME}';
      const _webviewMachineId = '${vscode.env.machineId}';
    </script>
</head>

<body>
    <div class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand">
                    <span id="siteHeader">&nbsp;</span> -
                    <span id="th-span">&nbsp;</span>
                    <button id="toggle">Toggle</button>
                </div>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
                <p class="navbar-text navbar-right">
                    &nbsp;
                </p>
            </div>
        </div>
    </div>
    <div class="container-fluid body-content" style="margin-top: 40px; margin-left: 15px;">
        <div id="HeaderGridDiv">
            <table id="HeaderGrid" border="1"></table>
        </div>

        <br />&nbsp;

        <div id="AllGridDiv">
            <table id="AllGrid"></table>
        </div>

        <textarea id="AllTextarea" rows="20" cols="147"></textarea>
    </div>

  <script nonce="${nonce}" src="${scriptCostOfDelayUri}"></script>
</body>

</html>`;
    }
  }
}