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

export const demoFunc = () => {
  const diskData = [
    { name: 'Documents', value: 42 },
    { name: 'Media', value: 28 },
    { name: 'Applications', value: 15 },
    { name: 'System', value: 10 },
    { name: 'Other', value: 5 },
  ];

  const statusData = [
    { name: 'Healthy', value: 156 },
    { name: 'Warning', value: 23 },
    { name: 'Critical', value: 8 },
    { name: 'Unknown', value: 3 },
  ];

  const trafficData = [
    { name: 'API', value: 45200 },
    { name: 'Static Assets', value: 23100 },
    { name: 'WebSocket', value: 12800 },
    { name: 'GraphQL', value: 8900 },
  ];

  return html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      const diskChart = elementArg.querySelector('#disk-chart') as DeesChartDonut;
      const statusChart = elementArg.querySelector('#status-chart') as DeesChartDonut;
      const trafficChart = elementArg.querySelector('#traffic-chart') as DeesChartDonut;

      // Wire up buttons
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach((button: any) => {
        const text = button.text?.trim();
        if (text === 'Randomize') {
          button.addEventListener('click', () => {
            diskChart.data = diskData.map((d) => ({
              ...d,
              value: Math.round(d.value * (0.5 + Math.random())),
            }));
            statusChart.data = statusData.map((d) => ({
              ...d,
              value: Math.round(d.value * (0.3 + Math.random() * 1.4)),
            }));
            trafficChart.data = trafficData.map((d) => ({
              ...d,
              value: Math.round(d.value * (0.5 + Math.random())),
            }));
          });
        }
      });
    }}>
      <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-donut
            id="disk-chart"
            .label=${'Disk Usage (GB)'}
            .data=${diskData}
            .valueFormatter=${(val: number) => `${val} GB`}
          ></dees-chart-donut>

          <dees-chart-donut
            id="status-chart"
            .label=${'Service Status'}
            .data=${statusData}
            .valueFormatter=${(val: number) => `${val} services`}
            .innerRadiusPercent=${'0%'}
          ></dees-chart-donut>
        </div>

        <dees-chart-donut
          id="traffic-chart"
          .label=${'Traffic Distribution'}
          .data=${trafficData}
          .valueFormatter=${(val: number) => `${(val / 1000).toFixed(1)}k req`}
        ></dees-chart-donut>

        <div class="info">
          Donut chart with configurable inner radius (set to 0% for full pie) •
          Click 'Randomize' to update data with animation
        </div>
      </div>
    </dees-demowrapper>
  `;
};