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

import * as plugins from '../../plugins.js';
import * as states from '../../states/accountstate.js';
import { IdpState } from '../../states/idp.state.js';
import { accountDesignTokens } from './sharedstyles.js';
import { CreateOrgModal } from './create-org-modal.js';
import { OrgSelectModal } from './org-select-modal.js';

import { commitinfo } from '../../../ts/00_commitinfo_data.js';

declare global {
  interface HTMLElementTagNameMap {
    'lele-accountnavigation': LeleAccountNavigation;
  }
}

@customElement('lele-accountnavigation')
export class LeleAccountNavigation extends DeesElement {
  @state()
  accessor isGlobalAdmin: boolean = false;

  @state()
  accessor currentPath: string = window.location.pathname;

  constructor() {
    super();
  }

  private async navigateTo(path: string) {
    const subrouter = await this.getAccountRouter();
    subrouter.pushUrl(path);
    // Update state after navigation to trigger re-render
    this.currentPath = window.location.pathname;
  }

  private async navigateToOrgPage(page: string) {
    const currentState = states.accountState.getState();
    if (currentState.selectedOrg) {
      const path = page ? `/org/${currentState.selectedOrg.data.slug}/${page}` : `/org/${currentState.selectedOrg.data.slug}`;
      await this.navigateTo(path);
    } else {
      const targetPath = page ? `/org/:orgName/${page}` : '/org/:orgName';
      const description = page ? `Choose an organization to view its ${page}.` : 'Choose an organization to view its overview.';
      const result = await OrgSelectModal.show({
        targetPath,
        title: 'Select Organization',
        description,
      });
      if (result) {
        await this.navigateTo(result.path.replace('/account', ''));
      }
    }
  }

  public static styles = [
    cssManager.defaultStyles,
    accountDesignTokens,
    css`
      :host {
        display: flex;
        flex-direction: column;
        background: var(--card);
        border-right: 1px solid var(--border);
        height: 100%;
      }
      :host([hidden]) {
        display: none;
      }

      .logoArea {
        padding: 20px 16px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }

      .logo {
        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
        letter-spacing: -0.02em;
        font-size: 20px;
        font-weight: 600;
        color: var(--foreground);
        cursor: pointer;
        transition: opacity 0.15s ease;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .logo:hover {
        opacity: 0.8;
      }

      .logo dees-icon {
        font-size: 24px;
        opacity: 0.9;
      }

      .navContent {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 16px;
      }

      .commitinfo {
        flex-shrink: 0;
        text-align: center;
        font-family: 'Geist Mono', monospace;
        font-size: 10px;
        padding: 12px 16px;
        border-top: 1px solid var(--border);
        color: var(--muted-foreground);
        opacity: 0.6;
        background: var(--card);
      }

      .navigationGroupLabel {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted-foreground);
        padding: 20px 16px 8px;
        opacity: 0.7;
      }

      .navigationGroupLabel:first-of-type {
        padding-top: 16px;
      }

      .navigationOption {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        margin: 2px 8px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--muted-foreground);
        transition: all 0.15s ease;
        cursor: pointer;
      }

      .navigationOption:hover {
        background: var(--muted);
        color: var(--foreground);
      }

      .navigationOption dees-icon {
        font-size: 16px;
        opacity: 0.7;
        flex-shrink: 0;
      }

      .navigationOption:hover dees-icon {
        opacity: 1;
      }

      .navigationOption.active {
        background: var(--muted);
        color: var(--foreground);
      }

      .navigationOption.active dees-icon {
        opacity: 1;
      }

      .divider {
        height: 1px;
        background: var(--border);
        margin: 8px 16px;
      }

      dees-input-dropdown {
        margin: 8px;
      }
    `,
  ];

  public async getAccountRouter() {
    const host = (this.getRootNode() as any).host;
    return (host as any).subrouter;
  }

