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

import './sz-resource-usage-card.js';
import './sz-platform-services-card.js';

import type { IResourceUsage } from './sz-resource-usage-card.js';
import type { IPlatformService } from './sz-platform-services-card.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-status-grid-services': SzStatusGridServices;
  }
}

@customElement('sz-status-grid-services')
export class SzStatusGridServices extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1200px;">
      <sz-status-grid-services
        .resourceUsage=${{
          cpu: { percentage: 45, label: 'CPU Usage' },
          memory: { percentage: 62, label: 'Memory', used: '4.96 GB', total: '8 GB' },
          network: { percentage: 23, label: 'Network I/O', rate: '1.2 MB/s' },
          topConsumers: [
            { name: 'api-service', cpu: 25, memory: 512 },
            { name: 'web-frontend', cpu: 15, memory: 256 },
            { name: 'worker', cpu: 5, memory: 128 },
          ],
        }}
        .platformServices=${[
          { name: 'MongoDB', status: 'running' },
          { name: 'S3 Storage', status: 'running' },
          { name: 'ClickHouse', status: 'stopped' },
          { name: 'Redis Cache', status: 'running' },
        ]}
      ></sz-status-grid-services>
    </div>
  `;

  @property({ type: Object })
  public accessor resourceUsage: IResourceUsage = {
    cpu: 0,
    memoryUsed: '0 GB',
    memoryTotal: '0 GB',
    networkIn: '0 MB/s',
    networkOut: '0 MB/s',
    topConsumers: [],
  };

  @property({ type: Array })
  public accessor platformServices: IPlatformService[] = [];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }

      .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
      }

      .grid > * {
        height: 100%;
      }

      @media (min-width: 768px) {
        .grid {
          grid-template-columns: 1fr 1fr;
        }
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="grid">
        <sz-resource-usage-card
          .usage=${this.resourceUsage}
        ></sz-resource-usage-card>
        <sz-platform-services-card
          .services=${this.platformServices}
        ></sz-platform-services-card>
      </div>
    `;
  }
}
