import { html, css, cssManager } from '@design.estate/dees-element';
import type { IServiceStatus } from '../../interfaces/index.js';
import './upladmin-monitor-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 Monitor</h3>
      <upladmin-monitor-form
        .availableMonitors=${[
          { id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
          { id: 'database', name: 'database', displayName: 'Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.98, responseTime: 5 },
        ] as IServiceStatus[]}
        .categories=${['Core Services', 'Infrastructure', 'External Services', 'Web Services']}
      ></upladmin-monitor-form>
    </div>

    <div class="demo-section">
      <h3>Edit Existing Monitor</h3>
      <upladmin-monitor-form
        .monitor=${{
          id: 'cdn',
          name: 'cdn',
          displayName: 'Content Delivery Network',
          description: 'Global CDN for static assets and media files',
          category: 'Infrastructure',
          dependencies: ['api-server'],
          currentStatus: 'degraded',
        }}
        .availableMonitors=${[
          { id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
          { id: 'database', name: 'database', displayName: 'Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.98, responseTime: 5 },
        ] as IServiceStatus[]}
        .categories=${['Core Services', 'Infrastructure', 'External Services', 'Web Services']}
      ></upladmin-monitor-form>
    </div>
  </div>
`;
