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

declare global {
  interface HTMLElementTagNameMap {
    'sz-config-overview': SzConfigOverview;
  }
}

@customElement('sz-config-overview')
export class SzConfigOverview extends DeesElement {
  public static demo = () => html`<sz-config-overview
    heading="Configuration"
    infoText="This is a read-only view of the current running configuration."
  >
    <div style="padding: 20px; text-align: center; color: #71717a; font-size: 14px;">
      Place &lt;sz-config-section&gt; elements here
    </div>
  </sz-config-overview>`;

  public static demoGroups = ['Configuration'];

  @property({ type: String })
  public accessor heading: string = '';

  @property({ type: String })
  public accessor infoText: string = '';

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

      .heading {
        font-size: 20px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        margin-bottom: 16px;
      }

      .info-banner {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 18px;
        margin-bottom: 20px;
        border-radius: 8px;
        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59,130,246,0.08)')};
        border: 1px solid ${cssManager.bdTheme('#bfdbfe', 'rgba(59,130,246,0.2)')};
        color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
        font-size: 13px;
        line-height: 1.5;
      }

      .info-banner dees-icon {
        flex-shrink: 0;
        font-size: 18px;
        margin-top: 1px;
      }

      ::slotted(sz-config-section) {
        margin-bottom: 12px;
      }

      ::slotted(sz-config-section:last-child) {
        margin-bottom: 0;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      ${this.heading ? html`<div class="heading">${this.heading}</div>` : ''}
      ${this.infoText ? html`
        <div class="info-banner">
          <dees-icon .icon=${'lucide:info'}></dees-icon>
          <span>${this.infoText}</span>
        </div>
      ` : ''}
      <slot></slot>
    `;
  }
}