import { PageTitleUpdatedEvent } from 'electron';
import { TabGroup, Tab } from 'electron-tabs';
import { MenuItem, ApiResponse, EIACDesktopApi } from './EIAC_Desktop_Api';

const tabGroup: TabGroup = document.querySelector('tab-group') as TabGroup;

/**
 * 检查登录状态
 */
function checkLoginStatus(): void {
  const cookie = window.electronAPI.getSessionStorage('cookie');
  if (!cookie) {
    window.location.href = 'login.html';
    return;
  }

  // Show user information
  const userInfo = document.getElementById('userInfo');
  if (userInfo) {
    userInfo.textContent = '欢迎使用';
  }
}

/**
 * 获取菜单列表
 * @returns 菜单列表
 */
async function getMenuListAsync(): Promise<MenuItem[]> {
  try {
    const response: ApiResponse<MenuItem[]> = await EIACDesktopApi.Menu.GetMenuAsync();
    if (response.status === 0) {
      return response.data;
    } else {
      throw new Error(response.msg || '获取菜单列表失败');
    }
  } catch (error) {
    console.error(error);
    throw error;
  }
}

/**
 * 创建菜单项
 * @param item 菜单项
 * @param menuList 菜单列表
 * @returns 菜单项
 */
function createMenuItem(item: MenuItem, menuList: MenuItem[]): HTMLLIElement {
  const li: HTMLLIElement = document.createElement('li');
  li.className = 'menu-item';

  const icon: HTMLImageElement = document.createElement('img');
  icon.src = item.IconConfig._1x.Default;
  icon.alt = item.ShowName;
  icon.className = 'menu-icon';

  const span: HTMLSpanElement = document.createElement('span');
  span.textContent = item.ShowName;

  li.appendChild(icon);
  li.appendChild(span);

  if (item.Url) {
    li.addEventListener('click', async () => {
      // Remove active state from other menu items
      document.querySelectorAll('.menu-item').forEach(menuItem => {
        menuItem.classList.remove('active');
        const menuIcon = menuItem.querySelector('.menu-icon') as HTMLImageElement;
        if (menuIcon) {
          const menuItemData = menuList.find((m: MenuItem) => m.ShowName === menuItem.querySelector('span')?.textContent);
          if (menuItemData) {
            menuIcon.src = menuItemData.IconConfig._1x.Default;
          }
        }
      });

      // Add active state to current menu item
      li.classList.add('active');
      icon.src = item.IconConfig._1x.Selected;

      // Create new tab
      await addTabAsync(tabGroup, item);
    });
  }

  return li;
}

/**
 * 渲染菜单
 * @param menuList 菜单列表
 */
function renderMenu(menuList: MenuItem[]): void {
  const menuContainer: HTMLUListElement = document.getElementById('menuList') as HTMLUListElement;
  if (!menuContainer) return;

  menuList.forEach(item => {
    const menuItem: HTMLLIElement = createMenuItem(item, menuList);
    menuContainer.appendChild(menuItem);

    if (item.Children) {
      const subMenu: HTMLUListElement = document.createElement('ul');
      subMenu.className = 'submenu';
      item.Children.forEach(child => {
        const childItem: HTMLLIElement = createMenuItem(child, menuList);
        subMenu.appendChild(childItem);
      });
      menuContainer.appendChild(subMenu);
    }
  });
}

/**
 * 添加标签页
 * @param tabGroup 标签组
 * @param menuItem 菜单项
 * @returns 标签页
 */
async function addTabAsync(tabGroup: TabGroup, menuItem: MenuItem): Promise<Tab> {
  const url: string = menuItem.Url.startsWith("http") ? menuItem.Url : `http://${menuItem.Url}`;
  const result: { ok: boolean; status: number; message?: string } = await window.electronAPI.checkUrlAvailable(url);
  if (result.ok && result.status >= 200 && result.status < 400) {
    console.log('✅ URL 可访问:', result.status);
    const cookies: string = window.electronAPI.getSessionStorage('cookie');
    await window.electronAPI.setWebviewCookie(url, cookies);
  } else {
    console.warn('❌ URL 不可访问:', result.message ?? `status ${result.status}`);
    showErrorModal(`无法访问 ${url}\r\n异常原因：${result.message ?? `status ${result.status}`}\r\n请联系10000技术支持。`);
  }

  const tab: Tab = tabGroup.addTab({
    active: true,
    closable: true,
    title: menuItem.ShowName,
    src: url,
    iconURL: menuItem.IconConfig._1x.Default,
    webviewAttributes: {
      'webpreferences': 'contextIsolation=yes, nodeIntegration=no',
      'autosize': 'on',
      'allowpopups': true,
    },
    ready: (tab: Tab) => {
      // 在webview加载完成后，获取并设置标签页的标题和图标
      const webview: Electron.WebviewTag = tab.webview as Electron.WebviewTag;
      listenWebviewTitleChange(webview, tab);
    }
  });

  return tab;
}

