catalog/ts_web/elements/upl-statuspage-incidents.demo.ts

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

export const demoFunc = () => html`
  <style>
    .demo-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .demo-section {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      background: #f5f5f5;
    }
    .demo-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #333;
    }
    .demo-controls {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .demo-button {
      padding: 6px 12px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }
    .demo-button:hover {
      background: #f0f0f0;
    }
    .demo-button.active {
      background: #2196F3;
      color: white;
      border-color: #2196F3;
    }
    .demo-info {
      margin-top: 12px;
      padding: 12px;
      background: white;
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.6;
    }
    .incident-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .stat-box {
      background: white;
      padding: 12px;
      border-radius: 4px;
      text-align: center;
    }
    .stat-value {
      font-size: 20px;
      font-weight: 600;
      color: #2196F3;
    }
    .stat-label {
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }
    .incident-log {
      margin-top: 12px;
      padding: 12px;
      background: #f9f9f9;
      border-radius: 4px;
      font-size: 12px;
      max-height: 150px;
      overflow-y: auto;
      font-family: monospace;
    }
  </style>

  <div class="demo-container">
    <!-- Different Incident Types -->
    <div class="demo-section">
      <div class="demo-title">Different Incident Types and Severities</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
          
          // Generate different types of incidents
          const incidentScenarios = {
            critical: {
              name: 'Critical Outage',
              incidents: [
                {
                  id: 'crit-001',
                  title: 'Complete Platform Outage',
                  status: 'investigating' as const,
                  severity: 'critical' as const,
                  affectedServices: ['api-gateway', 'web-server', 'database', 'cdn'],
                  startTime: Date.now() - 15 * 60 * 1000,
                  impact: 'All services are currently unavailable. We are working on immediate resolution.',
                  updates: [
                    {
                      id: 'upd-c1',
                      timestamp: Date.now() - 15 * 60 * 1000,
                      status: 'investigating' as const,
                      message: 'Multiple alerts triggered. All hands on deck.',
                      author: 'Incident Commander'
                    },
                    {
                      id: 'upd-c2',
                      timestamp: Date.now() - 10 * 60 * 1000,
                      status: 'investigating' as const,
                      message: 'Root cause appears to be datacenter power failure.',
                      author: 'Infrastructure Team'
                    }
                  ]
                }
              ]
            },
            major: {
              name: 'Major Issues',
              incidents: [
                {
                  id: 'maj-001',
                  title: 'Database Performance Degradation',
                  status: 'identified' as const,
                  severity: 'major' as const,
                  affectedServices: ['database', 'api-gateway'],
                  startTime: Date.now() - 45 * 60 * 1000,
                  impact: 'Significant slowdown in database queries affecting 60% of API requests.',
                  updates: [
                    {
                      id: 'upd-m1',
                      timestamp: Date.now() - 45 * 60 * 1000,
                      status: 'investigating' as const,
                      message: 'Investigating database performance issues.',
                      author: 'Database Team'
                    },
                    {
                      id: 'upd-m2',
                      timestamp: Date.now() - 30 * 60 * 1000,
                      status: 'identified' as const,
                      message: 'Identified runaway queries causing resource exhaustion.',
                      author: 'Database Team'
                    }
                  ]
                },
                {
                  id: 'maj-002',
                  title: 'CDN Routing Issues',
                  status: 'monitoring' as const,
                  severity: 'major' as const,
                  affectedServices: ['cdn'],
                  startTime: Date.now() - 2 * 60 * 60 * 1000,
                  impact: 'Assets loading slowly for users in EU region.',
                  updates: [
                    {
                      id: 'upd-m3',
                      timestamp: Date.now() - 2 * 60 * 60 * 1000,
                      status: 'investigating' as const,
                      message: 'Reports of slow asset loading from EU users.',
                      author: 'CDN Team'
                    },
                    {
                      id: 'upd-m4',
                      timestamp: Date.now() - 90 * 60 * 1000,
                      status: 'identified' as const,
                      message: 'CDN provider experiencing issues with EU PoPs.',
                      author: 'CDN Team'
                    },
                    {
                      id: 'upd-m5',
                      timestamp: Date.now() - 30 * 60 * 1000,
                      status: 'monitoring' as const,
                      message: 'Rerouted traffic to alternate PoPs. Monitoring performance.',
                      author: 'CDN Team'
                    }
                  ]
                }
              ]
            },
            minor: {
              name: 'Minor Incidents',
              incidents: [
                {
                  id: 'min-001',
                  title: 'Delayed Webhook Deliveries',
                  status: 'monitoring' as const,
                  severity: 'minor' as const,
                  affectedServices: ['webhook-service'],
                  startTime: Date.now() - 3 * 60 * 60 * 1000,
                  impact: 'Webhooks experiencing 2-5 minute delays.',
                  updates: [
                    {
                      id: 'upd-n1',
                      timestamp: Date.now() - 3 * 60 * 60 * 1000,
                      status: 'investigating' as const,
                      message: 'Investigating webhook delivery delays.',
                      author: 'API Team'
                    },
                    {
                      id: 'upd-n2',
                      timestamp: Date.now() - 2 * 60 * 60 * 1000,
                      status: 'monitoring' as const,
                      message: 'Queue processing optimized. Delays reducing.',
                      author: 'API Team'
                    }
                  ]
                },
                {
                  id: 'min-002',
                  title: 'Search Indexing Lag',
                  status: 'identified' as const,
                  severity: 'minor' as const,
                  affectedServices: ['search-service'],
                  startTime: Date.now() - 4 * 60 * 60 * 1000,
                  impact: 'New content taking up to 30 minutes to appear in search results.',
                  updates: [
                    {
                      id: 'upd-n3',
                      timestamp: Date.now() - 4 * 60 * 60 * 1000,
                      status: 'identified' as const,
                      message: 'Search indexing pipeline experiencing backlog.',
                      author: 'Search Team'
                    }
                  ]
                }
              ]
            },
            maintenance: {
              name: 'Maintenance',
              incidents: [
                {
                  id: 'maint-001',
                  title: 'Scheduled Database Maintenance',
                  status: 'identified' as const,
                  severity: 'maintenance' as const,
                  affectedServices: ['database'],
                  startTime: Date.now() + 24 * 60 * 60 * 1000,
                  endTime: Date.now() + 26 * 60 * 60 * 1000,
                  impact: 'Database will be in read-only mode during maintenance window.',
                  updates: [
                    {
                      id: 'upd-mt1',
                      timestamp: Date.now(),
                      status: 'identified' as const,
                      message: 'Scheduled maintenance for database version upgrade.',
                      author: 'Database Team'
                    }
                  ]
                },
                {
                  id: 'maint-002',
                  title: 'Network Equipment Upgrade',
                  status: 'identified' as const,
                  severity: 'maintenance' as const,
                  affectedServices: ['cdn', 'api-gateway'],
                  startTime: Date.now() + 48 * 60 * 60 * 1000,
                  endTime: Date.now() + 49 * 60 * 60 * 1000,
                  impact: 'Brief connectivity interruptions expected during upgrade window.',
                  updates: [
                    {
                      id: 'upd-mt2',
                      timestamp: Date.now() - 2 * 60 * 60 * 1000,
                      status: 'identified' as const,
                      message: 'Core network switches scheduled for firmware upgrade.',
                      author: 'Network Team'
                    }
                  ]
                }
              ]
            }
          };
          
          // Initial setup
          let currentScenario = 'major';
          incidents.currentIncidents = incidentScenarios[currentScenario].incidents;
          incidents.pastIncidents = [];
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          Object.entries(incidentScenarios).forEach(([key, scenario]) => {
            const button = document.createElement('button');
            button.className = 'demo-button' + (key === currentScenario ? ' active' : '');
            button.textContent = scenario.name;
            button.onclick = () => {
              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
              button.classList.add('active');
              
              currentScenario = key;
              incidents.loading = true;
              setTimeout(() => {
                incidents.currentIncidents = scenario.incidents;
                incidents.loading = false;
                updateStats();
              }, 500);
            };
            controls.appendChild(button);
          });
          
          wrapperElement.appendChild(controls);
          
          // Add statistics
          const statsDiv = document.createElement('div');
          statsDiv.className = 'incident-stats';
          wrapperElement.appendChild(statsDiv);
          
          const updateStats = () => {
            const current = incidents.currentIncidents || [];
            const critical = current.filter(i => i.severity === 'critical').length;
            const major = current.filter(i => i.severity === 'major').length;
            const minor = current.filter(i => i.severity === 'minor').length;
            const maintenance = current.filter(i => i.severity === 'maintenance').length;
            
            statsDiv.innerHTML = `
              <div class="stat-box">
                <div class="stat-value">${critical}</div>
                <div class="stat-label">Critical</div>
              </div>
              <div class="stat-box">
                <div class="stat-value">${major}</div>
                <div class="stat-label">Major</div>
              </div>
              <div class="stat-box">
                <div class="stat-value">${minor}</div>
                <div class="stat-label">Minor</div>
              </div>
              <div class="stat-box">
                <div class="stat-value">${maintenance}</div>
                <div class="stat-label">Maintenance</div>
              </div>
            `;
          };
          
          updateStats();
          
          // Handle incident clicks
          incidents.addEventListener('incidentClick', (event: CustomEvent) => {
            alert(`Incident Details:\n\nTitle: ${event.detail.incident.title}\nSeverity: ${event.detail.incident.severity}\nStatus: ${event.detail.incident.status}\nImpact: ${event.detail.incident.impact}`);
          });
        }}
      >
        <upl-statuspage-incidents></upl-statuspage-incidents>
      </dees-demowrapper>
    </div>

    <!-- Real-time Incident Progression -->
    <div class="demo-section">
      <div class="demo-title">Real-time Incident Progression</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
          
          // Create a progressing incident
          const progressingIncident: IIncidentDetails = {
            id: 'prog-001',
            title: 'Live Incident: Payment Processing Delays',
            status: 'investigating',
            severity: 'major',
            affectedServices: ['payment-gateway', 'api-gateway'],
            startTime: Date.now(),
            impact: 'Payment processing experiencing intermittent failures.',
            updates: [
              {
                id: 'upd-p1',
                timestamp: Date.now(),
                status: 'investigating',
                message: 'We are investigating reports of payment processing failures.',
                author: 'Payment Team'
              }
            ]
          };
          
          incidents.currentIncidents = [progressingIncident];
          incidents.pastIncidents = [];
          
          // Progression timeline
          const progressionSteps = [
            {
              delay: 10000,
              update: {
                status: 'investigating' as const,
                message: 'Initial investigation shows 30% of payment attempts failing.',
                author: 'Payment Team'
              }
            },
            {
              delay: 20000,
              update: {
                status: 'identified' as const,
                message: 'Root cause identified: Third-party payment processor API rate limiting.',
                author: 'Engineering Team'
              },
              incidentUpdate: { status: 'identified' as const }
            },
            {
              delay: 30000,
              update: {
                status: 'monitoring' as const,
                message: 'Implemented retry logic and request throttling. Success rate improving.',
                author: 'Engineering Team'
              },
              incidentUpdate: { status: 'monitoring' as const }
            },
            {
              delay: 40000,
              update: {
                status: 'monitoring' as const,
                message: 'Payment success rate now at 95%. Continuing to monitor.',
                author: 'Payment Team'
              }
            },
            {
              delay: 50000,
              update: {
                status: 'resolved' as const,
                message: 'All systems back to normal. Payment processing fully restored.',
                author: 'Payment Team'
              },
              incidentUpdate: { 
                status: 'resolved' as const,
                endTime: Date.now() + 50000,
                resolution: 'Implemented rate limiting and retry logic to prevent future occurrences.'
              }
            }
          ];
          
          // Progress through steps
          progressionSteps.forEach((step, index) => {
            setTimeout(() => {
              const newUpdate: IIncidentUpdate = {
                id: `upd-p${index + 2}`,
                timestamp: Date.now(),
                ...step.update
              };
              
              progressingIncident.updates.push(newUpdate);
              
              if (step.incidentUpdate) {
                Object.assign(progressingIncident, step.incidentUpdate);
              }
              
              if (progressingIncident.status === 'resolved') {
                // Move to past incidents
                incidents.pastIncidents = [progressingIncident, ...incidents.pastIncidents];
                incidents.currentIncidents = [];
              }
              
              incidents.requestUpdate();
              logUpdate(`[${step.update.status.toUpperCase()}] ${step.update.message}`);
            }, step.delay);
          });
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="addUpdate">Add Custom Update</button>
            <button class="demo-button" id="escalate">Escalate to Critical</button>
            <button class="demo-button" id="resolve">Resolve Immediately</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#addUpdate')?.addEventListener('click', () => {
            if (progressingIncident.status !== 'resolved') {
              const message = prompt('Enter update message:');
              if (message) {
                progressingIncident.updates.push({
                  id: `upd-custom-${Date.now()}`,
                  timestamp: Date.now(),
                  status: progressingIncident.status,
                  message,
                  author: 'Manual Update'
                });
                incidents.requestUpdate();
                logUpdate(`[MANUAL] ${message}`);
              }
            }
          });
          
          controls.querySelector('#escalate')?.addEventListener('click', () => {
            if (progressingIncident.status !== 'resolved') {
              progressingIncident.severity = 'critical';
              progressingIncident.updates.push({
                id: `upd-esc-${Date.now()}`,
                timestamp: Date.now(),
                status: progressingIncident.status,
                message: 'Incident escalated to CRITICAL severity.',
                author: 'Incident Commander'
              });
              incidents.requestUpdate();
              logUpdate('[ESCALATED] Incident severity raised to CRITICAL');
            }
          });
          
          controls.querySelector('#resolve')?.addEventListener('click', () => {
            if (progressingIncident.status !== 'resolved') {
              progressingIncident.status = 'resolved';
              progressingIncident.endTime = Date.now();
              progressingIncident.resolution = 'Manually resolved.';
              progressingIncident.updates.push({
                id: `upd-res-${Date.now()}`,
                timestamp: Date.now(),
                status: 'resolved',
                message: 'Incident manually resolved.',
                author: 'Manual Resolution'
              });
              incidents.pastIncidents = [progressingIncident, ...incidents.pastIncidents];
              incidents.currentIncidents = [];
              incidents.requestUpdate();
              logUpdate('[RESOLVED] Incident manually resolved');
            }
          });
          
          // Handle incident subscriptions
          incidents.addEventListener('incidentSubscribe', (event: CustomEvent) => {
            console.log('Subscribed to incident:', event.detail);
            logUpdate(`[SUBSCRIBED] User subscribed to incident "${event.detail.incidentTitle}"`);
          });
          
          incidents.addEventListener('incidentUnsubscribe', (event: CustomEvent) => {
            console.log('Unsubscribed from incident:', event.detail);
            logUpdate(`[UNSUBSCRIBED] User unsubscribed from incident "${event.detail.incident.title}"`);
          });
          
          // Add update log
          const logDiv = document.createElement('div');
          logDiv.className = 'incident-log';
          logDiv.innerHTML = '<strong>Incident Timeline:</strong><br>';
          wrapperElement.appendChild(logDiv);
          
          const logUpdate = (message: string) => {
            const time = new Date().toLocaleTimeString();
            logDiv.innerHTML += `[${time}] ${message}<br>`;
            logDiv.scrollTop = logDiv.scrollHeight;
          };
          
          logUpdate('[CREATED] New incident: Payment Processing Delays');
        }}
      >
        <upl-statuspage-incidents></upl-statuspage-incidents>
      </dees-demowrapper>
    </div>

    <!-- Historical Incident Patterns -->
    <div class="demo-section">
      <div class="demo-title">Historical Incident Patterns</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
          
          // Generate historical patterns
          const generateHistoricalIncidents = (pattern: 'frequent' | 'seasonal' | 'improving' | 'stable'): IIncidentDetails[] => {
            const incidents: IIncidentDetails[] = [];
            const now = Date.now();
            
            switch (pattern) {
              case 'frequent':
                // Many incidents in recent history
                for (let i = 0; i < 20; i++) {
                  const daysAgo = Math.floor(Math.random() * 30);
                  const duration = Math.floor(Math.random() * 4 + 1) * 60 * 60 * 1000;
                  const startTime = now - daysAgo * 24 * 60 * 60 * 1000;
                  
                  incidents.push({
                    id: `freq-${i}`,
                    title: `Service Disruption #${20 - i}`,
                    status: 'resolved',
                    severity: Math.random() < 0.3 ? 'major' : 'minor',
                    affectedServices: ['api-gateway', 'database'].slice(0, Math.floor(Math.random() * 2) + 1),
                    startTime,
                    endTime: startTime + duration,
                    impact: 'Service degradation affecting subset of users.',
                    rootCause: 'Various infrastructure issues.',
                    resolution: 'Applied temporary fixes.',
                    updates: [
                      {
                        id: `upd-${i}-1`,
                        timestamp: startTime,
                        status: 'investigating',
                        message: 'Investigating service issues.',
                        author: 'Ops Team'
                      },
                      {
                        id: `upd-${i}-2`,
                        timestamp: startTime + duration,
                        status: 'resolved',
                        message: 'Issue resolved.',
                        author: 'Ops Team'
                      }
                    ]
                  });
                }
                break;
                
              case 'seasonal':
                // Incidents clustered around specific times
                const peakDays = [7, 14, 21, 28]; // Weekly pattern
                peakDays.forEach((day, index) => {
                  for (let j = 0; j < 3; j++) {
                    const startTime = now - day * 24 * 60 * 60 * 1000 + (j - 1) * 60 * 60 * 1000;
                    incidents.push({
                      id: `seas-${index}-${j}`,
                      title: `Peak Traffic Overload`,
                      status: 'resolved',
                      severity: 'minor',
                      affectedServices: ['api-gateway'],
                      startTime,
                      endTime: startTime + 30 * 60 * 1000,
                      impact: 'Slow response times during peak hours.',
                      rootCause: 'Insufficient capacity for peak traffic.',
                      resolution: 'Auto-scaling adjusted.',
                      updates: [
                        {
                          id: `upd-s-${index}-${j}`,
                          timestamp: startTime,
                          status: 'resolved',
                          message: 'Peak traffic handled by auto-scaling.',
                          author: 'Auto-remediation'
                        }
                      ]
                    });
                  }
                });
                break;
                
              case 'improving':
                // Fewer incidents over time
                for (let i = 0; i < 15; i++) {
                  const daysAgo = 30 - i * 2;
                  if (Math.random() < (15 - i) / 15) {
                    const startTime = now - daysAgo * 24 * 60 * 60 * 1000;
                    incidents.push({
                      id: `imp-${i}`,
                      title: `System Issue #${i + 1}`,
                      status: 'resolved',
                      severity: i < 5 ? 'major' : 'minor',
                      affectedServices: ['database'],
                      startTime,
                      endTime: startTime + 2 * 60 * 60 * 1000,
                      impact: 'Database performance issues.',
                      rootCause: 'Legacy infrastructure limitations.',
                      resolution: 'Infrastructure improvements implemented.',
                      updates: [
                        {
                          id: `upd-imp-${i}`,
                          timestamp: startTime,
                          status: 'resolved',
                          message: 'Resolved with infrastructure improvements.',
                          author: 'Infrastructure Team'
                        }
                      ]
                    });
                  }
                }
                break;
                
              case 'stable':
                // Very few incidents, all minor
                for (let i = 0; i < 3; i++) {
                  const daysAgo = Math.floor(Math.random() * 30);
                  const startTime = now - daysAgo * 24 * 60 * 60 * 1000;
                  incidents.push({
                    id: `stab-${i}`,
                    title: ['Routine Maintenance', 'Minor Configuration Update', 'Planned Restart'][i],
                    status: 'resolved',
                    severity: 'maintenance',
                    affectedServices: ['web-server'],
                    startTime,
                    endTime: startTime + 15 * 60 * 1000,
                    impact: 'No user impact.',
                    resolution: 'Completed as planned.',
                    updates: [
                      {
                        id: `upd-stab-${i}`,
                        timestamp: startTime,
                        status: 'resolved',
                        message: 'Maintenance completed successfully.',
                        author: 'Maintenance Team'
                      }
                    ]
                  });
                }
                break;
            }
            
            return incidents.sort((a, b) => b.startTime - a.startTime);
          };
          
          // Initial setup
          let currentPattern: 'frequent' | 'seasonal' | 'improving' | 'stable' = 'frequent';
          incidents.currentIncidents = [];
          incidents.pastIncidents = generateHistoricalIncidents(currentPattern);
          
          // Create pattern controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          const patterns = [
            { key: 'frequent', label: 'Frequent Incidents' },
            { key: 'seasonal', label: 'Seasonal Pattern' },
            { key: 'improving', label: 'Improving Trend' },
            { key: 'stable', label: 'Stable System' }
          ];
          
          patterns.forEach((pattern) => {
            const button = document.createElement('button');
            button.className = 'demo-button' + (pattern.key === currentPattern ? ' active' : '');
            button.textContent = pattern.label;
            button.onclick = () => {
              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
              button.classList.add('active');
              
              currentPattern = pattern.key as any;
              incidents.loading = true;
              setTimeout(() => {
                incidents.pastIncidents = generateHistoricalIncidents(currentPattern as any);
                incidents.loading = false;
              }, 500);
            };
            controls.appendChild(button);
          });
          
          wrapperElement.appendChild(controls);
          
          // Add info about the pattern
          const info = document.createElement('div');
          info.className = 'demo-info';
          info.innerHTML = `
            <strong>Pattern Description:</strong><br>
            <strong>Frequent:</strong> Many incidents indicating stability issues<br>
            <strong>Seasonal:</strong> Incidents following a predictable pattern<br>
            <strong>Improving:</strong> Decreasing incident frequency over time<br>
            <strong>Stable:</strong> Minimal incidents, mostly maintenance
          `;
          wrapperElement.appendChild(info);
        }}
      >
        <upl-statuspage-incidents></upl-statuspage-incidents>
      </dees-demowrapper>
    </div>

    <!-- Edge Cases -->
    <div class="demo-section">
      <div class="demo-title">Edge Cases and Special Scenarios</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
          
          const edgeCases = {
            none: {
              name: 'No Incidents',
              current: [],
              past: []
            },
            manyActive: {
              name: 'Many Active',
              current: Array.from({ length: 8 }, (_, i) => ({
                id: `many-${i}`,
                title: `Concurrent Issue #${i + 1}`,
                status: ['investigating', 'identified', 'monitoring'][i % 3] as any,
                severity: ['critical', 'major', 'minor'][i % 3] as any,
                affectedServices: [`service-${i}`],
                startTime: Date.now() - (i + 1) * 30 * 60 * 1000,
                impact: `Impact on service ${i + 1}`,
                updates: [{
                  id: `upd-many-${i}`,
                  timestamp: Date.now() - (i + 1) * 30 * 60 * 1000,
                  status: 'investigating' as const,
                  message: 'Investigating issue.',
                  author: 'Team'
                }]
              })),
              past: []
            },
            longRunning: {
              name: 'Long Running',
              current: [{
                id: 'long-001',
                title: 'Persistent Infrastructure Issue',
                status: 'monitoring' as const,
                severity: 'major' as const,
                affectedServices: ['database', 'api-gateway'],
                startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 7 days ago
                impact: 'Intermittent issues affecting 5-10% of requests.',
                updates: Array.from({ length: 50 }, (_, i) => ({
                  id: `upd-long-${i}`,
                  timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + i * 3 * 60 * 60 * 1000,
                  status: 'monitoring' as const,
                  message: `Update #${i + 1}: Continuing to monitor. Partial mitigation in place.`,
                  author: 'Ops Team'
                }))
              }],
              past: []
            },
            complexUpdates: {
              name: 'Complex Updates',
              current: [{
                id: 'complex-001',
                title: 'Multi-phase Incident Resolution',
                status: 'monitoring' as const,
                severity: 'critical' as const,
                affectedServices: ['api-gateway', 'database', 'cdn', 'email-service'],
                startTime: Date.now() - 4 * 60 * 60 * 1000,
                impact: 'Multiple services experiencing cascading failures.',
                updates: [
                  {
                    id: 'upd-c1',
                    timestamp: Date.now() - 4 * 60 * 60 * 1000,
                    status: 'investigating' as const,
                    message: '🚨 CRITICAL: Multiple service alerts triggered simultaneously.',
                    author: 'Monitoring System'
                  },
                  {
                    id: 'upd-c2',
                    timestamp: Date.now() - 3.5 * 60 * 60 * 1000,
                    status: 'investigating' as const,
                    message: 'All hands on deck. Incident commander taking charge.\n\n- API Gateway: DOWN\n- Database: DEGRADED\n- CDN: PARTIAL OUTAGE\n- Email: DELAYED',
                    author: 'Incident Commander'
                  },
                  {
                    id: 'upd-c3',
                    timestamp: Date.now() - 3 * 60 * 60 * 1000,
                    status: 'identified' as const,
                    message: 'Root cause identified: Cascading failure triggered by database connection pool exhaustion.\n\nAction items:\n1. Restart connection pools\n2. Implement circuit breakers\n3. Scale up database replicas',
                    author: 'Engineering Lead'
                  },
                  {
                    id: 'upd-c4',
                    timestamp: Date.now() - 2 * 60 * 60 * 1000,
                    status: 'monitoring' as const,
                    message: 'Partial recovery achieved:\n✅ API Gateway: RESTORED\n⚠️ Database: RECOVERING\n✅ CDN: OPERATIONAL\n⚠️ Email: CATCHING UP\n\nContinuing remediation efforts.',
                    author: 'Ops Team'
                  }
                ]
              }],
              past: []
            }
          };
          
          // Initial setup
          let currentCase = 'none';
          incidents.currentIncidents = edgeCases[currentCase].current;
          incidents.pastIncidents = edgeCases[currentCase].past;
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          Object.entries(edgeCases).forEach(([key, scenario]) => {
            const button = document.createElement('button');
            button.className = 'demo-button' + (key === currentCase ? ' active' : '');
            button.textContent = scenario.name;
            button.onclick = () => {
              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
              button.classList.add('active');
              
              currentCase = key;
              incidents.loading = true;
              setTimeout(() => {
                incidents.currentIncidents = scenario.current;
                incidents.pastIncidents = scenario.past;
                incidents.loading = false;
              }, 300);
            };
            controls.appendChild(button);
          });
          
          wrapperElement.appendChild(controls);
        }}
      >
        <upl-statuspage-incidents></upl-statuspage-incidents>
      </dees-demowrapper>
    </div>

    <!-- Loading and Filtering -->
    <div class="demo-section">
      <div class="demo-title">Loading States and Filtering</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
          
          // Start with loading
          incidents.loading = true;
          
          // Generate mixed incidents for filtering
          const allIncidents: IIncidentDetails[] = [
            {
              id: 'filter-1',
              title: 'Critical Database Failure',
              status: 'resolved',
              severity: 'critical',
              affectedServices: ['database'],
              startTime: Date.now() - 2 * 24 * 60 * 60 * 1000,
              endTime: Date.now() - 2 * 24 * 60 * 60 * 1000 + 4 * 60 * 60 * 1000,
              impact: 'Complete database unavailability.',
              resolution: 'Failed over to secondary cluster.',
              updates: [{
                id: 'u1',
                timestamp: Date.now() - 2 * 24 * 60 * 60 * 1000,
                status: 'resolved',
                message: 'Database restored.',
                author: 'DBA Team'
              }]
            },
            {
              id: 'filter-2',
              title: 'API Rate Limiting Issues',
              status: 'resolved',
              severity: 'major',
              affectedServices: ['api-gateway'],
              startTime: Date.now() - 5 * 24 * 60 * 60 * 1000,
              endTime: Date.now() - 5 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000,
              impact: 'API requests throttled for some users.',
              resolution: 'Rate limits adjusted.',
              updates: [{
                id: 'u2',
                timestamp: Date.now() - 5 * 24 * 60 * 60 * 1000,
                status: 'resolved',
                message: 'Rate limiting resolved.',
                author: 'API Team'
              }]
            },
            {
              id: 'filter-3',
              title: 'Email Delays',
              status: 'resolved',
              severity: 'minor',
              affectedServices: ['email-service'],
              startTime: Date.now() - 10 * 24 * 60 * 60 * 1000,
              endTime: Date.now() - 10 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000,
              impact: 'Emails delayed by 5-10 minutes.',
              resolution: 'Queue cleared.',
              updates: [{
                id: 'u3',
                timestamp: Date.now() - 10 * 24 * 60 * 60 * 1000,
                status: 'resolved',
                message: 'Email queue cleared.',
                author: 'Email Team'
              }]
            },
            {
              id: 'filter-4',
              title: 'Scheduled Maintenance',
              status: 'resolved',
              severity: 'maintenance',
              affectedServices: ['web-server'],
              startTime: Date.now() - 15 * 24 * 60 * 60 * 1000,
              endTime: Date.now() - 15 * 24 * 60 * 60 * 1000 + 60 * 60 * 1000,
              impact: 'Brief downtime during upgrade.',
              resolution: 'Upgrade completed.',
              updates: [{
                id: 'u4',
                timestamp: Date.now() - 15 * 24 * 60 * 60 * 1000,
                status: 'resolved',
                message: 'Maintenance completed.',
                author: 'Ops Team'
              }]
            }
          ];
          
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="toggleLoading">Toggle Loading</button>
            <button class="demo-button" id="loadSuccess">Load Successfully</button>
            <button class="demo-button" id="loadError">Simulate Error</button>
            <button class="demo-button" id="filterCritical">Show Critical Only</button>
            <button class="demo-button" id="showAll">Show All</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
            incidents.loading = !incidents.loading;
          });
          
          controls.querySelector('#loadSuccess')?.addEventListener('click', () => {
            incidents.loading = true;
            setTimeout(() => {
              incidents.currentIncidents = [
                {
                  id: 'current-1',
                  title: 'Ongoing Investigation',
                  status: 'investigating',
                  severity: 'minor',
                  affectedServices: ['api-gateway'],
                  startTime: Date.now() - 30 * 60 * 1000,
                  impact: 'Elevated error rates on API endpoints.',
                  updates: [{
                    id: 'u-current',
                    timestamp: Date.now() - 30 * 60 * 1000,
                    status: 'investigating',
                    message: 'Investigating elevated error rates.',
                    author: 'API Team'
                  }]
                }
              ];
              incidents.pastIncidents = allIncidents;
              incidents.loading = false;
            }, 1000);
          });
          
          controls.querySelector('#loadError')?.addEventListener('click', () => {
            incidents.loading = true;
            setTimeout(() => {
              incidents.loading = false;
              incidents.currentIncidents = [];
              incidents.pastIncidents = [];
              incidents.errorMessage = 'Failed to load incident data';
            }, 1500);
          });
          
          controls.querySelector('#filterCritical')?.addEventListener('click', () => {
            incidents.pastIncidents = allIncidents.filter(i => i.severity === 'critical');
          });
          
          controls.querySelector('#showAll')?.addEventListener('click', () => {
            incidents.pastIncidents = allIncidents;
          });
          
          // Initial load after delay
          setTimeout(() => {
            incidents.currentIncidents = [];
            incidents.pastIncidents = allIncidents;
            incidents.loading = false;
          }, 2000);
        }}
      >
        <upl-statuspage-incidents></upl-statuspage-incidents>
      </dees-demowrapper>
    </div>

    <!-- Incident Subscription Demo -->
    <div class="demo-section">
      <div class="demo-title">Incident Subscription Management</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
          
          // Sample incidents with subscription
          const currentIncidents: IIncidentDetails[] = [
            {
              id: 'sub-001',
              title: 'Payment Gateway Intermittent Failures',
              status: 'monitoring',
              severity: 'major',
              affectedServices: ['payment-gateway', 'checkout'],
              startTime: Date.now() - 2 * 60 * 60 * 1000,
              impact: 'Some customers may experience payment failures during checkout',
              updates: [
                {
                  id: 'sub-u1',
                  timestamp: Date.now() - 2 * 60 * 60 * 1000,
                  status: 'investigating',
                  message: 'We are investigating reports of payment failures',
                  author: 'Payment Team'
                },
                {
                  id: 'sub-u2',
                  timestamp: Date.now() - 1 * 60 * 60 * 1000,
                  status: 'identified',
                  message: 'Issue identified with payment processor API rate limits',
                  author: 'Payment Team'
                },
                {
                  id: 'sub-u3',
                  timestamp: Date.now() - 30 * 60 * 1000,
                  status: 'monitoring',
                  message: 'Temporary fix applied, monitoring for stability',
                  author: 'Payment Team'
                }
              ]
            },
            {
              id: 'sub-002',
              title: 'Email Delivery Delays',
              status: 'identified',
              severity: 'minor',
              affectedServices: ['email-service'],
              startTime: Date.now() - 45 * 60 * 1000,
              impact: 'Transactional emails may be delayed by 5-10 minutes',
              updates: [
                {
                  id: 'sub-u4',
                  timestamp: Date.now() - 45 * 60 * 1000,
                  status: 'investigating',
                  message: 'Investigating email queue backlog',
                  author: 'Infrastructure Team'
                },
                {
                  id: 'sub-u5',
                  timestamp: Date.now() - 20 * 60 * 1000,
                  status: 'identified',
                  message: 'High volume causing queue delays, scaling up workers',
                  author: 'Infrastructure Team'
                }
              ]
            }
          ];
          
          incidents.currentIncidents = currentIncidents;
          incidents.pastIncidents = [];
          
          // Pre-subscribe to first incident
          incidents.subscribedIncidentIds = ['sub-001'];
          
          // Create subscription status display
          const statusDiv = document.createElement('div');
          statusDiv.className = 'subscription-status';
          statusDiv.style.cssText = `
            margin-top: 16px;
            padding: 16px;
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 6px;
            font-size: 14px;
          `;
          
          const updateStatus = () => {
            const subscribed = Array.from(incidents.subscribedIncidents || []);
            statusDiv.innerHTML = `
              <strong>Subscription Status:</strong><br>
              ${subscribed.length === 0 ? 
                'Not subscribed to any incidents' : 
                `Subscribed to ${subscribed.length} incident(s):<br>` +
                subscribed.map(id => {
                  const incident = currentIncidents.find(i => i.id === id);
                  return incident ? `• ${incident.title}` : '';
                }).filter(Boolean).join('<br>')}
            `;
          };
          
          updateStatus();
          wrapperElement.appendChild(statusDiv);
          
          // Handle subscription events
          incidents.addEventListener('incidentSubscribe', (event: CustomEvent) => {
            console.log('Subscribed:', event.detail);
            updateStatus();
            
            // Show notification
            const notification = document.createElement('div');
            notification.style.cssText = `
              position: fixed;
              top: 20px;
              right: 20px;
              padding: 16px;
              background: #10b981;
              color: white;
              border-radius: 6px;
              box-shadow: 0 4px 6px rgba(0,0,0,0.1);
              z-index: 1000;
              animation: slideIn 0.3s ease;
            `;
            notification.textContent = `✓ Subscribed to: ${event.detail.incidentTitle}`;
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 3000);
          });
          
          incidents.addEventListener('incidentUnsubscribe', (event: CustomEvent) => {
            console.log('Unsubscribed:', event.detail);
            updateStatus();
            
            // Show notification
            const notification = document.createElement('div');
            notification.style.cssText = `
              position: fixed;
              top: 20px;
              right: 20px;
              padding: 16px;
              background: #6b7280;
              color: white;
              border-radius: 6px;
              box-shadow: 0 4px 6px rgba(0,0,0,0.1);
              z-index: 1000;
              animation: slideIn 0.3s ease;
            `;
            notification.textContent = `Unsubscribed from: ${event.detail.incident.title}`;
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 3000);
          });
          
          // Add info text
          const infoDiv = document.createElement('div');
          infoDiv.style.cssText = `
            margin-top: 12px;
            padding: 12px;
            background: #f3f4f6;
            border-radius: 4px;
            font-size: 13px;
            color: #6b7280;
          `;
          infoDiv.innerHTML = `
            <strong>How it works:</strong><br>
            • Click on an incident to expand it<br>
            • Click "Subscribe to updates" to get notifications<br>
            • Subscribed incidents show a checkmark<br>
            • Click again to unsubscribe
          `;
          wrapperElement.appendChild(infoDiv);
        }}
      >
        <upl-statuspage-incidents></upl-statuspage-incidents>
      </dees-demowrapper>
    </div>
  </div>
`;