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-managedsecrets')
export class GitopsViewManagedSecrets extends DeesElement {
  @state()
  accessor managedSecretsState: appstate.IManagedSecretsState = { managedSecrets: [] };

  @state()
  accessor connectionsState: appstate.IConnectionsState = {
    connections: [],
    activeConnectionId: null,
  };

  @state()
  accessor dataState: appstate.IDataState = {
    projects: [],
    groups: [],
    secrets: [],
    pipelines: [],
    pipelineJobs: [],
    currentJobLog: '',
  };

  private _autoRefreshHandler: () => void;

  constructor() {
    super();
    const msSub = appstate.managedSecretsStatePart
      .select((s) => s)
      .subscribe((s) => { this.managedSecretsState = s; });
    this.rxSubscriptions.push(msSub);

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

    const dataSub = appstate.dataStatePart
      .select((s) => s)
      .subscribe((s) => { this.dataState = s; });
    this.rxSubscriptions.push(dataSub);

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

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

  public static styles = [
    cssManager.defaultStyles,
    viewHostCss,
    css`
      .target-list {
        margin: 8px 0;
      }
      .target-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 10px;
        margin: 4px 0;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        color: #ccc;
        font-size: 13px;
      }
      .target-item .remove-btn {
        cursor: pointer;
        color: #e74c3c;
        font-size: 16px;
        padding: 0 4px;
      }
      .status-ok { color: #2ecc71; }
      .status-error { color: #e74c3c; }
      .status-pending { color: #f39c12; }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="view-title">Managed Secrets</div>
      <div class="view-description">Centrally managed secrets pushed as GITOPS_{key} to configured targets</div>
      <div class="toolbar">
        <dees-button @click=${() => this.addManagedSecret()}>Add Managed Secret</dees-button>
        <dees-button @click=${() => this.pushAll()}>Push All</dees-button>
        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
      </div>
      <dees-table
        .heading1=${'Managed Secrets'}
        .heading2=${'Define once, push to many targets'}
        .data=${this.managedSecretsState.managedSecrets}
        .displayFunction=${(item: any) => ({
          Key: item.key,
          'On Target': 'GITOPS_' + item.key,
          Description: item.description || '-',
          Targets: String(item.targets.length),
          Status: this.summarizeStatus(item.targetStatuses),
          'Last Pushed': item.lastPushedAt ? new Date(item.lastPushedAt).toLocaleString() : 'Never',
        })}
        .dataActions=${[
          {
            name: 'Edit',
            iconName: 'lucide:edit',
            type: ['inRow', 'contextmenu'],
            actionFunc: async ({ item }: any) => { await this.editManagedSecret(item); },
          },
          {
            name: 'Push',
            iconName: 'lucide:upload',
            type: ['inRow', 'contextmenu'],
            actionFunc: async ({ item }: any) => { await this.pushOne(item); },
          },
          {
            name: 'View Targets',
            iconName: 'lucide:list',
            type: ['inRow', 'contextmenu'],
            actionFunc: async ({ item }: any) => { await this.viewTargets(item); },
          },
          {
            name: 'Delete',
            iconName: 'lucide:trash2',
            type: ['inRow', 'contextmenu'],
            actionFunc: async ({ item }: any) => { await this.deleteManagedSecret(item); },
          },
        ]}
      ></dees-table>
    `;
  }

  async firstUpdated() {
    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
    await appstate.managedSecretsStatePart.dispatchAction(appstate.fetchManagedSecretsAction, null);
  }

  private summarizeStatus(statuses: any[]): string {
    if (!statuses || statuses.length === 0) return 'Not pushed';
    const ok = statuses.filter((s: any) => s.status === 'success').length;
    const err = statuses.filter((s: any) => s.status === 'error').length;
    if (err === 0) return `All OK (${ok})`;
    return `${ok} OK / ${err} Failed`;
  }

  private async refresh() {
    await appstate.managedSecretsStatePart.dispatchAction(appstate.fetchManagedSecretsAction, null);
  }

  private async pushAll() {
    await appstate.managedSecretsStatePart.dispatchAction(appstate.pushAllManagedSecretsAction, null);
  }

  private async pushOne(item: any) {
    await appstate.managedSecretsStatePart.dispatchAction(appstate.pushManagedSecretAction, {
      managedSecretId: item.id,
    });
  }

  private async deleteManagedSecret(item: any) {
    await plugins.deesCatalog.DeesModal.createAndShow({
      heading: 'Delete Managed Secret',
      content: html`<p style="color: #fff;">Are you sure you want to delete managed secret "${item.key}"?<br>This will also remove GITOPS_${item.key} from all ${item.targets.length} target(s).</p>`,
      menuOptions: [
        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
        {
          name: 'Delete',
          action: async (modal: any) => {
            await appstate.managedSecretsStatePart.dispatchAction(appstate.deleteManagedSecretAction, {
              managedSecretId: item.id,
            });
            modal.destroy();
          },
        },
      ],
    });
  }

  private async viewTargets(item: any) {
    const targetRows = (item.targetStatuses && item.targetStatuses.length > 0)
      ? item.targetStatuses
      : item.targets.map((t: any) => ({ ...t, status: 'pending' }));

    const statusIcon = (status: string) => {
      if (status === 'success') return html`<span class="status-ok">OK</span>`;
      if (status === 'error') return html`<span class="status-error">Error</span>`;
      return html`<span class="status-pending">Pending</span>`;
    };

    await plugins.deesCatalog.DeesModal.createAndShow({
      heading: `Targets for ${item.key}`,
      content: html`
        <div style="color: #ccc; min-width: 400px;">
          ${targetRows.map((t: any) => html`
            <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">
              <div>
                <div style="font-weight: bold;">${t.scopeName || t.scopeId}</div>
                <div style="font-size: 12px; opacity: 0.7;">${t.scope} on ${this.getConnectionName(t.connectionId)}</div>
                ${t.error ? html`<div style="font-size: 12px; color: #e74c3c; margin-top: 4px;">${t.error}</div>` : ''}
              </div>
              <div>${statusIcon(t.status)}</div>
            </div>
          `)}
          ${targetRows.length === 0 ? html`<p>No targets configured.</p>` : ''}
        </div>
      `,
      menuOptions: [
        { name: 'Close', action: async (modal: any) => { modal.destroy(); } },
      ],
    });
  }

  private getConnectionName(connectionId: string): string {
    const conn = this.connectionsState.connections.find((c) => c.id === connectionId);
    return conn ? conn.name : connectionId;
  }

  private async addManagedSecret() {
    // Load entities for all connections
    const connections = this.connectionsState.connections;
    let targets: any[] = [];
    let selectedConnId = connections.length > 0 ? connections[0].id : '';
    let selectedScope: 'project' | 'group' = 'project';

    // Pre-load entities for first connection
    if (selectedConnId) {
      await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
        connectionId: selectedConnId,
      });
    }

