import { html } from '@design.estate/dees-element';
import type { IOverallStatus } 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;
    }
    .status-info {
      margin-top: 12px;
      padding: 12px;
      background: white;
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.6;
    }
  </style>

  <div class="demo-container">
    <!-- Cycling Through All States -->
    <div class="demo-section">
      <div class="demo-title">Automatic Status Cycling</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
          
          const statusStates: IOverallStatus[] = [
            {
              status: 'operational',
              message: 'All Systems Operational',
              lastUpdated: Date.now(),
              affectedServices: 0,
              totalServices: 12
            },
            {
              status: 'degraded',
              message: 'Minor Service Degradation',
              lastUpdated: Date.now(),
              affectedServices: 2,
              totalServices: 12
            },
            {
              status: 'partial_outage',
              message: 'Partial System Outage',
              lastUpdated: Date.now(),
              affectedServices: 4,
              totalServices: 12
            },
            {
              status: 'major_outage',
              message: 'Major Service Disruption',
              lastUpdated: Date.now(),
              affectedServices: 8,
              totalServices: 12
            },
            {
              status: 'maintenance',
              message: 'Scheduled Maintenance in Progress',
              lastUpdated: Date.now(),
              affectedServices: 3,
              totalServices: 12
            }
          ];
          
          let statusIndex = 0;
          
          // Initial loading demo
          statusBar.loading = true;
          setTimeout(() => {
            statusBar.loading = false;
            statusBar.overallStatus = statusStates[0];
          }, 1500);
          
          // Cycle through states
          setInterval(() => {
            statusIndex = (statusIndex + 1) % statusStates.length;
            statusBar.overallStatus = statusStates[statusIndex];
            statusBar.overallStatus = { ...statusBar.overallStatus, lastUpdated: Date.now() };
          }, 3000);
          
          // Handle clicks
          statusBar.addEventListener('statusClick', (event: CustomEvent) => {
            console.log('Status bar clicked:', event.detail);
            alert(`Status Details:\n\nStatus: ${event.detail.status.status}\nMessage: ${event.detail.status.message}\nAffected Services: ${event.detail.status.affectedServices}`);
          });
        }}
      >
        <upl-statuspage-statusbar></upl-statuspage-statusbar>
      </dees-demowrapper>
    </div>

    <!-- Manual Status Control -->
    <div class="demo-section">
      <div class="demo-title">Manual Status Control</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
          
          // Initial state
          statusBar.overallStatus = {
            status: 'operational',
            message: 'All Systems Operational',
            lastUpdated: Date.now(),
            affectedServices: 0,
            totalServices: 15
          };
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" data-status="operational">Operational</button>
            <button class="demo-button" data-status="degraded">Degraded</button>
            <button class="demo-button" data-status="partial_outage">Partial Outage</button>
            <button class="demo-button" data-status="major_outage">Major Outage</button>
            <button class="demo-button" data-status="maintenance">Maintenance</button>
          `;
          wrapperElement.appendChild(controls);
          
          // Status messages
          const statusMessages = {
            operational: 'All Systems Operational',
            degraded: 'Performance Issues Detected',
            partial_outage: 'Some Services Unavailable',
            major_outage: 'Critical System Failure',
            maintenance: 'Planned Maintenance Window'
          };
          
          const affectedCounts = {
            operational: 0,
            degraded: 3,
            partial_outage: 7,
            major_outage: 12,
            maintenance: 5
          };
          
          // Handle button clicks
          controls.querySelectorAll('.demo-button').forEach(button => {
            button.addEventListener('click', () => {
              const status = button.getAttribute('data-status') as keyof typeof statusMessages;
              statusBar.overallStatus = {
                status: status as any,
                message: statusMessages[status],
                lastUpdated: Date.now(),
                affectedServices: affectedCounts[status],
                totalServices: 15
              };
            });
          });
        }}
      >
        <upl-statuspage-statusbar></upl-statuspage-statusbar>
      </dees-demowrapper>
    </div>

    <!-- Loading States -->
    <div class="demo-section">
      <div class="demo-title">Loading and Refresh States</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
          
          // Initial loading
          statusBar.loading = true;
          
          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="refresh">Refresh Status</button>
            <button class="demo-button" id="simulateError">Simulate Error</button>
          `;
          wrapperElement.appendChild(controls);
          
          // Set initial status after loading
          setTimeout(() => {
            statusBar.loading = false;
            statusBar.overallStatus = {
              status: 'operational',
              message: 'All Systems Operational',
              lastUpdated: Date.now(),
              affectedServices: 0,
              totalServices: 10
            };
          }, 2000);
          
          // Toggle loading
          controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
            statusBar.loading = !statusBar.loading;
          });
          
          // Refresh simulation
          controls.querySelector('#refresh')?.addEventListener('click', () => {
            statusBar.loading = true;
            setTimeout(() => {
              statusBar.loading = false;
              // Simulate random status after refresh
              const statuses = ['operational', 'degraded', 'partial_outage'];
              const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
              statusBar.overallStatus = {
                status: randomStatus as any,
                message: 'Status refreshed at ' + new Date().toLocaleTimeString(),
                lastUpdated: Date.now(),
                affectedServices: randomStatus === 'operational' ? 0 : Math.floor(Math.random() * 5) + 1,
                totalServices: 10
              };
            }, 1000);
          });
          
          // Error simulation
          controls.querySelector('#simulateError')?.addEventListener('click', () => {
            statusBar.loading = true;
            setTimeout(() => {
              statusBar.loading = false;
              statusBar.overallStatus = {
                status: 'major_outage',
                message: 'Unable to fetch status - Connection Error',
                lastUpdated: Date.now(),
                affectedServices: -1, // Unknown
                totalServices: -1
              };
            }, 1500);
          });
        }}
      >
        <upl-statuspage-statusbar></upl-statuspage-statusbar>
      </dees-demowrapper>
    </div>

    <!-- Edge Cases -->
    <div class="demo-section">
      <div class="demo-title">Edge Cases and Special States</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
          
          const edgeCases = [
            {
              label: 'No Services',
              status: {
                status: 'operational',
                message: 'No services to monitor',
                lastUpdated: Date.now(),
                affectedServices: 0,
                totalServices: 0
              }
            },
            {
              label: 'All Services Down',
              status: {
                status: 'major_outage',
                message: 'Complete System Failure',
                lastUpdated: Date.now(),
                affectedServices: 25,
                totalServices: 25
              }
            },
            {
              label: 'Very Long Message',
              status: {
                status: 'degraded',
                message: 'Multiple services experiencing degraded performance due to increased load from seasonal traffic surge',
                lastUpdated: Date.now(),
                affectedServices: 7,
                totalServices: 20
              }
            },
            {
              label: 'Old Timestamp',
              status: {
                status: 'operational',
                message: 'Status data may be stale',
                lastUpdated: Date.now() - 24 * 60 * 60 * 1000, // 24 hours ago
                affectedServices: 0,
                totalServices: 10
              }
            },
            {
              label: 'Future Maintenance',
              status: {
                status: 'maintenance',
                message: 'Scheduled maintenance starting in 2 hours',
                lastUpdated: Date.now(),
                affectedServices: 0,
                totalServices: 15
              }
            }
          ];
          
          let currentCase = 0;
          statusBar.overallStatus = edgeCases[0].status;
          
          // Create info display
          const info = document.createElement('div');
          info.className = 'status-info';
          info.innerHTML = `<strong>Current Case:</strong> ${edgeCases[0].label}`;
          wrapperElement.appendChild(info);
          
          // Create controls
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="prevCase">← Previous Case</button>
            <button class="demo-button" id="nextCase">Next Case →</button>
          `;
          wrapperElement.appendChild(controls);
          
          const updateCase = (index: number) => {
            currentCase = index;
            statusBar.overallStatus = edgeCases[currentCase].status;
            info.innerHTML = `<strong>Current Case:</strong> ${edgeCases[currentCase].label}`;
          };
          
          controls.querySelector('#prevCase')?.addEventListener('click', () => {
            const newIndex = (currentCase - 1 + edgeCases.length) % edgeCases.length;
            updateCase(newIndex);
          });
          
          controls.querySelector('#nextCase')?.addEventListener('click', () => {
            const newIndex = (currentCase + 1) % edgeCases.length;
            updateCase(newIndex);
          });
        }}
      >
        <upl-statuspage-statusbar></upl-statuspage-statusbar>
      </dees-demowrapper>
    </div>

    <!-- Non-Expandable Status Bar -->
    <div class="demo-section">
      <div class="demo-title">Non-Expandable Status Bar</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
          
          // Disable expandable behavior
          statusBar.expandable = false;
          
          statusBar.overallStatus = {
            status: 'operational',
            message: 'This status bar cannot be clicked',
            lastUpdated: Date.now(),
            affectedServices: 0,
            totalServices: 8
          };
          
          // This event won't fire since expandable is false
          statusBar.addEventListener('statusClick', (event: CustomEvent) => {
            console.log('This should not fire');
          });
          
          const info = document.createElement('div');
          info.className = 'status-info';
          info.innerHTML = 'Try clicking the status bar - it should not respond to clicks when expandable=false';
          wrapperElement.appendChild(info);
        }}
      >
        <upl-statuspage-statusbar></upl-statuspage-statusbar>
      </dees-demowrapper>
    </div>
  </div>
`;