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

export const demoFunc = () => {
  return html`
  <dees-demowrapper>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 1400px;
          margin: 0 auto;
        }
        
        dees-panel {
          margin-bottom: 24px;
        }
        
        dees-panel:last-child {
          margin-bottom: 0;
        }
        
        .tile-config {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 16px;
          margin-top: 16px;
        }
        
        .config-section {
          padding: 16px;
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 6px;
        }
        
        .config-title {
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 8px;
          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
        }
        
        .config-description {
          font-size: 13px;
          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        }
        
        .code-block {
          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
          border-radius: 6px;
          padding: 16px;
          font-family: monospace;
          font-size: 13px;
          overflow-x: auto;
          white-space: pre;
        }
      `}
    </style>
    
    <div class="demo-container">
      <dees-panel .title=${'1. Comprehensive Dashboard'} .subtitle=${'Full-featured stats grid with various tile types, actions, and Lucide icons'}>
        <dees-statsgrid
          .tiles=${[
            {
              id: 'revenue',
              title: 'Total Revenue',
              value: 125420,
              unit: '$',
              type: 'number',
              icon: 'lucide:dollar-sign',
              description: '+12.5% from last month',
              actions: [
                {
                  name: 'View Details',
                  iconName: 'lucide:trending-up',
                  action: async () => {
                    const output = document.querySelector('#action-output');
                    if (output) {
                      output.textContent = 'Viewing revenue details: $125,420 (+12.5%)';
                    }
                  }
                },
                {
                  name: 'Export Data',
                  iconName: 'lucide:download',
                  action: async () => {
                    const output = document.querySelector('#action-output');
                    if (output) {
                      output.textContent = 'Exporting revenue data to CSV...';
                    }
                  }
                }
              ]
            },
            {
              id: 'users',
              title: 'Active Users',
              value: 3847,
              type: 'number',
              icon: 'lucide:users',
              description: '324 new this week',
              actions: [
                {
                  name: 'View User List',
                  iconName: 'lucide:list',
                  action: async () => {
                    const output = document.querySelector('#action-output');
                    if (output) {
                      output.textContent = 'Opening user list...';
                    }
                  }
                }
              ]
            },
            {
              id: 'cpu',
              title: 'CPU Usage',
              value: 73,
              unit: '%',
              type: 'gauge',
              icon: 'lucide:cpu',
              gaugeOptions: {
                min: 0,
                max: 100,
                thresholds: [
                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
                  { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
                ]
              }
            },
            {
              id: 'storage',
              title: 'Storage Used',
              value: 65,
              type: 'percentage',
              icon: 'lucide:hard-drive',
              description: '650 GB of 1 TB',
            },
            {
              id: 'latency',
              title: 'Response Time',
              value: 142,
              unit: 'ms',
              type: 'trend',
              icon: 'lucide:activity',
              trendData: [150, 145, 148, 142, 138, 140, 135, 145, 142],
              description: 'P95'
            },
            {
              id: 'uptime',
              title: 'System Uptime',
              value: '99.95%',
              type: 'text',
              icon: 'lucide:check-circle',
              color: 'hsl(142.1 76.2% 36.3%)',
              description: 'Last 30 days'
            }
          ]}
          .gridActions=${[
            {
              name: 'Refresh',
              iconName: 'lucide:refresh-cw',
              action: async () => {
                const grid = document.querySelector('dees-statsgrid');
                if (grid) {
                  grid.style.opacity = '0.5';
                  setTimeout(() => {
                    grid.style.opacity = '1';
                  }, 300);
                }
              }
            },
            {
              name: 'Export',
              iconName: 'lucide:share',
              action: async () => {
                const output = document.querySelector('#action-output');
                if (output) {
                  output.textContent = 'Exporting dashboard report...';
                }
              }
            },
            {
              name: 'Settings',
              iconName: 'lucide:settings',
              action: async () => {
                const output = document.querySelector('#action-output');
                if (output) {
                  output.textContent = 'Opening dashboard settings...';
                }
              }
            }
          ]}
          .minTileWidth=${250}
          .gap=${16}
        ></dees-statsgrid>
        
        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')}; border-radius: 6px; font-size: 14px; font-family: monospace; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};">
          <em>Click on tile actions or grid actions to see the result...</em>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'2. Tile Types'} .subtitle=${'Different visualization types available in the stats grid'}>
        <dees-statsgrid
          .tiles=${[
            {
              id: 'number-example',
              title: 'Number Tile',
              value: 42195,
              unit: '$',
              type: 'number',
              icon: 'lucide:hash',
              description: 'Simple numeric display'
            },
            {
              id: 'gauge-example',
              title: 'Gauge Tile',
              value: 68,
              unit: '%',
              type: 'gauge',
              icon: 'lucide:gauge',
              gaugeOptions: {
                min: 0,
                max: 100,
                thresholds: [
                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
                  { value: 50, color: 'hsl(45.4 93.4% 47.5%)' },
                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
                ]
              }
            },
            {
              id: 'percentage-example',
              title: 'Percentage Tile',
              value: 78,
              type: 'percentage',
              icon: 'lucide:percent',
              description: 'Progress bar visualization'
            },
            {
              id: 'trend-example',
              title: 'Trend Tile',
              value: 892,
              unit: 'ops/s',
              type: 'trend',
              icon: 'lucide:trending-up',
              trendData: [720, 750, 780, 795, 810, 835, 850, 865, 880, 892],
              description: 'avg'
            },
            {
              id: 'text-example',
              title: 'Text Tile',
              value: 'Operational',
              type: 'text',
              icon: 'lucide:info',
              color: 'hsl(142.1 76.2% 36.3%)',
              description: 'Status display'
            }
          ]}
          .minTileWidth=${280}
          .gap=${16}
        ></dees-statsgrid>
        
        <div class="tile-config">
          <div class="config-section">
            <div class="config-title">Configuration Options</div>
            <div class="config-description">
              Each tile type supports different properties:
              <ul style="margin: 8px 0; padding-left: 20px;">
                <li><strong>Number:</strong> value, unit, color, description</li>
                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>
                <li><strong>Percentage:</strong> value (0-100), color, description</li>
                <li><strong>Trend:</strong> value, unit, trendData array, description</li>
                <li><strong>Text:</strong> value (string), color, description</li>
              </ul>
            </div>
          </div>
        </div>
      </dees-panel>
      
      <dees-panel .title=${'3. Grid Configurations'} .subtitle=${'Different layout options and responsive behavior'}>
        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>
        <dees-statsgrid
          .tiles=${[
            { id: '1', title: 'Orders', value: 156, type: 'number', icon: 'lucide:shopping-cart' },
            { id: '2', title: 'Revenue', value: 8420, unit: '$', type: 'number', icon: 'lucide:dollar-sign' },
            { id: '3', title: 'Users', value: 423, type: 'number', icon: 'lucide:users' },
            { id: '4', title: 'Growth', value: 12.5, unit: '%', type: 'number', icon: 'lucide:trending-up', color: 'hsl(142.1 76.2% 36.3%)' }
          ]}
          .minTileWidth=${180}
          .gap=${12}
        ></dees-statsgrid>
        
        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>
        <dees-statsgrid
          .tiles=${[
            {
              id: 'spacious1',
              title: 'Monthly Revenue',
              value: 184500,
              unit: '$',
              type: 'number',
              icon: 'lucide:credit-card',
              description: 'Total revenue this month'
            },
            {
              id: 'spacious2',
              title: 'Customer Satisfaction',
              value: 94,
              type: 'percentage',
              icon: 'lucide:smile',
              description: 'Based on 1,234 reviews'
            },
            {
              id: 'spacious3',
              title: 'Server Response',
              value: 98,
              unit: 'ms',
              type: 'trend',
              icon: 'lucide:server',
              trendData: [105, 102, 100, 99, 98, 98, 97, 98],
              description: 'avg response time'
            }
          ]}
          .minTileWidth=${320}
          .gap=${20}
        ></dees-statsgrid>
      </dees-panel>
      
      <dees-panel .title=${'4. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
        <dees-statsgrid
          id="interactive-grid"
          .tiles=${[
            {
              id: 'live-cpu',
              title: 'Live CPU',
              value: 45,
              unit: '%',
              type: 'gauge',
              icon: 'lucide:cpu',
              gaugeOptions: {
                min: 0,
                max: 100,
                thresholds: [
                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
                  { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
                ]
              }
            },
            {
              id: 'live-requests',
              title: 'Requests/sec',
              value: 892,
              type: 'trend',
              icon: 'lucide:activity',
              trendData: [850, 860, 870, 880, 885, 890, 892]
            },
            {
              id: 'live-memory',
              title: 'Memory Usage',
              value: 62,
              type: 'percentage',
              icon: 'lucide:database'
            },
            {
              id: 'counter',
              title: 'Event Counter',
              value: 0,
              type: 'number',
              icon: 'lucide:zap',
              actions: [
                {
                  name: 'Increment',
                  iconName: 'lucide:plus',
                  action: async () => {
                    const grid = document.querySelector('#interactive-grid') as any;
                    if (!grid) return;
                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
                    tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1;
                    grid.tiles = [...grid.tiles];
                  }
                },
                {
                  name: 'Reset',
                  iconName: 'lucide:rotate-ccw',
                  action: async () => {
                    const grid = document.querySelector('#interactive-grid') as any;
                    if (!grid) return;
                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
                    tile.value = 0;
                    grid.tiles = [...grid.tiles];
                  }
                }
              ]
            }
          ]}
          .gridActions=${[
            {
              name: 'Start Live Updates',
              iconName: 'lucide:play',
              action: async function() {
                // Toggle live updates
                if (!(window as any).liveUpdateInterval) {
                  (window as any).liveUpdateInterval = setInterval(() => {
                    const grid = document.querySelector('#interactive-grid') as any;
                    if (grid) {
                      const tiles = [...grid.tiles];
                      
                      // Update CPU gauge
                      const cpuTile = tiles.find(t => t.id === 'live-cpu');
                      cpuTile.value = Math.max(0, Math.min(100, cpuTile.value + (Math.random() * 20 - 10)));
                      
                      // Update requests trend
                      const requestsTile = tiles.find(t => t.id === 'live-requests');
                      const newValue = requestsTile.value + Math.round(Math.random() * 50 - 25);
                      requestsTile.value = Math.max(800, newValue);
                      requestsTile.trendData = [...requestsTile.trendData.slice(1), requestsTile.value];
                      
                      // Update memory percentage
                      const memoryTile = tiles.find(t => t.id === 'live-memory');
                      memoryTile.value = Math.max(0, Math.min(100, memoryTile.value + (Math.random() * 10 - 5)));
                      
                      grid.tiles = tiles;
                    }
                  }, 1000);
                  
                  this.name = 'Stop Live Updates';
                  this.iconName = 'lucide:pause';
                } else {
                  clearInterval((window as any).liveUpdateInterval);
                  (window as any).liveUpdateInterval = null;
                  this.name = 'Start Live Updates';
                  this.iconName = 'lucide:play';
                }
              }
            }
          ]}
          .minTileWidth=${250}
          .gap=${16}
        ></dees-statsgrid>
      </dees-panel>
      
      <dees-panel .title=${'5. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
        <div class="code-block">${`const tiles: IStatsTile[] = [
  {
    id: 'revenue',
    title: 'Total Revenue',
    value: 125420,
    unit: '$',
    type: 'number',
    icon: 'lucide:dollar-sign',
    description: '+12.5% from last month',
    actions: [
      {
        name: 'View Details',
        iconName: 'lucide:trending-up',
        action: async () => {
          console.log('View revenue details');
        }
      }
    ]
  },
  {
    id: 'cpu',
    title: 'CPU Usage',
    value: 73,
    unit: '%',
    type: 'gauge',
    icon: 'lucide:cpu',
    gaugeOptions: {
      min: 0,
      max: 100,
      thresholds: [
        { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
        { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
        { value: 80, color: 'hsl(0 84.2% 60.2%)' }
      ]
    }
  }
];

// Render the stats grid
html\`
  <dees-statsgrid
    .tiles=\${tiles}
    .minTileWidth=\${250}
    .gap=\${16}
    .gridActions=\${[
      {
        name: 'Refresh',
        iconName: 'lucide:refresh-cw',
        action: async () => console.log('Refresh')
      }
    ]}
  ></dees-statsgrid>
\`;`}</div>
      </dees-panel>
    </div>
    
    <script>
      // Cleanup live updates on page unload
      window.addEventListener('beforeunload', () => {
        if ((window as any).liveUpdateInterval) {
          clearInterval((window as any).liveUpdateInterval);
        }
      });
    </script>
  </dees-demowrapper>
  `;
};