import { html, css, cssManager } from '@design.estate/dees-element';
import type { IServiceStatus } from '../../interfaces/index.js';
import './upladmin-incident-form.js';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 24px;
        max-width: 900px;
        margin: 0 auto;
        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
        min-height: 100vh;
      }

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

      .demo-section h3 {
        margin: 0 0 16px 0;
        font-size: 14px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    `}
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Create New Incident</h3>
      <upladmin-incident-form
        .availableServices=${[
          { id: 'api', name: 'api', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
          { id: 'web', name: 'web', displayName: 'Web Application', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120 },
          { id: 'db', name: 'db', displayName: 'Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
          { id: 'cdn', name: 'cdn', displayName: 'CDN', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200 },
          { id: 'cache', name: 'cache', displayName: 'Redis Cache', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.98, responseTime: 2 },
        ] as IServiceStatus[]}
      ></upladmin-incident-form>
    </div>

    <div class="demo-section">
      <h3>Edit Existing Incident</h3>
      <upladmin-incident-form
        .incident=${{
          id: 'inc-123',
          title: 'Database Connection Issues',
          severity: 'major',
          status: 'identified',
          affectedServices: ['db', 'api'],
          impact: 'Users may experience slow response times and occasional timeouts when accessing the application.',
          rootCause: 'Connection pool exhaustion due to a memory leak in the database driver.',
        }}
        .availableServices=${[
          { id: 'api', name: 'api', displayName: 'API Server', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
          { id: 'web', name: 'web', displayName: 'Web Application', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120 },
          { id: 'db', name: 'db', displayName: 'Database', currentStatus: 'partial_outage', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
          { id: 'cdn', name: 'cdn', displayName: 'CDN', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200 },
          { id: 'cache', name: 'cache', displayName: 'Redis Cache', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.98, responseTime: 2 },
        ] as IServiceStatus[]}
      ></upladmin-incident-form>
    </div>
  </div>
`;
