import { html, css } from '@design.estate/dees-element';
import type { DeesChartArea } from './dees-chart-area.js';
import '@design.estate/dees-wcctools/demotools';

export const demoFunc = () => {
  // Initial dataset values
  const initialDatasets = {
    system: {
      label: 'System Usage (%)',
      series: [
        {
          name: 'CPU',
          data: [
            { x: new Date(Date.now() - 300000).toISOString(), y: 25 },
            { x: new Date(Date.now() - 240000).toISOString(), y: 30 },
            { x: new Date(Date.now() - 180000).toISOString(), y: 28 },
            { x: new Date(Date.now() - 120000).toISOString(), y: 35 },
            { x: new Date(Date.now() - 60000).toISOString(), y: 32 },
            { x: new Date().toISOString(), y: 38 },
          ],
        },
        {
          name: 'Memory',
          data: [
            { x: new Date(Date.now() - 300000).toISOString(), y: 45 },
            { x: new Date(Date.now() - 240000).toISOString(), y: 48 },
            { x: new Date(Date.now() - 180000).toISOString(), y: 46 },
            { x: new Date(Date.now() - 120000).toISOString(), y: 52 },
            { x: new Date(Date.now() - 60000).toISOString(), y: 50 },
            { x: new Date().toISOString(), y: 55 },
          ],
        },
      ],
    },
  };
  
  const initialFormatters = {
    system: (val: number) => `${val}%`,
  };
  
  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Get the chart element
      const chartElement = elementArg.querySelector('dees-chart-area') as DeesChartArea;
      let intervalId: number;
      let currentDataset = 'system';

      // Y-axis formatters for different datasets
      const formatters = {
        system: (val: number) => `${val}%`,
        network: (val: number) => `${val} Mbps`,
        sales: (val: number) => `$${val.toLocaleString()}`,
      };

      // Different datasets to showcase
      const datasets = {
        system: {
          label: 'System Usage (%)',
          series: [
            {
              name: 'CPU',
              data: [
                { x: new Date(Date.now() - 300000).toISOString(), y: 25 },
                { x: new Date(Date.now() - 240000).toISOString(), y: 30 },
                { x: new Date(Date.now() - 180000).toISOString(), y: 28 },
                { x: new Date(Date.now() - 120000).toISOString(), y: 35 },
                { x: new Date(Date.now() - 60000).toISOString(), y: 32 },
                { x: new Date().toISOString(), y: 38 },
              ],
            },
            {
              name: 'Memory',
              data: [
                { x: new Date(Date.now() - 300000).toISOString(), y: 45 },
                { x: new Date(Date.now() - 240000).toISOString(), y: 48 },
                { x: new Date(Date.now() - 180000).toISOString(), y: 46 },
                { x: new Date(Date.now() - 120000).toISOString(), y: 52 },
                { x: new Date(Date.now() - 60000).toISOString(), y: 50 },
                { x: new Date().toISOString(), y: 55 },
              ],
            },
          ],
        },
        network: {
          label: 'Network Traffic (Mbps)',
          series: [
            {
              name: 'Download',
              data: [
                { x: new Date(Date.now() - 300000).toISOString(), y: 120 },
                { x: new Date(Date.now() - 240000).toISOString(), y: 150 },
                { x: new Date(Date.now() - 180000).toISOString(), y: 180 },
                { x: new Date(Date.now() - 120000).toISOString(), y: 165 },
                { x: new Date(Date.now() - 60000).toISOString(), y: 190 },
                { x: new Date().toISOString(), y: 175 },
              ],
            },
            {
              name: 'Upload',
              data: [
                { x: new Date(Date.now() - 300000).toISOString(), y: 25 },
                { x: new Date(Date.now() - 240000).toISOString(), y: 30 },
                { x: new Date(Date.now() - 180000).toISOString(), y: 35 },
                { x: new Date(Date.now() - 120000).toISOString(), y: 28 },
                { x: new Date(Date.now() - 60000).toISOString(), y: 32 },
                { x: new Date().toISOString(), y: 40 },
              ],
            },
          ],
        },
        sales: {
          label: 'Sales Analytics',
          series: [
            {
              name: 'Revenue',
              data: [
                { x: '2025-01-01', y: 45000 },
                { x: '2025-01-02', y: 52000 },
                { x: '2025-01-03', y: 48000 },
                { x: '2025-01-04', y: 61000 },
                { x: '2025-01-05', y: 58000 },
                { x: '2025-01-06', y: 65000 },
              ],
            },
            {
              name: 'Profit',
              data: [
                { x: '2025-01-01', y: 12000 },
                { x: '2025-01-02', y: 14000 },
                { x: '2025-01-03', y: 11000 },
                { x: '2025-01-04', y: 18000 },
                { x: '2025-01-05', y: 16000 },
                { x: '2025-01-06', y: 20000 },
              ],
            },
          ],
        },
      };

      // Generate random value within range
      const getRandomValue = (min: number, max: number) => {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      };

      // Add real-time data
      const addRealtimeData = () => {
        if (!chartElement) return;
        
        const newTimestamp = new Date().toISOString();
        
        // Generate new data points based on dataset type
        let newData: any[][] = [];
        
        if (currentDataset === 'system') {
          newData = [
            [{ x: newTimestamp, y: getRandomValue(25, 45) }], // CPU
            [{ x: newTimestamp, y: getRandomValue(45, 65) }], // Memory
          ];
        } else if (currentDataset === 'network') {
          newData = [
            [{ x: newTimestamp, y: getRandomValue(100, 250) }], // Download
            [{ x: newTimestamp, y: getRandomValue(20, 50) }], // Upload
          ];
        }
        
        // Keep only last 20 data points and update without animation
        const currentSeries = chartElement.series.map((series, index) => ({
          ...series,
          data: [...series.data.slice(-19), ...(newData[index] || [])],
        }));
        
        // Update without animation for smoother real-time updates
        chartElement.updateSeries(currentSeries, false);
      };

      // Switch dataset
      const switchDataset = (name: string) => {
        currentDataset = name;
        const dataset = datasets[name];
        chartElement.label = dataset.label;
        chartElement.series = dataset.series;
        chartElement.yAxisFormatter = formatters[name];
      };

      // Start/stop real-time updates
      const startRealtime = () => {
        if (!intervalId && (currentDataset === 'system' || currentDataset === 'network')) {
          // Disable animations for real-time mode
          chartElement.updateOptions({
            chart: {
              animations: {
                enabled: false
              }
            }
          }, false, false);
          
          intervalId = window.setInterval(() => addRealtimeData(), 2000);
        }
      };

      const stopRealtime = () => {
        if (intervalId) {
          window.clearInterval(intervalId);
          intervalId = null;
          
          // Re-enable animations when stopping real-time
          chartElement.updateOptions({
            chart: {
              animations: {
                enabled: true,
                speed: 400,
                animateGradually: {
                  enabled: true,
                  delay: 150
                }
              }
            }
          }, false, true);
        }
      };

      // Randomize current data
      const randomizeData = () => {
        const currentSeries = chartElement.series.map(series => ({
          ...series,
          data: series.data.map((point: any) => ({
            ...point,
            y: typeof point.y === 'number' 
              ? Math.round(point.y * (0.8 + Math.random() * 0.4)) // +/- 20% variation
              : point.y,
          })),
        }));
        
        // Update with animation for single updates
        chartElement.updateSeries(currentSeries, true);
      };

      // Wire up button click handlers
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach(button => {
        const text = button.textContent?.trim();
        if (text === 'System Usage') {
          button.addEventListener('click', () => switchDataset('system'));
        } else if (text === 'Network Traffic') {
          button.addEventListener('click', () => switchDataset('network'));
        } else if (text === 'Sales Data') {
          button.addEventListener('click', () => switchDataset('sales'));
        } else if (text === 'Start Live') {
          button.addEventListener('click', () => startRealtime());
        } else if (text === 'Stop Live') {
          button.addEventListener('click', () => stopRealtime());
        } else if (text === 'Randomize Values') {
          button.addEventListener('click', () => randomizeData());
        } else if (text === 'Add Point') {
          button.addEventListener('click', () => addRealtimeData());
        }
      });
      
      // Update button states based on current dataset
      const updateButtonStates = () => {
        const buttons = elementArg.querySelectorAll('dees-button');
        buttons.forEach(button => {
          const text = button.textContent?.trim();
          if (text === 'System Usage') {
            button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
          } else if (text === 'Network Traffic') {
            button.type = currentDataset === 'network' ? 'highlighted' : 'normal';
          } else if (text === 'Sales Data') {
            button.type = currentDataset === 'sales' ? 'highlighted' : 'normal';
          }
        });
      };
      
      // Update button states when dataset changes
      const originalSwitchDataset = switchDataset;
      const switchDatasetWithButtonUpdate = (name: string) => {
        originalSwitchDataset(name);
        updateButtonStates();
      };
      
      // Replace switchDataset with the one that updates buttons
      buttons.forEach(button => {
        const text = button.textContent?.trim();
        if (text === 'System Usage') {
          button.removeEventListener('click', () => switchDataset('system'));
          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
        } else if (text === 'Network Traffic') {
          button.removeEventListener('click', () => switchDataset('network'));
          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
        } else if (text === 'Sales Data') {
          button.removeEventListener('click', () => switchDataset('sales'));
          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
        }
      });
    }}>
      <style>
        ${css`
        .demoBox {
          position: relative;
          background: #000000;
          height: 100%;
          width: 100%;
          padding: 40px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          gap: 24px;
        }
        
        .controls {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-bottom: 8px;
        }
        
        .chart-container {
          flex: 1;
          min-height: 400px;
        }
        
        .info {
          color: #666;
          font-size: 11px;
          font-family: 'Geist Sans', sans-serif;
          text-align: center;
          margin-top: 8px;
        }
      `}
    </style>
    <div class="demoBox">
      <div class="controls">
        <dees-button-group label="Dataset:">
          <dees-button type="highlighted">System Usage</dees-button>
          <dees-button>Network Traffic</dees-button>
          <dees-button>Sales Data</dees-button>
        </dees-button-group>
        
        <dees-button-group label="Real-time:">
          <dees-button>Start Live</dees-button>
          <dees-button>Stop Live</dees-button>
        </dees-button-group>
        
        <dees-button-group label="Actions:">
          <dees-button>Randomize Values</dees-button>
          <dees-button>Add Point</dees-button>
        </dees-button-group>
      </div>
      
      <div class="chart-container">
        <dees-chart-area
          .label=${initialDatasets.system.label}
          .series=${initialDatasets.system.series}
          .yAxisFormatter=${initialFormatters.system}
        ></dees-chart-area>
      </div>
      
      <div class="info">
        Real-time updates work with System Usage and Network Traffic datasets • 
        Chart updates every 2 seconds when live mode is active • 
        Try switching datasets and randomizing values
      </div>
    </div>
    </dees-demowrapper>
  `;
};