import { html } from '@design.estate/dees-element';

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;
    }
  </style>

  <div class="demo-container">
    <!-- Normal Operation -->
    <div class="demo-section">
      <div class="demo-title">Normal Operation</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
          
          // Set initial values
          statsGrid.currentStatus = 'operational';
          statsGrid.uptime = 99.95;
          statsGrid.avgResponseTime = 125;
          statsGrid.totalIncidents = 0;
          statsGrid.affectedServices = 0;
          statsGrid.totalServices = 12;
          statsGrid.timePeriod = '90 days';
        }}
      >
        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
      </dees-demowrapper>
    </div>

    <!-- Degraded Performance -->
    <div class="demo-section">
      <div class="demo-title">Degraded Performance</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
          
          statsGrid.currentStatus = 'degraded';
          statsGrid.uptime = 98.50;
          statsGrid.avgResponseTime = 450;
          statsGrid.totalIncidents = 3;
          statsGrid.affectedServices = 2;
          statsGrid.totalServices = 12;
          statsGrid.timePeriod = '30 days';
        }}
      >
        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
      </dees-demowrapper>
    </div>

    <!-- Major Outage -->
    <div class="demo-section">
      <div class="demo-title">Major Outage</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
          
          statsGrid.currentStatus = 'major_outage';
          statsGrid.uptime = 95.20;
          statsGrid.avgResponseTime = 1250;
          statsGrid.totalIncidents = 8;
          statsGrid.affectedServices = 7;
          statsGrid.totalServices = 12;
          statsGrid.timePeriod = '7 days';
        }}
      >
        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
      </dees-demowrapper>
    </div>

    <!-- Interactive Demo -->
    <div class="demo-section">
      <div class="demo-title">Interactive Demo</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
          
          // Initial state
          statsGrid.currentStatus = 'operational';
          statsGrid.uptime = 99.99;
          statsGrid.avgResponseTime = 85;
          statsGrid.totalIncidents = 0;
          statsGrid.affectedServices = 0;
          statsGrid.totalServices = 15;
          statsGrid.timePeriod = '90 days';
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          // Status buttons
          const statuses = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
          statuses.forEach((status, index) => {
            const button = document.createElement('button');
            button.className = 'demo-button' + (index === 0 ? ' active' : '');
            button.textContent = status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
            button.onclick = () => {
              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
              button.classList.add('active');
              
              statsGrid.currentStatus = status;
              
              // Adjust other values based on status
              switch (status) {
                case 'operational':
                  statsGrid.uptime = 99.99;
                  statsGrid.avgResponseTime = 85;
                  statsGrid.totalIncidents = 0;
                  statsGrid.affectedServices = 0;
                  break;
                case 'degraded':
                  statsGrid.uptime = 98.50;
                  statsGrid.avgResponseTime = 350;
                  statsGrid.totalIncidents = 2;
                  statsGrid.affectedServices = 1;
                  break;
                case 'partial_outage':
                  statsGrid.uptime = 97.00;
                  statsGrid.avgResponseTime = 750;
                  statsGrid.totalIncidents = 5;
                  statsGrid.affectedServices = 3;
                  break;
                case 'major_outage':
                  statsGrid.uptime = 94.50;
                  statsGrid.avgResponseTime = 1500;
                  statsGrid.totalIncidents = 10;
                  statsGrid.affectedServices = 8;
                  break;
                case 'maintenance':
                  statsGrid.uptime = 99.00;
                  statsGrid.avgResponseTime = 150;
                  statsGrid.totalIncidents = 1;
                  statsGrid.affectedServices = 2;
                  break;
              }
            };
            controls.appendChild(button);
          });
          
          wrapperElement.appendChild(controls);
          
          // Add time period selector
          const timePeriodControls = document.createElement('div');
          timePeriodControls.className = 'demo-controls';
          timePeriodControls.style.marginTop = '10px';
          
          const periods = ['24 hours', '7 days', '30 days', '90 days'];
          periods.forEach((period, index) => {
            const button = document.createElement('button');
            button.className = 'demo-button' + (index === 3 ? ' active' : '');
            button.textContent = period;
            button.onclick = () => {
              timePeriodControls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
              button.classList.add('active');
              statsGrid.timePeriod = period;
            };
            timePeriodControls.appendChild(button);
          });
          
          wrapperElement.appendChild(timePeriodControls);
        }}
      >
        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
      </dees-demowrapper>
    </div>

    <!-- Loading State -->
    <div class="demo-section">
      <div class="demo-title">Loading State</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
          statsGrid.loading = true;
          
          // Create toggle button
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          const toggleButton = document.createElement('button');
          toggleButton.className = 'demo-button';
          toggleButton.textContent = 'Toggle Loading';
          toggleButton.onclick = () => {
            statsGrid.loading = !statsGrid.loading;
            if (!statsGrid.loading) {
              statsGrid.currentStatus = 'operational';
              statsGrid.uptime = 99.95;
              statsGrid.avgResponseTime = 125;
              statsGrid.totalIncidents = 0;
              statsGrid.affectedServices = 0;
              statsGrid.totalServices = 12;
            }
          };
          controls.appendChild(toggleButton);
          
          wrapperElement.appendChild(controls);
        }}
      >
        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
      </dees-demowrapper>
    </div>

    <!-- Real-time Updates -->
    <div class="demo-section">
      <div class="demo-title">Real-time Updates</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
          
          // Initial values
          statsGrid.currentStatus = 'operational';
          statsGrid.uptime = 99.95;
          statsGrid.avgResponseTime = 100;
          statsGrid.totalIncidents = 0;
          statsGrid.affectedServices = 0;
          statsGrid.totalServices = 10;
          statsGrid.timePeriod = '24 hours';
          
          // Simulate real-time updates
          let interval = setInterval(() => {
            // Slight variations in response time
            statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
            
            // Occasionally change status
            if (Math.random() < 0.1) {
              const statuses = ['operational', 'degraded'];
              statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
              
              if (statsGrid.currentStatus === 'degraded') {
                statsGrid.avgResponseTime = Math.floor(300 + Math.random() * 200);
                statsGrid.totalIncidents = Math.min(statsGrid.totalIncidents + 1, 5);
                statsGrid.affectedServices = Math.min(Math.floor(Math.random() * 3) + 1, statsGrid.totalServices);
                statsGrid.uptime = Math.max(99.0, statsGrid.uptime - 0.05);
              } else {
                statsGrid.affectedServices = 0;
              }
            }
          }, 2000);
          
          // Add control button
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          
          const toggleButton = document.createElement('button');
          toggleButton.className = 'demo-button active';
          toggleButton.textContent = 'Stop Updates';
          toggleButton.onclick = () => {
            if (interval) {
              clearInterval(interval);
              interval = null;
              toggleButton.textContent = 'Start Updates';
              toggleButton.classList.remove('active');
            } else {
              interval = setInterval(() => {
                statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
                if (Math.random() < 0.1) {
                  const statuses = ['operational', 'degraded'];
                  statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
                }
              }, 2000);
              toggleButton.textContent = 'Stop Updates';
              toggleButton.classList.add('active');
            }
          };
          controls.appendChild(toggleButton);
          
          wrapperElement.appendChild(controls);
          
          // Cleanup on unmount
          wrapperElement.addEventListener('remove', () => {
            if (interval) clearInterval(interval);
          });
        }}
      >
        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
      </dees-demowrapper>
    </div>
  </div>
`;