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

@customElement('gitops-view-connections')
export class GitopsViewConnections extends DeesElement {
  @state()
  accessor connectionsState: appstate.IConnectionsState = {
    connections: [],
    activeConnectionId: null,
  };

  private _autoRefreshHandler: () => void;

  constructor() {
    super();
    const sub = appstate.connectionsStatePart
      .select((s) => s)
      .subscribe((s) => { this.connectionsState = s; });
    this.rxSubscriptions.push(sub);

    this._autoRefreshHandler = () => this.handleAutoRefresh();
    document.addEventListener('gitops-auto-refresh', this._autoRefreshHandler);
  }

  public override disconnectedCallback() {
    super.disconnectedCallback();
    document.removeEventListener('gitops-auto-refresh', this._autoRefreshHandler);
  }

  private handleAutoRefresh(): void {
    this.refresh();
  }

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

  public render(): TemplateResult {
    return html`
      <div class="view-title">Connections</div>
      <div class="view-description">Manage your Gitea and GitLab provider connections</div>
      <div class="toolbar">
        <dees-button @click=${() => this.addConnection()}>Add Connection</dees-button>
        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
      </div>
      <dees-table
        .heading1=${'Provider Connections'}
        .heading2=${'Configure connections to Gitea and GitLab instances'}
        .data=${this.connectionsState.connections}
        .displayFunction=${(item: any) => ({
          Name: item.name,
          Type: item.providerType,
          URL: item.baseUrl,
          Status: item.status,
          Created: new Date(item.createdAt).toLocaleDateString(),
        })}
        .dataActions=${[
          {
            name: 'Test',
            iconName: 'lucide:plug',
            action: async (item: any) => {
              await appstate.connectionsStatePart.dispatchAction(
                appstate.testConnectionAction,
                { connectionId: item.id },
              );
            },
          },
          {
            name: 'Delete',
            iconName: 'lucide:trash2',
            action: async (item: any) => {
              const confirmed = await plugins.deesCatalog.DeesModal.createAndShow({
                heading: 'Delete Connection',
                content: html`<p style="color: #fff;">Are you sure you want to delete connection "${item.name}"?</p>`,
                menuOptions: [
                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
                  {
                    name: 'Delete',
                    action: async (modal: any) => {
                      await appstate.connectionsStatePart.dispatchAction(
                        appstate.deleteConnectionAction,
                        { connectionId: item.id },
                      );
                      modal.destroy();
                    },
                  },
                ],
              });
            },
          },
        ]}
      ></dees-table>
    `;
  }

  async firstUpdated() {
    await this.refresh();
  }

  private async refresh() {
    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
  }

  private async addConnection() {
    await plugins.deesCatalog.DeesModal.createAndShow({
      heading: 'Add Connection',
      content: html`
        <style>
          .form-row { margin-bottom: 16px; }
        </style>
        <div class="form-row">
          <dees-input-text .label=${'Name'} .key=${'name'}></dees-input-text>
        </div>
        <div class="form-row">
          <dees-input-dropdown
            .label=${'Provider Type'}
            .key=${'providerType'}
            .options=${[
              { option: 'gitea', key: 'gitea' },
              { option: 'gitlab', key: 'gitlab' },
            ]}
            .selectedOption=${{ option: 'gitea', key: 'gitea' }}
          ></dees-input-dropdown>
        </div>
        <div class="form-row">
          <dees-input-text .label=${'Base URL'} .key=${'baseUrl'}></dees-input-text>
        </div>
        <div class="form-row">
          <dees-input-text .label=${'API Token'} .key=${'token'} type="password"></dees-input-text>
        </div>
      `,
      menuOptions: [
        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
        {
          name: 'Add',
          action: async (modal: any) => {
            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text, dees-input-dropdown');
            const data: any = {};
            for (const input of inputs) {
              if (input.key === 'providerType') {
                data[input.key] = input.selectedOption?.key || 'gitea';
              } else {
                data[input.key] = input.value || '';
              }
            }
            await appstate.connectionsStatePart.dispatchAction(
              appstate.createConnectionAction,
              {
                name: data.name,
                providerType: data.providerType,
                baseUrl: data.baseUrl,
                token: data.token,
              },
            );
            modal.destroy();
          },
        },
      ],
    });
  }
}