import { html, css, cssManager } from '@design.estate/dees-element';
import type { IServiceStatus } from '../../interfaces/index.js';
import './upladmin-monitor-list.js';

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

  <div class="demo-container">
    <upladmin-monitor-list
      .monitors=${[
        {
          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: 'redis-cache',
          name: 'redis-cache',
          displayName: 'Redis Cache',
          description: 'In-memory caching layer',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.99,
          uptime90d: 99.98,
          responseTime: 2,
          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',
        },
        {
          id: 'search-engine',
          name: 'search-engine',
          displayName: 'Search Engine',
          description: 'Elasticsearch cluster',
          currentStatus: 'partial_outage',
          lastChecked: Date.now(),
          uptime30d: 98.5,
          uptime90d: 99.2,
          responseTime: 150,
          category: 'Core Services',
        },
      ] as IServiceStatus[]}
    ></upladmin-monitor-list>
  </div>
`;