/**
 * 监听webview的标题变化，并更新标签页的标题和图标
 * @param webview webview
 * @param tab 标签页
 */
function listenWebviewTitleChange(webview: Electron.WebviewTag, tab: Tab): void {
  // 在webview加载完成后，获取并设置标签页的标题和图标
  webview.addEventListener('did-finish-load', async () => {
    const title: string = webview.getTitle();
    tab.setTitle(title);
    console.log('did-finish-load title:', title);

    const faviconUrl: string = await getFaviconUrl(webview);
    console.log('did-finish-load iconUrl:', faviconUrl);
    if (faviconUrl) {
      tab.setIcon(faviconUrl, null);
    }
  });

  // 监听webview的标题变化，并更新标签页的标题和图标
  webview.addEventListener('page-title-updated', async (event: PageTitleUpdatedEvent) => {
    console.log('title-changed title:', event.title);
    tab.setTitle(event.title);

    const faviconUrl: string = await getFaviconUrl(webview);
    console.log('title-changed iconUrl:', faviconUrl);
    if (faviconUrl) {
      tab.setIcon(faviconUrl, null);
    }
  });
}

/**
 * 获取图标URL
 * @param webview webview
 * @returns 图标URL
 */
async function getFaviconUrl(webview: Electron.WebviewTag): Promise<string> {
  const iconUrl: string | null = await webview.executeJavaScript(`
      (() => {
        const relList = ['icon', 'shortcut icon', 'apple-touch-icon'];
        const links = Array.from(document.getElementsByTagName('link'));
        const iconLink = links.find(link => relList.includes(link.rel));
        return iconLink ? iconLink.href : null;
      })();
    `);

  if (iconUrl) {
    return iconUrl;
  }

  const url: string = webview.getURL();
  const defaultFaviconUrl: string = new URL(url).origin + '/favicon.ico';
  return defaultFaviconUrl;
}

/**
 * 绑定logo点击事件
 */
function bindLogoClickEvent(tabGroup: TabGroup, menuItem: MenuItem): void {
  const logo: HTMLImageElement = document.getElementById('logo') as HTMLImageElement;
  logo.addEventListener('click', async () => {
    console.log('logo clicked');

    const tab: Tab = await addTabAsync(tabGroup, menuItem);
    tab.setPosition(0);
  });
}

/**
 * 绑定登出事件
 */
function bindLogoutEvent(): void {
  const logoutBtn: HTMLButtonElement = document.getElementById('btnLogout') as HTMLButtonElement;
  if (logoutBtn) {
    logoutBtn.addEventListener('click', () => {
      window.electronAPI.removeSessionStorage('cookie');
      window.location.href = 'login.html';
    });
  }
}

/**
 * 绑定关闭错误弹窗事件
 */
function bindCloseErrorModalEvent(): void {
  const errorModal: HTMLDivElement = document.getElementById('errorModal') as HTMLDivElement;
  const closeErrorModal: HTMLButtonElement = document.getElementById('closeErrorModal') as HTMLButtonElement;

  // Close button click event
  closeErrorModal.addEventListener('click', () => {
    errorModal.style.display = 'none';
  });

  // Click outside to close
  window.addEventListener('click', (event: Event) => {
    if (event.target === errorModal) {
      errorModal.style.display = 'none';
    }
  });
}

/**
 * 显示错误弹窗
 * @param message 错误消息
 */
function showErrorModal(message: string): void {
  const errorModal: HTMLDivElement = document.getElementById('errorModal') as HTMLDivElement;
  const errorMessage: HTMLParagraphElement = document.getElementById('errorMessage') as HTMLParagraphElement;
  errorMessage.textContent = message;
  errorModal.style.display = 'block';
}

/**
 * 初始化
 */
async function initialize(): Promise<void> {
  // Check login status
  checkLoginStatus();

  try {
    const menuList: MenuItem[] = await getMenuListAsync();
    renderMenu(menuList);

    // Create initial tab
    const firstMenuItem: MenuItem = menuList[0];
    await addTabAsync(tabGroup, firstMenuItem);

    // Bind logo click event
    const lastMenuItem: MenuItem = menuList[menuList.length - 1];
    const logoMenuItem: MenuItem = lastMenuItem.Children[lastMenuItem.Children.length - 1];
    bindLogoClickEvent(tabGroup, logoMenuItem);

    // Bind logout event
    bindLogoutEvent();

    // Bind close error modal event
    bindCloseErrorModalEvent();
  } catch (error) {
    console.error('初始化失败:', error);
  }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initialize);

// 监听新标签页打开事件
window.electronAPI.onOpenTab((webContentId: number, url: string) => {
  console.log(new URL(url));
  const defaultFaviconUrl = new URL(url).origin + '/favicon.ico';
  addTabAsync(tabGroup, {
    Url: url,
    ShowName: '新标签页',
    IconConfig: { _1x: { Default: defaultFaviconUrl, Selected: defaultFaviconUrl }, _2x: { Default: defaultFaviconUrl, Selected: defaultFaviconUrl } },
    Children: null
  });
});