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

export const adminpageIncidents = () => 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 incidentList = wrapperElement.querySelector('upladmin-incident-list') as any;

      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' },
          ],
        },
        {
          id: 'inc-003',
          title: 'Search Engine Partial Outage',
          status: 'identified',
          severity: 'major',
          affectedServices: ['search-engine', 'api-server'],
          startTime: Date.now() - 45 * 60 * 1000,
          impact: 'Search functionality is degraded. Some queries may timeout or return incomplete results.',
          updates: [
            { id: 'upd-005', timestamp: Date.now() - 45 * 60 * 1000, status: 'investigating', message: 'We are aware of issues with search functionality.', author: 'Engineering Team' },
            { id: 'upd-006', timestamp: Date.now() - 20 * 60 * 1000, status: 'identified', message: 'Root cause identified: disk space exhaustion on search cluster nodes.', author: 'Engineering Team' },
          ],
        },
        {
          id: 'inc-004',
          title: 'API Server Outage',
          status: 'resolved',
          severity: 'critical',
          affectedServices: ['api-server', 'web-app'],
          startTime: Date.now() - 24 * 60 * 60 * 1000,
          endTime: Date.now() - 23 * 60 * 60 * 1000,
          impact: 'Complete service unavailability for all API-dependent services.',
          rootCause: 'Database connection pool exhaustion due to a query performance regression.',
          resolution: 'Rolled back recent deployment and optimized database queries.',
          updates: [
            { id: 'upd-007', timestamp: Date.now() - 24 * 60 * 60 * 1000, status: 'investigating', message: 'We are aware of service unavailability and actively investigating.', author: 'Platform Team' },
            { id: 'upd-008', timestamp: Date.now() - 23.5 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified as database connection pool exhaustion.', author: 'Platform Team' },
            { id: 'upd-009', timestamp: Date.now() - 23 * 60 * 60 * 1000, status: 'resolved', message: 'Service has been restored. All systems operational.', author: 'Platform Team' },
          ],
        },
        {
          id: 'inc-005',
          title: 'Email Delivery Delays',
          status: 'resolved',
          severity: 'minor',
          affectedServices: ['email-service'],
          startTime: Date.now() - 48 * 60 * 60 * 1000,
          endTime: Date.now() - 46 * 60 * 60 * 1000,
          impact: 'Email notifications may be delayed by up to 30 minutes.',
          rootCause: 'Third-party email provider experiencing capacity issues.',
          resolution: 'Provider resolved their capacity issues.',
          updates: [
            { id: 'upd-010', timestamp: Date.now() - 48 * 60 * 60 * 1000, status: 'investigating', message: 'Investigating reports of delayed email delivery.', author: 'Support Team' },
            { id: 'upd-011', timestamp: Date.now() - 46 * 60 * 60 * 1000, status: 'resolved', message: 'Email delivery has returned to normal.', author: 'Support Team' },
          ],
        },
      ];

      incidentList.incidents = incidents;
    }}
    >
      <upladmin-incident-list></upladmin-incident-list>
    </dees-demowrapper>
  </div>
`;

export const adminpageIncidentForm = () => 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 incidentForm = wrapperElement.querySelector('upladmin-incident-form') as any;

      const services: IServiceStatus[] = [
        { id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
        { id: 'web-app', name: 'web-app', displayName: 'Web Application', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120 },
        { id: 'database-primary', name: 'database-primary', displayName: 'Primary Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
        { id: 'cdn', name: 'cdn', displayName: 'Content Delivery Network', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200 },
        { id: 'email-service', name: 'email-service', displayName: 'Email Service', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.9, uptime90d: 99.85, responseTime: 500 },
        { id: 'payment-gateway', name: 'payment-gateway', displayName: 'Payment Gateway', currentStatus: 'maintenance', lastChecked: Date.now(), uptime30d: 99.95, uptime90d: 99.9, responseTime: 350 },
      ];

      incidentForm.availableServices = services;
    }}
    >
      <upladmin-incident-form></upladmin-incident-form>
    </dees-demowrapper>
  </div>
`;

export const adminpageIncidentUpdate = () => 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 incidentUpdate = wrapperElement.querySelector('upladmin-incident-update') as any;

      incidentUpdate.incident = {
        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' },
        ],
      };
    }}
    >
      <upladmin-incident-update></upladmin-incident-update>
    </dees-demowrapper>
  </div>
`;