import {
  DeesElement,
  customElement,
  html,
  state,
  css,
  cssManager,
} from '@design.estate/dees-element';
import type { DeesAppuiBase } from '@design.estate/dees-catalog';

// View lifecycle interfaces (defined locally as they're not exported from dees-catalog)
interface IViewActivationContext {
  appui: DeesAppuiBase;
  viewId: string;
  params?: Record<string, string>;
}

interface IViewLifecycle {
  onActivate?: (context: IViewActivationContext) => void | Promise<void>;
  onDeactivate?: () => void | Promise<void>;
}
import { adminState } from '../../services/admin-state.js';
import '../../elements/upladmin-statuspage-config/upladmin-statuspage-config.js';

type TConfigSection = 'branding' | 'urls' | 'behavior' | 'advanced';

@customElement('upladmin-config-view')
export class UpladminConfigView extends DeesElement implements IViewLifecycle {
  @state()
  accessor activeSection: TConfigSection = 'branding';

  @state()
  accessor loading: boolean = false;

  private appuiRef: DeesAppuiBase | null = null;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        height: 100%;
      }
    `,
  ];

  async onActivate(context: IViewActivationContext): Promise<void> {
    this.appuiRef = context.appui;

    // Check route params for section
    if (context.params?.section) {
      const section = context.params.section as TConfigSection;
      if (['branding', 'urls', 'behavior', 'advanced'].includes(section)) {
        this.activeSection = section;
      }
    }

    // Set secondary menu for configuration sections
    this.updateSecondaryMenu();

    // No content tabs for config
    context.appui.setContentTabs([]);
  }

  private updateSecondaryMenu(): void {
    if (!this.appuiRef) return;

    this.appuiRef.setSecondaryMenu({
      heading: 'Configuration',
      groups: [
        {
          name: 'Settings',
          iconName: 'lucide:settings',
          items: [
            {
              key: 'branding',
              iconName: 'lucide:palette',
              action: () => this.setSection('branding'),
            },
            {
              key: 'urls',
              iconName: 'lucide:link',
              action: () => this.setSection('urls'),
            },
            {
              key: 'behavior',
              iconName: 'lucide:sliders',
              action: () => this.setSection('behavior'),
            },
            {
              key: 'advanced',
              iconName: 'lucide:wrench',
              action: () => this.setSection('advanced'),
            },
          ],
        },
      ],
    });

    // Select current section
    this.appuiRef.setSecondaryMenuSelection(this.activeSection);
  }

  private setSection(section: TConfigSection): void {
    this.activeSection = section;
    this.appuiRef?.setSecondaryMenuSelection(section);
  }

  private handleConfigSave = (e: CustomEvent): void => {
    console.log('Config saved:', e.detail);
    // In a real implementation, this would save to the backend
  };

  render() {
    return html`
      <upladmin-statuspage-config
        .config=${adminState.config || {}}
        .activeSection=${this.activeSection}
        .loading=${this.loading}
        @configSave=${this.handleConfigSave}
      ></upladmin-statuspage-config>
    `;
  }
}