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

export const demoFunc = () => {
  const indicators = [
    { name: 'Latency', max: 100 },
    { name: 'Throughput', max: 100 },
    { name: 'Availability', max: 100 },
    { name: 'Error Rate', max: 100 },
    { name: 'Saturation', max: 100 },
    { name: 'Security', max: 100 },
  ];

  const series = [
    { name: 'Service A', values: [85, 90, 99, 12, 45, 78] },
    { name: 'Service B', values: [70, 65, 95, 28, 60, 90] },
  ];

  const singleIndicators = [
    { name: 'Speed', max: 10 },
    { name: 'Reliability', max: 10 },
    { name: 'Comfort', max: 10 },
    { name: 'Safety', max: 10 },
    { name: 'Cost', max: 10 },
  ];

  const singleSeries = [
    { name: 'Rating', values: [8.5, 9.2, 7.0, 9.5, 6.0] },
  ];

  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      const compChart = elementArg.querySelector('#comparison-chart') as DeesChartRadar;
      const singleChart = elementArg.querySelector('#single-chart') as DeesChartRadar;

      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button: any) => {
        const text = button.text?.trim();
        if (text === 'Randomize') {
          button.addEventListener('click', () => {
            compChart.series = series.map((s) => ({
              ...s,
              values: s.values.map(() => Math.round(20 + Math.random() * 80)),
            }));
            singleChart.series = singleSeries.map((s) => ({
              ...s,
              values: s.values.map(() => Math.round((2 + Math.random() * 8) * 10) / 10),
            }));
          });
        }
      });
    }}>
      <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;
          }
          .chartRow {
            display: grid;
            grid-template-columns: 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>Randomize</dees-button>
          </dees-button-group>
        </div>

        <div class="chartRow">
          <dees-chart-radar
            id="comparison-chart"
            .label=${'Service Health Comparison'}
            .indicators=${indicators}
            .series=${series}
          ></dees-chart-radar>

          <dees-chart-radar
            id="single-chart"
            .label=${'Product Rating'}
            .indicators=${singleIndicators}
            .series=${singleSeries}
            .fillArea=${true}
          ></dees-chart-radar>
        </div>

        <div class="info">
          Radar chart for multi-dimensional comparison •
          Supports multiple overlay series and configurable fill •
          Click 'Randomize' to update data
        </div>
      </div>
    </dees-demowrapper>
  `;
};