  public render(): TemplateResult {
    return html`
      <div class="logoArea">
        <div class="logo">
          <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
          idp.global
        </div>
      </div>

      <div class="navContent">
        <div class="navigationGroupLabel">Account</div>
        <div
          class="navigationOption ${this.isActive('') ? 'active' : ''}"
          @click=${() => this.navigateTo('')}
        >
          <dees-icon .icon=${'lucide:home'}></dees-icon>
          Overview
        </div>
        <div
          class="navigationOption"
          @click=${async () => {

          }}
        >
          <dees-icon .icon=${'lucide:shield'}></dees-icon>
          Manage Roles
        </div>
        <div
          class="navigationOption"
          @click=${async () => {
            const idpState = await IdpState.getSingletonInstance();
            idpState.domtools.router.pushUrl('/logout');
          }}
        >
          <dees-icon .icon=${'lucide:power'}></dees-icon>
          Log Out
        </div>

        <div class="divider"></div>

        <div class="navigationGroupLabel">Organization</div>
        <dees-input-dropdown
          .label=${'Select organization'}
          @selectedOption=${async (eventArg: CustomEvent) => {
            // Handle "Create new..." option
            if (eventArg.detail.key === '__create_new__') {
              const org = await CreateOrgModal.show();
              if (org) {
                await this.navigateTo(`/org/${org.data.slug}/billing`);
              }
              return;
            }
            const currentState = states.accountState.getState();
            const newOrg = currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload);
            states.accountState.dispatchAction(states.setSelectedOrg, newOrg);

            // Auto-navigate to new org's current page type (reactivity)
            const currentPath = window.location.pathname;
            if (currentPath.includes('/org/') && newOrg) {
              // Extract the page type (apps, billing, etc.) and navigate to new org
              const pathParts = currentPath.split('/');
              const pageType = pathParts[5]; // /account/org/:orgName/:pageType
              if (pageType) {
                await this.navigateTo(`/org/${newOrg.data.slug}/${pageType}`);
              } else {
                await this.navigateTo(`/org/${newOrg.data.slug}`);
              }
            }
          }}
        ></dees-input-dropdown>

        <div
          class="navigationOption ${this.isActive('org-overview') ? 'active' : ''}"
          @click=${() => this.navigateToOrgPage('')}
        >
          <dees-icon .icon=${'lucide:home'}></dees-icon>
          Overview
        </div>
        <div
          class="navigationOption ${this.isActive('apps') ? 'active' : ''}"
          @click=${() => this.navigateToOrgPage('apps')}
        >
          <dees-icon .icon=${'lucide:box'}></dees-icon>
          Apps
        </div>
        <div
          class="navigationOption ${this.isActive('users') ? 'active' : ''}"
          @click=${() => this.navigateToOrgPage('users')}
        >
          <dees-icon .icon=${'lucide:users'}></dees-icon>
          Users
        </div>
        <div
          class="navigationOption"
          @click=${async () => {}}
        >
          <dees-icon .icon=${'lucide:activity'}></dees-icon>
          Activity
        </div>
        <div
          class="navigationOption ${this.isActive('billing') ? 'active' : ''}"
          @click=${() => this.navigateToOrgPage('billing')}
        >
          <dees-icon .icon=${'lucide:wallet'}></dees-icon>
          Billing
        </div>

        ${this.renderAdminLink()}
      </div>

      <div class="commitinfo">v${commitinfo.version}</div>
    `;
  }

  private renderAdminLink(): TemplateResult | null {
    if (!this.isGlobalAdmin) {
      return null;
    }
    return html`
      <div class="divider"></div>
      <div class="navigationGroupLabel">Platform</div>
      <div
        class="navigationOption ${this.isActive('admin') ? 'active' : ''}"
        @click=${() => this.navigateTo('/admin')}
      >
        <dees-icon .icon=${'lucide:shield'}></dees-icon>
        Global Admin
      </div>
    `;
  }

  private isActive(page: string): boolean {
    const path = this.currentPath;
    if (page === '') {
      // Account overview - exact match
      return path === '/account' || path === '/account/';
    }
    if (page === 'org-overview') {
      // Org overview - /account/org/:slug without trailing page type
      return /^\/account\/org\/[^\/]+\/?$/.test(path);
    }
    // For other pages, check if the path contains the page segment
    return path.includes(`/${page}`);
  }

  public async firstUpdated() {
    // Listen for popstate (browser back/forward)
    window.addEventListener('popstate', () => {
      this.currentPath = window.location.pathname;
    });

    // Watch for URL changes from external navigation (e.g., modals)
    let lastPath = this.currentPath;
    const checkPath = () => {
      if (window.location.pathname !== lastPath) {
        lastPath = window.location.pathname;
        this.currentPath = lastPath;
      }
      requestAnimationFrame(checkPath);
    };
    requestAnimationFrame(checkPath);

    const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
    const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
      if (!orgArg) {
        return null;
      }
      return {
        option: orgArg.data.name,
        key: orgArg.data.slug,
        payload: orgArg.data.slug,
      };
    };

    // "Create new..." option to add at the end
    const createNewOption = {
      option: '+ Create new...',
      key: '__create_new__',
      payload: '__create_new__',
    };

    states.accountState
      .select((stateArg) => stateArg.organizations)
      .pipe(
        plugins.deesDomtools.plugins.smartrx.rxjs.ops.map((orgArrayArg) => {
          const orgEntries = orgArrayArg.map(orgToMenuEntry);
          // Add "Create new..." at the end
          return [...orgEntries, createNewOption];
        })
      )
      .subscribe((menuEntries) => {
        deesInputDropdown.options = menuEntries;
      });
    states.accountState
      .select((stateArg) => stateArg.selectedOrg)
      .pipe(plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgToMenuEntry))
      .subscribe((selectedOrgArg) => {
        deesInputDropdown.selectedOption = selectedOrgArg;
      });

    // Check if user is global admin
    states.accountState
      .select((stateArg) => stateArg.user)
      .subscribe((user) => {
        this.isGlobalAdmin = user?.data?.isGlobalAdmin ?? false;
      });
  }
}