import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';
import type { DeesAppui } from '@design.estate/dees-catalog';
import './index.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-demo-view-settings': SzDemoViewSettings;
  }
}

@customElement('sz-demo-view-settings')
export class SzDemoViewSettings extends DeesElement {
  private appui: DeesAppui | null = null;

  async onActivate(context: { appui: DeesAppui; viewId: string }) {
    this.appui = context.appui;

    // Settings doesn't need content tabs, but we set up the secondary menu
    this.appui.setSecondaryMenu({
      heading: 'Settings',
      groups: [
        {
          name: 'Categories',
          items: [
            { key: 'General', iconName: 'lucide:Settings', action: () => { console.log('General settings'); } },
            { key: 'Network', iconName: 'lucide:Network', action: () => { console.log('Network settings'); } },
            { key: 'Security', iconName: 'lucide:Shield', action: () => { console.log('Security settings'); } },
            { key: 'Certificates', iconName: 'lucide:FileBadge', action: () => { console.log('Certificate settings'); } },
          ],
        },
        {
          name: 'Actions',
          items: [
            { type: 'action', key: 'Export Config', iconName: 'lucide:Download', action: () => { console.log('Export config'); } },
            { type: 'action', key: 'Import Config', iconName: 'lucide:Upload', action: () => { console.log('Import config'); } },
            { type: 'action', variant: 'danger', key: 'Reset to Default', iconName: 'lucide:RotateCcw', confirmMessage: 'Are you sure you want to reset all settings to default?', action: () => { console.log('Reset settings'); } },
          ],
        },
      ],
    });
  }

  onDeactivate() {
    // Cleanup if needed
  }
  private demoSettings = {
    darkMode: true,
    cloudflareToken: '',
    cloudflareZoneId: '',
    autoRenewCerts: true,
    renewalThreshold: 30,
    acmeEmail: 'admin@serve.zone',
    httpPort: 80,
    httpsPort: 443,
    forceHttps: true,
  };

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 24px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }

      .page-header {
        margin-bottom: 24px;
      }

      .page-title {
        font-size: 24px;
        font-weight: 700;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        margin: 0 0 8px 0;
      }

      .page-subtitle {
        font-size: 14px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin: 0;
      }

      .settings-container {
        max-width: 800px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="page-header">
        <h1 class="page-title">Settings</h1>
        <p class="page-subtitle">Configure your onebox instance</p>
      </div>

      <div class="settings-container">
        <sz-settings-view
          .settings=${this.demoSettings}
          currentUser="admin"
          @setting-change=${(e: CustomEvent) => console.log('Setting change:', e.detail)}
          @change-password=${(e: CustomEvent) => console.log('Change password:', e.detail)}
          @reset=${() => console.log('Reset settings')}
          @save=${(e: CustomEvent) => console.log('Save settings:', e.detail)}
        ></sz-settings-view>
      </div>
    `;
  }
}