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

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

  <div class="demo-container">
    <upladmin-dashboard
      .monitors=${[
        { id: 'api', name: 'api', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45, category: 'Core' },
        { id: 'web', name: 'web', displayName: 'Web App', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120, category: 'Core' },
        { id: 'db', name: 'db', displayName: 'Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5, category: 'Infrastructure' },
        { id: 'cdn', name: 'cdn', displayName: 'CDN', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200, category: 'Infrastructure' },
        { id: 'cache', name: 'cache', displayName: 'Redis Cache', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.98, responseTime: 2, category: 'Infrastructure' },
        { id: 'email', name: 'email', displayName: 'Email Service', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.9, uptime90d: 99.85, responseTime: 500, category: 'External' },
        { id: 'payment', name: 'payment', displayName: 'Payment Gateway', currentStatus: 'maintenance', lastChecked: Date.now(), uptime30d: 99.95, uptime90d: 99.9, responseTime: 350, category: 'External' },
        { id: 'search', name: 'search', displayName: 'Search Engine', currentStatus: 'partial_outage', lastChecked: Date.now(), uptime30d: 98.5, uptime90d: 99.2, responseTime: 150, category: 'Core' },
      ] as IServiceStatus[]}
      .activeIncidents=${[
        {
          id: 'inc-1',
          title: 'CDN Performance Degradation',
          status: 'identified',
          severity: 'minor',
          affectedServices: ['cdn'],
          startTime: Date.now() - 2 * 60 * 60 * 1000,
          impact: 'Some users may experience slower page loads',
          updates: [
            { id: 'u1', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified as network congestion' },
            { id: 'u2', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow content delivery' },
          ],
        },
        {
          id: 'inc-2',
          title: 'Search Cluster Partial Failure',
          status: 'investigating',
          severity: 'major',
          affectedServices: ['search'],
          startTime: Date.now() - 30 * 60 * 1000,
          impact: 'Search functionality may return incomplete results',
          updates: [
            { id: 'u3', timestamp: Date.now() - 30 * 60 * 1000, status: 'investigating', message: 'We are investigating issues with the search cluster' },
          ],
        },
      ] as IIncidentDetails[]}
    ></upladmin-dashboard>
  </div>
`;