import { html, cssManager } from '@design.estate/dees-element';
import * as tsclass from '@tsclass/tsclass';

export const demoFunc = () => html` <style>
    .demo {
      background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
      display: block;
      content: '';
      padding: 40px;
    }
    
    .demo-grid {
      display: grid;
      gap: 24px;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .demo-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .demo-title {
      font-size: 14px;
      font-weight: 600;
      color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
      margin-bottom: 8px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    
    .demo-note {
      font-size: 12px;
      color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
      margin-bottom: 24px;
      text-align: center;
      font-style: italic;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
  </style>
  <div class="demo">
    <div class="demo-note">
      Right-click on any detail row to copy the value, key, or key:value combination
    </div>
    <div class="demo-grid">
      <div class="demo-section">
        <div class="demo-title">Service Health Status</div>
        <dees-dataview-statusobject
          .statusObject=${{
            id: '1',
            name: 'API Gateway Service',
            combinedStatus: 'ok',
            combinedStatusText: 'All systems operational',
            details: [
              {
                name: 'Response Time',
                value: '45ms (avg)',
                status: 'ok',
                statusText: 'Within normal range',
              },
              {
                name: 'Uptime',
                value: '99.99% (30 days)',
                status: 'ok',
                statusText: 'Excellent uptime',
              },
              {
                name: 'Active Connections',
                value: '1,234 / 10,000',
                status: 'ok',
                statusText: 'Normal load',
              },
              {
                name: 'SSL Certificate',
                value: 'Valid until 2024-12-31',
                status: 'ok',
                statusText: 'Certificate valid',
              },
            ],
          } as tsclass.code.IStatusObject}
        >
        </dees-dataview-statusobject>
      </div>
      
      <div class="demo-section">
        <div class="demo-title">Database Cluster Status</div>
        <dees-dataview-statusobject
          .statusObject=${{
            id: '2',
            name: 'PostgreSQL Cluster',
            combinedStatus: 'partly_ok',
            combinedStatusText: 'Minor issues detected',
            details: [
              {
                name: 'Primary Node',
                value: 'db-primary-01 (healthy)',
                status: 'ok',
                statusText: 'Operating normally',
              },
              {
                name: 'Replica Lag',
                value: '2.5 seconds',
                status: 'partly_ok',
                statusText: 'Slightly elevated',
              },
              {
                name: 'Disk Usage',
                value: '78% (312GB / 400GB)',
                status: 'partly_ok',
                statusText: 'Approaching threshold',
              },
              {
                name: 'Connection Pool',
                value: '89 / 100 connections',
                status: 'ok',
                statusText: 'Within limits',
              },
            ],
          } as tsclass.code.IStatusObject}
        >
        </dees-dataview-statusobject>
      </div>
      
      <div class="demo-section">
        <div class="demo-title">Build Pipeline Status</div>
        <dees-dataview-statusobject
          .statusObject=${{
            id: '3',
            name: 'CI/CD Pipeline',
            combinedStatus: 'not_ok',
            combinedStatusText: 'Build failure',
            details: [
              {
                name: 'Last Build',
                value: 'Build #1234 - Failed',
                status: 'not_ok',
                statusText: 'Test failures',
              },
              {
                name: 'Failed Tests',
                value: '3 tests failed: auth.spec.ts, user.spec.ts, api.spec.ts',
                status: 'not_ok',
                statusText: 'Unit test failures',
              },
              {
                name: 'Code Coverage',
                value: '82.5% (target: 85%)',
                status: 'partly_ok',
                statusText: 'Below target',
              },
              {
                name: 'Build Duration',
                value: '12m 34s',
                status: 'ok',
                statusText: 'Normal duration',
              },
            ],
          } as tsclass.code.IStatusObject}
        >
        </dees-dataview-statusobject>
      </div>
    </div>
  </div>`;