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-dashboard': SzDemoViewDashboard;
  }
}

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

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

    // Dashboard secondary menu with quick actions
    this.appui.setSecondaryMenu({
      heading: 'Dashboard',
      groups: [
        {
          name: 'Quick Actions',
          items: [
            { type: 'action', key: 'Deploy Service', iconName: 'lucide:Rocket', action: () => { console.log('Deploy service'); } },
            { type: 'action', key: 'Add Domain', iconName: 'lucide:Globe', action: () => { console.log('Add domain'); } },
            { type: 'action', key: 'Create Token', iconName: 'lucide:Key', action: () => { console.log('Create token'); } },
          ],
        },
        {
          name: 'System',
          items: [
            { type: 'action', key: 'Refresh Stats', iconName: 'lucide:RefreshCw', action: () => { console.log('Refresh'); } },
            { type: 'action', key: 'View Logs', iconName: 'lucide:Terminal', action: () => { console.log('View logs'); } },
          ],
        },
      ],
    });
  }

  onDeactivate() {
    // Cleanup if needed
  }
  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">Dashboard</h1>
        <p class="page-subtitle">Overview of your onebox infrastructure</p>
      </div>

      <sz-dashboard-view
        .clusterStats=${{
          totalServices: 12,
          running: 9,
          stopped: 3,
          dockerStatus: 'running',
        }}
        .resourceUsage=${{
          cpu: 45,
          memoryUsed: '6.2 GB',
          memoryTotal: '16 GB',
          networkIn: '2.5 MB/s',
          networkOut: '1.2 MB/s',
          topConsumers: [
            { name: 'mongodb', memory: '1.2 GB' },
            { name: 'clickhouse', memory: '980 MB' },
            { name: 'nginx-proxy', memory: '256 MB' },
          ],
        }}
        .platformServices=${[
          { name: 'MongoDB', status: 'running', icon: 'database' },
          { name: 'S3 Storage', status: 'running', icon: 'storage' },
          { name: 'ClickHouse', status: 'stopped', icon: 'analytics' },
          { name: 'Redis Cache', status: 'running', icon: 'cache' },
        ]}
        .traffic=${{
          requests: 15420,
          errors: 23,
          errorPercent: 0.15,
          avgResponse: 145,
          reqPerMin: 856,
          status2xx: 14850,
          status3xx: 320,
          status4xx: 227,
          status5xx: 23,
        }}
        .proxy=${{
          httpPort: '80',
          httpsPort: '443',
          httpActive: true,
          httpsActive: true,
          routeCount: '24',
        }}
        .certificates=${{
          valid: 18,
          expiring: 2,
          expired: 0,
        }}
        .dns=${{
          records: 45,
          zones: 8,
          pendingChanges: 0,
        }}
        .ssl=${{
          activeCerts: 20,
          autoRenew: true,
          provider: "Let's Encrypt",
        }}
        @quick-action=${(e: CustomEvent) => console.log('Quick action:', e.detail)}
      ></sz-dashboard-view>
    `;
  }
}