import { html, css, cssManager } from '@design.estate/dees-element';
import type { IIncidentDetails } from '../../interfaces/index.js';
import './upladmin-incident-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-incident-list
      .incidents=${[
        {
          id: 'inc-1',
          title: 'CDN Performance Degradation',
          status: 'monitoring',
          severity: 'minor',
          affectedServices: ['cdn'],
          startTime: Date.now() - 4 * 60 * 60 * 1000,
          impact: 'Some users may experience slower page loads for static assets.',
          rootCause: 'Network congestion at edge locations',
          updates: [
            { id: 'u1', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'monitoring', message: 'Fix deployed, monitoring results.', author: 'Infrastructure Team' },
            { id: 'u2', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified as network congestion at edge nodes.', author: 'Infrastructure Team' },
            { id: 'u3', timestamp: Date.now() - 4 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow content delivery.', author: 'Support Team' },
          ],
        },
        {
          id: 'inc-2',
          title: 'Search Cluster Partial Failure',
          status: 'investigating',
          severity: 'major',
          affectedServices: ['search', 'api'],
          startTime: Date.now() - 45 * 60 * 1000,
          impact: 'Search functionality may return incomplete results. API responses may be delayed.',
          updates: [
            { id: 'u4', timestamp: Date.now() - 45 * 60 * 1000, status: 'investigating', message: 'We are investigating issues with the search cluster. Some nodes are not responding.', author: 'Platform Team' },
          ],
        },
        {
          id: 'inc-3',
          title: 'Scheduled Database Maintenance',
          status: 'investigating',
          severity: 'maintenance',
          affectedServices: ['db', 'api', 'web'],
          startTime: Date.now() - 15 * 60 * 1000,
          impact: 'Brief interruptions may occur during the maintenance window.',
          updates: [
            { id: 'u5', timestamp: Date.now() - 15 * 60 * 1000, status: 'investigating', message: 'Starting scheduled database maintenance. Expected duration: 2 hours.', author: 'DBA Team' },
          ],
        },
        {
          id: 'inc-4',
          title: 'Authentication Service Outage',
          status: 'resolved',
          severity: 'critical',
          affectedServices: ['auth', 'api', 'web'],
          startTime: Date.now() - 24 * 60 * 60 * 1000,
          endTime: Date.now() - 22 * 60 * 60 * 1000,
          impact: 'Users were unable to log in or access authenticated features.',
          rootCause: 'Certificate expiration on the identity provider.',
          resolution: 'Renewed certificates and implemented automated monitoring for future expirations.',
          updates: [
            { id: 'u6', timestamp: Date.now() - 22 * 60 * 60 * 1000, status: 'resolved', message: 'Issue has been fully resolved. All authentication services are operational.', author: 'Security Team' },
            { id: 'u7', timestamp: Date.now() - 23 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified: expired SSL certificate on identity provider.', author: 'Security Team' },
            { id: 'u8', timestamp: Date.now() - 24 * 60 * 60 * 1000, status: 'investigating', message: 'We are aware of authentication issues and are investigating.', author: 'On-call Engineer' },
          ],
        },
        {
          id: 'inc-5',
          title: 'Payment Processing Delays',
          status: 'postmortem',
          severity: 'major',
          affectedServices: ['payment', 'api'],
          startTime: Date.now() - 72 * 60 * 60 * 1000,
          endTime: Date.now() - 70 * 60 * 60 * 1000,
          impact: 'Payment transactions were delayed by up to 5 minutes.',
          rootCause: 'Third-party payment provider experienced capacity issues.',
          resolution: 'Provider resolved their capacity issues. Implemented fallback payment routing.',
          updates: [
            { id: 'u9', timestamp: Date.now() - 48 * 60 * 60 * 1000, status: 'postmortem', message: 'Postmortem complete. Implementing additional redundancy measures.', author: 'Engineering Lead' },
            { id: 'u10', timestamp: Date.now() - 70 * 60 * 60 * 1000, status: 'resolved', message: 'Payment processing has returned to normal.', author: 'Payments Team' },
          ],
        },
      ] as IIncidentDetails[]}
    ></upladmin-incident-list>
  </div>
`;
