import * as plugins from '../../plugins.js';
import {
  html,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';

import { accountDesignTokens } from './sharedstyles.js';
import * as accountStateModule from '../../states/accountstate.js';

export interface IOrgSelectResult {
  org: plugins.idpInterfaces.data.IOrganization;
  path: string;
}

const modalStyles = css`
  .org-list {
    display: flex;
    flex-direction: column;
  }

  .org-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dees-color-line);
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .org-item:last-child {
    border-bottom: none;
  }

  .org-item:hover {
    background: var(--dees-color-softBackground);
  }

  .org-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--dees-color-softBackground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .org-item:hover .org-icon {
    background: var(--dees-color-line);
  }

  .org-icon dees-icon {
    opacity: 0.7;
  }

  .org-info {
    flex: 1;
    min-width: 0;
  }

  .org-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--dees-color-text);
  }

  .org-slug {
    font-size: 12px;
    color: var(--dees-color-muted);
  }

  .org-arrow {
    opacity: 0.5;
  }

  .empty-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--dees-color-muted);
  }

  .empty-state dees-icon {
    font-size: 40px;
    opacity: 0.5;
    margin-bottom: 12px;
  }

  .empty-state p {
    margin: 0 0 16px 0;
    font-size: 14px;
  }

  .description {
    color: var(--dees-color-muted);
    font-size: 14px;
    margin-bottom: 16px;
    padding: 0 20px;
  }
`;

export class OrgSelectModal {
  public static async show(options: {
    targetPath: string;
    title?: string;
    description?: string;
  }): Promise<IOrgSelectResult | null> {
    const title = options.title || 'Select Organization';
    const description = options.description || 'Choose an organization to continue.';

    // Load organizations from state
    const state = accountStateModule.accountState.getState();
    const organizations = state.organizations;

    return new Promise<IOrgSelectResult | null>((resolve) => {
      let modal: plugins.deesCatalog.DeesModal | null = null;
      let resolved = false;

      const handleSelectOrg = (org: plugins.idpInterfaces.data.IOrganization) => {
        if (resolved) return;
        resolved = true;

        accountStateModule.accountState.dispatchAction(accountStateModule.setSelectedOrg, org);
        const path = options.targetPath.replace(':orgName', org.data.slug);

        modal?.destroy();
        resolve({ org, path });
      };

      const handleCreateOrg = async () => {
        if (resolved) return;
        resolved = true;
        modal?.destroy();

        // Import dynamically to avoid circular dependency
        const { CreateOrgModal } = await import('./create-org-modal.js');
        const createdOrg = await CreateOrgModal.show();

        if (createdOrg) {
          const path = options.targetPath.replace(':orgName', createdOrg.data.slug);
          resolve({ org: createdOrg, path });
        } else {
          resolve(null);
        }
      };

      const renderOrgList = (): TemplateResult => {
        return html`
          <style>${modalStyles}</style>
          <div class="description">${description}</div>
          <div class="org-list">
            ${organizations.map((org) => html`
              <div class="org-item" @click=${() => handleSelectOrg(org)}>
                <div class="org-icon">
                  <dees-icon .icon=${'lucide:building2'}></dees-icon>
                </div>
                <div class="org-info">
                  <div class="org-name">${org.data.name}</div>
                  <div class="org-slug">${org.data.slug}</div>
                </div>
                <dees-icon class="org-arrow" .icon=${'lucide:chevron-right'}></dees-icon>
              </div>
            `)}
          </div>
        `;
      };

      const renderEmptyState = (): TemplateResult => {
        return html`
          <style>${modalStyles}</style>
          <div class="empty-state">
            <dees-icon .icon=${'lucide:building2'}></dees-icon>
            <p>You don't have any organizations yet.</p>
            <dees-button @clicked=${handleCreateOrg}>
              <dees-icon .icon=${'lucide:plus'} slot="iconLeft"></dees-icon>
              Create Organization
            </dees-button>
          </div>
        `;
      };

      const content = organizations.length === 0 ? renderEmptyState() : renderOrgList();

      plugins.deesCatalog.DeesModal.createAndShow({
        heading: title,
        content,
        menuOptions: [
          {
            name: 'Cancel',
            action: async (modalRef) => {
              if (!resolved) {
                resolved = true;
                resolve(null);
              }
              modalRef.destroy();
            },
          },
        ],
        width: 420,
      }).then((m) => {
        modal = m;
      });
    });
  }
}