import * as appstate from '../appstate.js';
import * as shared from './shared/index.js';
import {
  css,
  cssManager,
  customElement,
  DeesElement,
  html,
  state,
  type TemplateResult,
} from '@design.estate/dees-element';

@customElement('sg-view-organizations')
export class SgViewOrganizations extends DeesElement {
  @state()
  accessor organizationsState: appstate.IOrganizationsState = {
    organizations: [],
    currentOrg: null,
    repositories: [],
    members: [],
  };

  @state()
  accessor uiState: appstate.IUiState = { activeView: 'organizations' };

  constructor() {
    super();
    const orgSub = appstate.organizationsStatePart
      .select((s) => s)
      .subscribe((s) => {
        this.organizationsState = s;
      });
    this.rxSubscriptions.push(orgSub);

    const uiSub = appstate.uiStatePart
      .select((s) => s)
      .subscribe((s) => {
        this.uiState = s;
      });
    this.rxSubscriptions.push(uiSub);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
  ];

  async connectedCallback() {
    super.connectedCallback();
    await appstate.organizationsStatePart.dispatchAction(appstate.fetchOrganizationsAction, null);
    // If there's an entity ID, load the detail
    if (this.uiState.activeEntityId) {
      await this.loadOrgDetail(this.uiState.activeEntityId);
    }
  }

  private async loadOrgDetail(orgId: string) {
    await appstate.organizationsStatePart.dispatchAction(
      appstate.fetchOrganizationAction,
      { organizationId: orgId },
    );
    await appstate.organizationsStatePart.dispatchAction(
      appstate.fetchRepositoriesAction,
      { organizationId: orgId },
    );
    await appstate.organizationsStatePart.dispatchAction(
      appstate.fetchMembersAction,
      { organizationId: orgId },
    );
  }

  public render(): TemplateResult {
    if (this.uiState.activeEntityId && this.organizationsState.currentOrg) {
      return html`
        <sg-organization-detail-view
          .organization="${this.organizationsState.currentOrg}"
          .repositories="${this.organizationsState.repositories}"
          .members="${this.organizationsState.members}"
          @back="${() => this.goBack()}"
          @select-repo="${(e: CustomEvent) => this.selectRepo(e.detail.repositoryId)}"
          @create-repo="${() => {/* TODO: create repo modal */}}"
        ></sg-organization-detail-view>
      `;
    }

    return html`
      <sg-organizations-list-view
        .organizations="${this.organizationsState.organizations}"
        @select="${(e: CustomEvent) => this.selectOrg(e.detail.organizationId)}"
        @create="${(e: CustomEvent) => this.createOrg(e.detail)}"
      ></sg-organizations-list-view>
    `;
  }

  private selectOrg(orgId: string) {
    appstate.uiStatePart.setState({
      ...appstate.uiStatePart.getState(),
      activeEntityId: orgId,
    });
    this.loadOrgDetail(orgId);
  }

  private selectRepo(repoId: string) {
    // Navigate to repository within org context
    // For now, we could switch to packages view
  }

  private goBack() {
    appstate.uiStatePart.setState({
      ...appstate.uiStatePart.getState(),
      activeEntityId: undefined,
    });
    appstate.organizationsStatePart.setState({
      ...appstate.organizationsStatePart.getState(),
      currentOrg: null,
      repositories: [],
      members: [],
    });
  }

  private async createOrg(data: { name: string; displayName?: string; description?: string }) {
    await appstate.organizationsStatePart.dispatchAction(
      appstate.createOrganizationAction,
      data,
    );
  }
}