import { html, css, cssManager } from '@design.estate/dees-element';
import type { DeesChartGauge } from './component.js';
import '@design.estate/dees-wcctools/demotools';
import './component.js';

export const demoFunc = () => {
  const defaultThresholds = [
    { value: 60, color: 'hsl(142 76% 36%)' },
    { value: 80, color: 'hsl(38 92% 50%)' },
    { value: 100, color: 'hsl(0 72% 50%)' },
  ];

  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      const cpuGauge = elementArg.querySelector('#cpu-gauge') as DeesChartGauge;
      const memGauge = elementArg.querySelector('#mem-gauge') as DeesChartGauge;
      const slaGauge = elementArg.querySelector('#sla-gauge') as DeesChartGauge;

      let animInterval: number | null = null;

      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button: any) => {
        const text = button.text?.trim();
        if (text === 'Animate') {
          button.addEventListener('click', () => {
            if (animInterval) return;
            animInterval = window.setInterval(() => {
              cpuGauge.value = Math.round(30 + Math.random() * 60);
              memGauge.value = Math.round(40 + Math.random() * 50);
              slaGauge.value = Math.round((95 + Math.random() * 5) * 100) / 100;
            }, 2000);
          });
        } else if (text === 'Stop') {
          button.addEventListener('click', () => {
            if (animInterval) {
              window.clearInterval(animInterval);
              animInterval = null;
            }
          });
        } else if (text === 'Spike') {
          button.addEventListener('click', () => {
            cpuGauge.value = 95;
            memGauge.value = 88;
            slaGauge.value = 96.5;
          });
        }
      });
    }}>
      <style>
        ${css`
          .demoBox {
            position: relative;
            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
            height: 100%;
            width: 100%;
            padding: 40px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 24px;
          }
          .gaugeRow {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 24px;
          }
          .controls {
            display: flex;
            gap: 12px;
            margin-bottom: 8px;
          }
          .info {
            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
            font-size: 12px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
            text-align: center;
            margin-top: 8px;
          }
        `}
      </style>
      <div class="demoBox">
        <div class="controls">
          <dees-button-group label="Actions:">
            <dees-button>Animate</dees-button>
            <dees-button>Stop</dees-button>
            <dees-button>Spike</dees-button>
          </dees-button-group>
        </div>

        <div class="gaugeRow">
          <dees-chart-gauge
            id="cpu-gauge"
            .label=${'CPU Usage'}
            .value=${42}
            .unit=${'%'}
            .thresholds=${defaultThresholds}
          ></dees-chart-gauge>

          <dees-chart-gauge
            id="mem-gauge"
            .label=${'Memory Usage'}
            .value=${67}
            .unit=${'%'}
            .thresholds=${defaultThresholds}
          ></dees-chart-gauge>

          <dees-chart-gauge
            id="sla-gauge"
            .label=${'SLA Uptime'}
            .value=${99.8}
            .min=${95}
            .max=${100}
            .unit=${'%'}
            .showTicks=${true}
          ></dees-chart-gauge>
        </div>

        <div class="info">
          Gauge chart with animated value transitions and threshold coloring •
          Click 'Animate' for live updates, 'Spike' to simulate high load
        </div>
      </div>
    </dees-demowrapper>
  `;
};