import { html, cssManager } from "@design.estate/dees-element";
import type { IServiceStatus, IIncidentDetails } from '../interfaces/index.js';
import '../elements/index.js';

export const adminpageDashboard = () => html`
  <style>
    .demo-page-wrapper {
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
      padding: 24px;
    }
  </style>

  <div class="demo-page-wrapper">
    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const dashboard = wrapperElement.querySelector('upladmin-dashboard') as any;

      // Demo monitors
      const monitors: IServiceStatus[] = [
        {
          id: 'api-server',
          name: 'api-server',
          displayName: 'API Server',
          description: 'Main REST API endpoint',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.98,
          uptime90d: 99.95,
          responseTime: 45,
          category: 'Core Services',
        },
        {
          id: 'web-app',
          name: 'web-app',
          displayName: 'Web Application',
          description: 'Customer-facing web application',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.99,
          uptime90d: 99.97,
          responseTime: 120,
          category: 'Core Services',
        },
        {
          id: 'database-primary',
          name: 'database-primary',
          displayName: 'Primary Database',
          description: 'PostgreSQL primary node',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.999,
          uptime90d: 99.998,
          responseTime: 5,
          category: 'Infrastructure',
        },
        {
          id: 'cdn',
          name: 'cdn',
          displayName: 'Content Delivery Network',
          description: 'Global CDN for static assets',
          currentStatus: 'degraded',
          lastChecked: Date.now(),
          uptime30d: 99.5,
          uptime90d: 99.8,
          responseTime: 200,
          category: 'Infrastructure',
        },
        {
          id: 'email-service',
          name: 'email-service',
          displayName: 'Email Service',
          description: 'Transactional email delivery',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.9,
          uptime90d: 99.85,
          responseTime: 500,
          category: 'External Services',
        },
        {
          id: 'payment-gateway',
          name: 'payment-gateway',
          displayName: 'Payment Gateway',
          description: 'Payment processing integration',
          currentStatus: 'maintenance',
          lastChecked: Date.now(),
          uptime30d: 99.95,
          uptime90d: 99.9,
          responseTime: 350,
          category: 'External Services',
        },
      ];

      // Demo incidents
      const incidents: IIncidentDetails[] = [
        {
          id: 'inc-001',
          title: 'CDN Performance Degradation',
          status: 'monitoring',
          severity: 'minor',
          affectedServices: ['cdn'],
          startTime: Date.now() - 2 * 60 * 60 * 1000,
          impact: 'Some users may experience slower loading times for images and static assets.',
          updates: [
            {
              id: 'upd-001',
              timestamp: Date.now() - 2 * 60 * 60 * 1000,
              status: 'investigating',
              message: 'We are investigating reports of slow asset loading.',
              author: 'Platform Team',
            },
            {
              id: 'upd-002',
              timestamp: Date.now() - 1 * 60 * 60 * 1000,
              status: 'identified',
              message: 'We have identified the issue as a problem with one of our CDN edge nodes.',
              author: 'Platform Team',
            },
            {
              id: 'upd-003',
              timestamp: Date.now() - 30 * 60 * 1000,
              status: 'monitoring',
              message: 'Traffic has been rerouted to healthy nodes. Monitoring for stability.',
              author: 'Platform Team',
            },
          ],
        },
        {
          id: 'inc-002',
          title: 'Payment Gateway Scheduled Maintenance',
          status: 'investigating',
          severity: 'maintenance',
          affectedServices: ['payment-gateway'],
          startTime: Date.now() - 30 * 60 * 1000,
          impact: 'Payment processing is temporarily unavailable during the maintenance window.',
          updates: [
            {
              id: 'upd-004',
              timestamp: Date.now() - 30 * 60 * 1000,
              status: 'investigating',
              message: 'Scheduled maintenance has begun. Expected duration: 2 hours.',
              author: 'DevOps Team',
            },
          ],
        },
      ];

      dashboard.monitors = monitors;
      dashboard.incidents = incidents;
    }}
    >
      <upladmin-dashboard></upladmin-dashboard>
    </dees-demowrapper>
  </div>
`;