import * as shared from '../elements/shared/index.js';

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

import * as appstate from '../appstate.js';

@customElement('cloudly-view-overview')
export class CloudlyViewOverview extends DeesElement {
  @state()
  private data: appstate.IDataState = {
    secretGroups: [],
    secretBundles: [],
  };

  constructor() {
    super();
    const subecription = appstate.dataState
      .select((stateArg) => stateArg)
      .subscribe((dataArg) => {
        this.data = dataArg;
      });
    this.rxSubscriptions.push(subecription);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
    css`
      dees-statsgrid {
        margin-top: 24px;
      }
    `,
  ];

  public render() {
    // Calculate total servers across all clusters
    const totalServers = this.data.clusters?.reduce((sum, cluster) => 
      sum + (cluster.data.servers?.length || 0), 0) || 0;

    // Create tiles for the stats grid
    const statsTiles = [
      {
        id: 'clusters',
        title: 'Total Clusters',
        value: this.data.clusters?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Network',
        description: 'Active clusters'
      },
      {
        id: 'servers',
        title: 'Total Servers',
        value: totalServers,
        type: 'number' as const,
        iconName: 'lucide:Server',
        description: 'Connected servers'
      },
      {
        id: 'services',
        title: 'Services',
        value: this.data.services?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Layers',
        description: 'Deployed services'
      },
      {
        id: 'deployments',
        title: 'Deployments',
        value: this.data.deployments?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Rocket',
        description: 'Active deployments'
      },
      {
        id: 'secretGroups',
        title: 'Secret Groups',
        value: this.data.secretGroups?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:ShieldCheck',
        description: 'Configured secret groups'
      },
      {
        id: 'secretBundles',
        title: 'Secret Bundles',
        value: this.data.secretBundles?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:LockKeyhole',
        description: 'Available secret bundles'
      },
      {
        id: 'images',
        title: 'Images',
        value: this.data.images?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Image',
        description: 'Container images'
      },
      {
        id: 'dns',
        title: 'DNS Zones',
        value: this.data.dns?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Globe',
        description: 'Managed DNS zones'
      },
      {
        id: 'databases',
        title: 'Databases',
        value: this.data.dbs?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Database',
        description: 'Database instances'
      },
      {
        id: 'backups',
        title: 'Backups',
        value: this.data.backups?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Save',
        description: 'Available backups'
      },
      {
        id: 'mails',
        title: 'Mail Domains',
        value: this.data.mails?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Mail',
        description: 'Mail configurations'
      },
      {
        id: 's3',
        title: 'S3 Buckets',
        value: this.data.s3?.length || 0,
        type: 'number' as const,
        iconName: 'lucide:Cloud',
        description: 'Storage buckets'
      }
    ];

    return html`
      <cloudly-sectionheading>Overview</cloudly-sectionheading>
      <dees-statsgrid
        .tiles=${statsTiles}
        .minTileWidth=${250}
        .gap=${16}
      ></dees-statsgrid>
    `;
  }
}