    const buildTargetListHtml = () => {
      if (targets.length === 0) return html`<p style="color: #888; font-size: 13px;">No targets added yet.</p>`;
      return html`${targets.map((t, i) => html`
        <div class="target-item">
          <span>${t.scopeName} (${t.scope}) on ${this.getConnectionName(t.connectionId)}</span>
          <span class="remove-btn" @click=${() => { targets.splice(i, 1); this.requestUpdate(); }}>x</span>
        </div>
      `)}`;
    };

    await plugins.deesCatalog.DeesModal.createAndShow({
      heading: 'Add Managed Secret',
      content: html`
        <style>
          .form-row { margin-bottom: 16px; }
          .target-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
          .add-target-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
        </style>
        <div class="form-row">
          <dees-input-text .label=${'Key'} .key=${'key'} .description=${'Will be stored as GITOPS_{key} on targets'}></dees-input-text>
        </div>
        <div class="form-row">
          <dees-input-text .label=${'Value'} .key=${'value'} type="password"></dees-input-text>
        </div>
        <div class="form-row">
          <dees-input-text .label=${'Description'} .key=${'description'}></dees-input-text>
        </div>
        <div class="target-section">
          <div style="color: #fff; font-weight: bold; margin-bottom: 8px;">Targets</div>
          <div class="add-target-row">
            <dees-input-dropdown
              .label=${'Connection'}
              .key=${'targetConn'}
              .options=${connections.map((c) => ({ option: c.name, key: c.id }))}
              .selectedOption=${connections.length > 0 ? { option: connections[0].name, key: connections[0].id } : undefined}
              @selectedOption=${async (e: CustomEvent) => {
                selectedConnId = e.detail.key;
                if (selectedScope === 'project') {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
                } else {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
                }
              }}
            ></dees-input-dropdown>
            <dees-input-dropdown
              .label=${'Scope'}
              .key=${'targetScope'}
              .options=${[{ option: 'Project', key: 'project' }, { option: 'Group', key: 'group' }]}
              .selectedOption=${{ option: 'Project', key: 'project' }}
              @selectedOption=${async (e: CustomEvent) => {
                selectedScope = e.detail.key as 'project' | 'group';
                if (selectedScope === 'project') {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
                } else {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
                }
              }}
            ></dees-input-dropdown>
            <dees-input-dropdown
              .label=${'Entity'}
              .key=${'targetEntity'}
              .options=${(() => {
                const data = appstate.dataStatePart.getState();
                const items = selectedScope === 'project' ? data.projects : data.groups;
                return items.map((item: any) => ({ option: item.fullPath || item.name, key: item.id }));
              })()}
            ></dees-input-dropdown>
            <dees-button @click=${() => {
              const data = appstate.dataStatePart.getState();
              const items = selectedScope === 'project' ? data.projects : data.groups;
              // Find entity dropdown value
              const modal = document.querySelector('dees-modal');
              if (!modal) return;
              const entityDropdowns = modal.shadowRoot?.querySelectorAll('dees-input-dropdown');
              let entityKey = '';
              let entityName = '';
              if (entityDropdowns) {
                for (const dd of entityDropdowns) {
                  if ((dd as any).key === 'targetEntity') {
                    const sel = (dd as any).selectedOption;
                    if (sel) {
                      entityKey = sel.key;
                      entityName = sel.option;
                    }
                  }
                }
              }
              if (!entityKey) return;
              // Avoid duplicates
              const exists = targets.some(
                (t) => t.connectionId === selectedConnId && t.scope === selectedScope && t.scopeId === entityKey,
              );
              if (exists) return;
              targets.push({
                connectionId: selectedConnId,
                scope: selectedScope,
                scopeId: entityKey,
                scopeName: entityName,
              });
            }}>Add Target</dees-button>
          </div>
          <div class="target-list" id="targetList">
            ${buildTargetListHtml()}
          </div>
        </div>
      `,
      menuOptions: [
        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
        {
          name: 'Create',
          action: async (modal: any) => {
            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text');
            const data: any = {};
            for (const input of inputs) { data[input.key] = input.value || ''; }
            if (!data.key) return;
            await appstate.managedSecretsStatePart.dispatchAction(appstate.createManagedSecretAction, {
              key: data.key,
              value: data.value,
              description: data.description || undefined,
              targets,
            });
            modal.destroy();
          },
        },
      ],
    });
  }

  private async editManagedSecret(item: any) {
    const connections = this.connectionsState.connections;
    let targets = [...item.targets];
    let selectedConnId = connections.length > 0 ? connections[0].id : '';
    let selectedScope: 'project' | 'group' = 'project';

    if (selectedConnId) {
      await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
        connectionId: selectedConnId,
      });
    }

    await plugins.deesCatalog.DeesModal.createAndShow({
      heading: `Edit: ${item.key}`,
      content: html`
        <style>
          .form-row { margin-bottom: 16px; }
          .target-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
          .add-target-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
        </style>
        <div class="form-row">
          <dees-input-text .label=${'Value (leave empty to keep current)'} .key=${'value'} type="password"></dees-input-text>
        </div>
        <div class="form-row">
          <dees-input-text .label=${'Description'} .key=${'description'} .value=${item.description || ''}></dees-input-text>
        </div>
        <div class="target-section">
          <div style="color: #fff; font-weight: bold; margin-bottom: 8px;">Targets</div>
          <div class="add-target-row">
            <dees-input-dropdown
              .label=${'Connection'}
              .key=${'targetConn'}
              .options=${connections.map((c) => ({ option: c.name, key: c.id }))}
              .selectedOption=${connections.length > 0 ? { option: connections[0].name, key: connections[0].id } : undefined}
              @selectedOption=${async (e: CustomEvent) => {
                selectedConnId = e.detail.key;
                if (selectedScope === 'project') {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
                } else {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
                }
              }}
            ></dees-input-dropdown>
            <dees-input-dropdown
              .label=${'Scope'}
              .key=${'targetScope'}
              .options=${[{ option: 'Project', key: 'project' }, { option: 'Group', key: 'group' }]}
              .selectedOption=${{ option: 'Project', key: 'project' }}
              @selectedOption=${async (e: CustomEvent) => {
                selectedScope = e.detail.key as 'project' | 'group';
                if (selectedScope === 'project') {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
                } else {
                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
                }
              }}
            ></dees-input-dropdown>
            <dees-input-dropdown
              .label=${'Entity'}
              .key=${'targetEntity'}
              .options=${(() => {
                const data = appstate.dataStatePart.getState();
                const items = selectedScope === 'project' ? data.projects : data.groups;
                return items.map((item: any) => ({ option: item.fullPath || item.name, key: item.id }));
              })()}
            ></dees-input-dropdown>
            <dees-button @click=${() => {
              const modal = document.querySelector('dees-modal');
              if (!modal) return;
              const entityDropdowns = modal.shadowRoot?.querySelectorAll('dees-input-dropdown');
              let entityKey = '';
              let entityName = '';
              if (entityDropdowns) {
                for (const dd of entityDropdowns) {
                  if ((dd as any).key === 'targetEntity') {
                    const sel = (dd as any).selectedOption;
                    if (sel) {
                      entityKey = sel.key;
                      entityName = sel.option;
                    }
                  }
                }
              }
              if (!entityKey) return;
              const exists = targets.some(
                (t: any) => t.connectionId === selectedConnId && t.scope === selectedScope && t.scopeId === entityKey,
              );
              if (exists) return;
              targets.push({
                connectionId: selectedConnId,
                scope: selectedScope,
                scopeId: entityKey,
                scopeName: entityName,
              });
            }}>Add Target</dees-button>
          </div>
          <div class="target-list">
            ${targets.length === 0
              ? html`<p style="color: #888; font-size: 13px;">No targets.</p>`
              : targets.map((t: any, i: number) => html`
                <div class="target-item">
                  <span>${t.scopeName} (${t.scope}) on ${this.getConnectionName(t.connectionId)}</span>
                  <span class="remove-btn" @click=${() => { targets.splice(i, 1); }}>x</span>
                </div>
              `)}
          </div>
        </div>
      `,
      menuOptions: [
        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
        {
          name: 'Update',
          action: async (modal: any) => {
            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text');
            const data: any = {};
            for (const input of inputs) { data[input.key] = input.value || ''; }
            const updatePayload: any = {
              managedSecretId: item.id,
              targets,
              description: data.description || undefined,
            };
            if (data.value) {
              updatePayload.value = data.value;
            }
            await appstate.managedSecretsStatePart.dispatchAction(appstate.updateManagedSecretAction, updatePayload);
            modal.destroy();
          },
        },
      ],
    });
  }
}