import { html, cssManager } from "@design.estate/dees-element";
import type { IStatusPageConfig } from '../interfaces/index.js';
import '../elements/index.js';

export const adminpageConfig = () => html`
  <style>
    .demo-page-wrapper {
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
      padding: 24px;
    }
  </style>

  <div class="demo-page-wrapper">
    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const config = wrapperElement.querySelector('upladmin-statuspage-config') as any;

      const configData: IStatusPageConfig = {
        companyName: 'CloudFlow Inc.',
        companyLogo: '',
        supportEmail: 'support@cloudflow.io',
        statusPageUrl: 'https://status.cloudflow.io',
        legalUrl: 'https://cloudflow.io/terms',
        apiEndpoint: 'https://api.cloudflow.io/status',
        refreshInterval: 60,
        showHistoricalDays: 90,
        theme: 'auto',
        language: 'en',
        timeZone: 'UTC',
        dateFormat: 'relative',
        enableWebSocket: true,
        enableNotifications: false,
        whitelabel: false,
      };

      config.config = configData;
    }}
    >
      <upladmin-statuspage-config></upladmin-statuspage-config>
    </dees-demowrapper>
  </div>
`;

export const adminpageConfigWhitelabel = () => html`
  <style>
    .demo-page-wrapper {
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
      padding: 24px;
    }
  </style>

  <div class="demo-page-wrapper">
    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const config = wrapperElement.querySelector('upladmin-statuspage-config') as any;

      const configData: IStatusPageConfig = {
        companyName: 'Enterprise Corp',
        companyLogo: 'https://via.placeholder.com/200x60/1a1a2e/ffffff?text=ENTERPRISE',
        supportEmail: 'support@enterprise.com',
        statusPageUrl: 'https://status.enterprise.com',
        legalUrl: 'https://enterprise.com/legal',
        apiEndpoint: 'https://api.enterprise.com/v2/status',
        refreshInterval: 30,
        showHistoricalDays: 180,
        theme: 'dark',
        language: 'en',
        timeZone: 'America/New_York',
        dateFormat: 'absolute',
        enableWebSocket: true,
        enableNotifications: true,
        whitelabel: true,
      };

      config.config = configData;
    }}
    >
      <upladmin-statuspage-config></upladmin-statuspage-config>
    </dees-demowrapper>
  </div>
`;