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

export const demoFunc = () => {
  // Demo data with different tile types
  const demoTiles: IStatsTile[] = [
    {
      id: 'revenue',
      title: 'Total Revenue',
      value: 125420,
      unit: '$',
      type: 'number',
      icon: 'faDollarSign',
      description: '+12.5% from last month',
      color: '#22c55e',
      actions: [
        {
          name: 'View Details',
          iconName: 'faChartLine',
          action: async () => {
            console.log('Viewing revenue details for tile:', 'revenue');
            console.log('Current value:', 125420);
            alert(`Revenue Details: $125,420 (+12.5%)`);
          }
        },
        {
          name: 'Export Data',
          iconName: 'faFileExport',
          action: async () => {
            console.log('Exporting revenue data');
            alert('Revenue data exported to CSV');
          }
        }
      ]
    },
    {
      id: 'users',
      title: 'Active Users',
      value: 3847,
      type: 'number',
      icon: 'faUsers',
      description: '324 new this week',
      actions: [
        {
          name: 'View User List',
          iconName: 'faList',
          action: async () => {
            console.log('Viewing user list');
          }
        }
      ]
    },
    {
      id: 'cpu',
      title: 'CPU Usage',
      value: 73,
      type: 'gauge',
      icon: 'faMicrochip',
      gaugeOptions: {
        min: 0,
        max: 100,
        thresholds: [
          { value: 0, color: '#22c55e' },
          { value: 60, color: '#f59e0b' },
          { value: 80, color: '#ef4444' }
        ]
      }
    },
    {
      id: 'storage',
      title: 'Storage Used',
      value: 65,
      type: 'percentage',
      icon: 'faHardDrive',
      description: '650 GB of 1 TB',
      color: '#3b82f6'
    },
    {
      id: 'memory',
      title: 'Memory Usage',
      value: 45,
      type: 'gauge',
      icon: 'faMemory',
      gaugeOptions: {
        min: 0,
        max: 100,
        thresholds: [
          { value: 0, color: '#22c55e' },
          { value: 70, color: '#f59e0b' },
          { value: 90, color: '#ef4444' }
        ]
      }
    },
    {
      id: 'requests',
      title: 'API Requests',
      value: '1.2k',
      unit: '/min',
      type: 'trend',
      icon: 'faServer',
      trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
    },
    {
      id: 'uptime',
      title: 'System Uptime',
      value: '99.95%',
      type: 'text',
      icon: 'faCheckCircle',
      color: '#22c55e',
      description: 'Last 30 days'
    },
    {
      id: 'latency',
      title: 'Response Time',
      value: 142,
      unit: 'ms',
      type: 'trend',
      icon: 'faClock',
      trendData: [150, 145, 148, 142, 138, 140, 135, 145, 142],
      description: 'P95 latency'
    },
    {
      id: 'errors',
      title: 'Error Rate',
      value: 0.03,
      unit: '%',
      type: 'number',
      icon: 'faExclamationTriangle',
      color: '#ef4444',
      actions: [
        {
          name: 'View Error Logs',
          iconName: 'faFileAlt',
          action: async () => {
            console.log('Viewing error logs');
          }
        }
      ]
    }
  ];

  // Grid actions for the demo
  const gridActions = [
    {
      name: 'Refresh',
      iconName: 'faSync',
      action: async () => {
        console.log('Refreshing stats...');
        // Simulate refresh animation
        const grid = document.querySelector('dees-statsgrid');
        if (grid) {
          grid.style.opacity = '0.5';
          setTimeout(() => {
            grid.style.opacity = '1';
          }, 500);
        }
      }
    },
    {
      name: 'Export Report',
      iconName: 'faFileExport',
      action: async () => {
        console.log('Exporting stats report...');
      }
    },
    {
      name: 'Settings',
      iconName: 'faCog',
      action: async () => {
        console.log('Opening settings...');
      }
    }
  ];

  return html`
    <style>
      .demo-container {
        padding: 32px;
        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
        min-height: 100vh;
      }

      .demo-section {
        margin-bottom: 48px;
      }

      .demo-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }

      .demo-description {
        font-size: 14px;
        color: ${cssManager.bdTheme('#666', '#aaa')};
        margin-bottom: 24px;
      }

      .theme-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        padding: 8px 16px;
        background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
        border-radius: 8px;
        cursor: pointer;
        z-index: 100;
      }
    </style>

    <div class="demo-container">
      <button class="theme-toggle" @click=${() => {
        document.body.classList.toggle('bright');
      }}>Toggle Theme</button>

      <div class="demo-section">
        <h2 class="demo-title">Full Featured Stats Grid</h2>
        <p class="demo-description">
          A comprehensive dashboard with various tile types, actions, and real-time updates.
        </p>
        <dees-statsgrid
          .tiles=${demoTiles}
          .gridActions=${gridActions}
          .minTileWidth=${250}
          .gap=${16}
        ></dees-statsgrid>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Compact Grid (Smaller Tiles)</h2>
        <p class="demo-description">
          Same data displayed with smaller minimum tile width for more compact layouts.
        </p>
        <dees-statsgrid
          .tiles=${demoTiles.slice(0, 6)}
          .minTileWidth=${180}
          .gap=${12}
        ></dees-statsgrid>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Simple Metrics (No Actions)</h2>
        <p class="demo-description">
          Clean display without interactive elements for pure visualization.
        </p>
        <dees-statsgrid
          .tiles=${[
            {
              id: 'metric1',
              title: 'Total Sales',
              value: 48293,
              type: 'number',
              icon: 'faShoppingCart'
            },
            {
              id: 'metric2',
              title: 'Conversion Rate',
              value: 3.4,
              unit: '%',
              type: 'number',
              icon: 'faChartLine'
            },
            {
              id: 'metric3',
              title: 'Avg Order Value',
              value: 127.50,
              unit: '$',
              type: 'number',
              icon: 'faReceipt'
            },
            {
              id: 'metric4',
              title: 'Customer Satisfaction',
              value: 92,
              type: 'percentage',
              icon: 'faSmile',
              color: '#22c55e'
            }
          ]}
          .minTileWidth=${220}
          .gap=${16}
        ></dees-statsgrid>
      </div>

      <div class="demo-section">
        <h2 class="demo-title">Performance Monitoring</h2>
        <p class="demo-description">
          Real-time performance metrics with gauge visualizations and thresholds.
        </p>
        <dees-statsgrid
          .tiles=${[
            {
              id: 'perf1',
              title: 'Database Load',
              value: 42,
              type: 'gauge',
              icon: 'faDatabase',
              gaugeOptions: {
                min: 0,
                max: 100,
                thresholds: [
                  { value: 0, color: '#10b981' },
                  { value: 50, color: '#f59e0b' },
                  { value: 75, color: '#ef4444' }
                ]
              }
            },
            {
              id: 'perf2',
              title: 'Network I/O',
              value: 856,
              unit: 'MB/s',
              type: 'trend',
              icon: 'faNetworkWired',
              trendData: [720, 780, 823, 845, 812, 876, 856]
            },
            {
              id: 'perf3',
              title: 'Cache Hit Rate',
              value: 94.2,
              type: 'percentage',
              icon: 'faBolt',
              color: '#3b82f6'
            },
            {
              id: 'perf4',
              title: 'Active Connections',
              value: 1428,
              type: 'number',
              icon: 'faLink',
              description: 'Peak: 2,100'
            }
          ]}
          .gridActions=${[
            {
              name: 'Auto Refresh',
              iconName: 'faPlay',
              action: async () => {
                console.log('Starting auto refresh...');
              }
            }
          ]}
          .minTileWidth=${280}
          .gap=${20}
        ></dees-statsgrid>
      </div>

      <script>
        // Simulate real-time updates
        setInterval(() => {
          const grids = document.querySelectorAll('dees-statsgrid');
          grids.forEach(grid => {
            if (grid.tiles && grid.tiles.length > 0) {
              // Update some random values
              const updatedTiles = [...grid.tiles];
              
              // Update trends with new data point
              updatedTiles.forEach(tile => {
                if (tile.type === 'trend' && tile.trendData) {
                  tile.trendData = [...tile.trendData.slice(1), 
                    tile.trendData[tile.trendData.length - 1] + Math.random() * 10 - 5
                  ];
                }
                
                // Randomly update some numeric values
                if (tile.type === 'number' && Math.random() > 0.7) {
                  const currentValue = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
                  tile.value = Math.round(currentValue + (Math.random() * 10 - 5));
                }
                
                // Update gauge values
                if (tile.type === 'gauge' && Math.random() > 0.5) {
                  const currentValue = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
                  const newValue = currentValue + (Math.random() * 10 - 5);
                  tile.value = Math.max(tile.gaugeOptions?.min || 0, 
                    Math.min(tile.gaugeOptions?.max || 100, Math.round(newValue)));
                }
              });
              
              grid.tiles = updatedTiles;
            }
          });
        }, 3000);
      </script>
    </div>
  `;
};