import * as plugins from '../plugins.js';
import * as appstate from '../appstate.js';
import { appRouter } from '../router.js';

import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  state,
  type TemplateResult
} from '@design.estate/dees-element';

// Import view components
import { OpsViewOverview } from './ops-view-overview.js';
import { OpsViewNetwork } from './ops-view-network.js';
import { OpsViewEmails } from './ops-view-emails.js';
import { OpsViewLogs } from './ops-view-logs.js';
import { OpsViewConfig } from './ops-view-config.js';
import { OpsViewSecurity } from './ops-view-security.js';

@customElement('ops-dashboard')
export class OpsDashboard extends DeesElement {
  @state() accessor loginState: appstate.ILoginState = {
    identity: null,
    isLoggedIn: false,
  };

  @state() accessor uiState: appstate.IUiState = {
    activeView: 'overview',
    sidebarCollapsed: false,
    autoRefresh: true,
    refreshInterval: 1000,
    theme: 'light',
  };

  // Store viewTabs as a property to maintain object references
  private viewTabs = [
    {
      name: 'Overview',
      element: OpsViewOverview,
    },
    {
      name: 'Network',
      element: OpsViewNetwork,
    },
    {
      name: 'Emails',
      element: OpsViewEmails,
    },
    {
      name: 'Logs',
      element: OpsViewLogs,
    },
    {
      name: 'Configuration',
      element: OpsViewConfig,
    },
    {
      name: 'Security',
      element: OpsViewSecurity,
    },
  ];

  /**
   * Get the current view tab based on the UI state's activeView.
   * Used to pass the correct selectedView to dees-simple-appdash on initial render.
   */
  private get currentViewTab() {
    return this.viewTabs.find(t => t.name.toLowerCase() === this.uiState.activeView) || this.viewTabs[0];
  }

  constructor() {
    super();
    document.title = 'DCRouter OpsServer';
    
    // Subscribe to login state
    const loginSubscription = appstate.loginStatePart
      .select((stateArg) => stateArg)
      .subscribe((loginState) => {
        this.loginState = loginState;
        // Trigger data fetch when logged in
        if (loginState.isLoggedIn) {
          appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
          appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
        }
      });
    this.rxSubscriptions.push(loginSubscription);
    
    // Subscribe to UI state
    const uiSubscription = appstate.uiStatePart
      .select((stateArg) => stateArg)
      .subscribe((uiState) => {
        this.uiState = uiState;
        // Sync appdash view when state changes (e.g., from URL navigation)
        this.syncAppdashView(uiState.activeView);
      });
    this.rxSubscriptions.push(uiSubscription);
  }

  /**
   * Sync the dees-simple-appdash view selection with the current state.
   * This is needed when the URL changes and we need to update the UI.
   */
  private syncAppdashView(viewName: string): void {
    const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
    if (!appDash) return;

    const targetTab = this.viewTabs.find(t => t.name.toLowerCase() === viewName);
    if (!targetTab) return;

    // Check if we need to switch (avoid unnecessary updates)
    if (appDash.selectedView === targetTab) return;

    // Update the selected view programmatically
    appDash.selectedView = targetTab;

    // Update the displayed content
    const content = appDash.shadowRoot?.querySelector('.appcontent');
    if (content) {
      if (appDash.currentView) {
        appDash.currentView.remove();
      }
      const view = new targetTab.element();
      content.appendChild(view);
      appDash.currentView = view;
    }
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }

      .maincontainer {
        position: relative;
        width: 100%;
        height: 100%;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="maincontainer">
        <dees-simple-login
          name="DCRouter OpsServer"
        >
          <dees-simple-appdash
            name="DCRouter OpsServer"
            .viewTabs=${this.viewTabs}
            .selectedView=${this.currentViewTab}
          >
          </dees-simple-appdash>
        </dees-simple-login>
      </div>
    `;
  }

  public async firstUpdated() {
    const simpleLogin = this.shadowRoot.querySelector('dees-simple-login');
    simpleLogin.addEventListener('login', (e: CustomEvent) => {
      // Handle logout event
      this.login(e.detail.data.username, e.detail.data.password);
    });

    // Handle view changes
    const appDash = this.shadowRoot.querySelector('dees-simple-appdash');
    if (appDash) {
      appDash.addEventListener('view-select', (e: CustomEvent) => {
        const viewName = e.detail.view.name.toLowerCase();
        // Use router for navigation instead of direct state update
        appRouter.navigateToView(viewName);
      });

      // Handle logout event
      appDash.addEventListener('logout', async () => {
        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
      });
    }

    // Handle initial state - check if we have a stored session that's still valid
    const loginState = appstate.loginStatePart.getState();
    if (loginState.identity?.jwt) {
      // Verify JWT hasn't expired
      if (loginState.identity.expiresAt > Date.now()) {
        // JWT still valid, restore logged-in state
        this.loginState = loginState;
        await simpleLogin.switchToSlottedContent();
        await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
        await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
      } else {
        // JWT expired, clear the stored state
        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
      }
    }
  }

  private async login(username: string, password: string) {
    const domtools = await this.domtoolsPromise;
    console.log(`Attempting to login...`);
    const simpleLogin = this.shadowRoot.querySelector('dees-simple-login');
    const form = simpleLogin.shadowRoot.querySelector('dees-form');
    form.setStatus('pending', 'Logging in...');
    
    const state = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
      username,
      password,
    });
    
    if (state.identity) {
      console.log('Login successful');
      this.loginState = state;
      form.setStatus('success', 'Logged in!');
      await simpleLogin.switchToSlottedContent();
      await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
      await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
    } else {
      form.setStatus('error', 'Login failed!');
      await domtools.convenience.smartdelay.delayFor(2000);
      form.reset();
    }
  }
}