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

// View lifecycle interfaces (defined locally as they're not exported from dees-catalog)
interface IViewActivationContext {
  appui: DeesAppuiBase;
  viewId: string;
  params?: Record<string, string>;
}

interface IViewLifecycle {
  onActivate?: (context: IViewActivationContext) => void | Promise<void>;
  onDeactivate?: () => void | Promise<void>;
}
import { adminState } from '../../services/admin-state.js';
import '../../elements/upladmin-dashboard/upladmin-dashboard.js';

@customElement('upladmin-dashboard-view')
export class UpladminDashboardView extends DeesElement implements IViewLifecycle {
  @state()
  accessor loading: boolean = true;

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

  async onActivate(context: IViewActivationContext): Promise<void> {
    // Dashboard has no secondary menu - clear any existing
    context.appui.clearSecondaryMenu();

    // No content tabs for dashboard
    context.appui.setContentTabs([]);

    // Load data
    this.loading = false;
  }

  render() {
    return html`
      <upladmin-dashboard
        .monitors=${adminState.monitors}
        .incidents=${adminState.incidents}
        .loading=${this.loading}
      ></upladmin-dashboard>
    `;
  }
}