import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { DeesAppui } from '@design.estate/dees-catalog';
import './index.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-demo-view-tokens': SzDemoViewTokens;
  }
}

@customElement('sz-demo-view-tokens')
export class SzDemoViewTokens extends DeesElement {
  private appui: DeesAppui | null = null;

  async onActivate(context: { appui: DeesAppui; viewId: string }) {
    this.appui = context.appui;

    // Tokens secondary menu
    this.appui.setSecondaryMenu({
      heading: 'Tokens',
      groups: [
        {
          name: 'Actions',
          items: [
            { type: 'action', key: 'Create Global Token', iconName: 'lucide:Plus', action: () => { console.log('Create global token'); } },
            { type: 'action', key: 'Create CI Token', iconName: 'lucide:GitBranch', action: () => { console.log('Create CI token'); } },
          ],
        },
        {
          name: 'Token Types',
          items: [
            { key: 'Global Tokens', iconName: 'lucide:Key', badge: '3', action: () => { console.log('Filter global'); } },
            { key: 'CI Tokens', iconName: 'lucide:Cpu', badge: '3', action: () => { console.log('Filter CI'); } },
          ],
        },
      ],
    });
  }

  onDeactivate() {
    // Cleanup if needed
  }
  private demoGlobalTokens = [
    { id: '1', name: 'CI/CD Pipeline', type: 'global' as const, createdAt: '2024-01-15', lastUsed: '2024-01-20' },
    { id: '2', name: 'Development', type: 'global' as const, createdAt: '2024-01-10' },
    { id: '3', name: 'Production Deploy', type: 'global' as const, createdAt: '2024-01-05', lastUsed: '2024-01-19' },
  ];

  private demoCiTokens = [
    { id: '4', name: 'api-gateway-ci', type: 'ci' as const, service: 'api-gateway', createdAt: '2024-01-18', lastUsed: '2024-01-20' },
    { id: '5', name: 'frontend-ci', type: 'ci' as const, service: 'frontend', createdAt: '2024-01-12', lastUsed: '2024-01-19' },
    { id: '6', name: 'worker-service-ci', type: 'ci' as const, service: 'worker-service', createdAt: '2024-01-08' },
  ];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        margin-bottom: 24px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin: 0;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="page-header">
        <h1 class="page-title">Tokens</h1>
        <p class="page-subtitle">Manage registry access tokens for CI/CD pipelines</p>
      </div>

      <sz-tokens-view
        .globalTokens=${this.demoGlobalTokens}
        .ciTokens=${this.demoCiTokens}
        @create=${(e: CustomEvent) => console.log('Create token:', e.detail)}
        @copy=${(e: CustomEvent) => console.log('Copy token:', e.detail)}
        @regenerate=${(e: CustomEvent) => console.log('Regenerate token:', e.detail)}
        @delete=${(e: CustomEvent) => console.log('Delete token:', e.detail)}
      ></sz-tokens-view>
    `;
  }
}