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

declare global {
  interface HTMLElementTagNameMap {
    'sg-public-layout': SgPublicLayout;
  }
}

@customElement('sg-public-layout')
export class SgPublicLayout extends DeesElement {
  public static demo = () => html`
    <sg-public-layout>
      <div style="padding: 48px; text-align: center; color: #666;">
        Page content goes here
      </div>
    </sg-public-layout>
  `;

  public static demoGroups = ['Public'];

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 24px;
        background: ${cssManager.bdTheme('#fff', '#09090b')};
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#222')};
      }

      .logo {
        font-size: 16px;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: -0.02em;
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .foss-btn {
        padding: 6px 12px;
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#ddd', '#444')};
        font-size: 12px;
        color: ${cssManager.bdTheme('#666', '#999')};
        cursor: pointer;
        transition: all 150ms ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
      }

      .foss-btn:hover {
        border-color: ${cssManager.bdTheme('#111', '#fff')};
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .sign-in-btn {
        padding: 6px 16px;
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#ddd', '#444')};
        font-size: 13px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#333', '#ccc')};
        cursor: pointer;
        transition: all 150ms ease;
      }

      .sign-in-btn:hover {
        border-color: ${cssManager.bdTheme('#111', '#fff')};
        color: ${cssManager.bdTheme('#111', '#fff')};
      }

      .content {
        flex: 1;
        margin-top: 56px;
        margin-bottom: 24px;
      }

      .statusbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
        font-size: 11px;
        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
      }
      .statusbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .statusbar-right {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .statusbar a {
        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
        text-decoration: none;
      }
      .statusbar a:hover {
        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="top-bar">
        <div class="logo">Stack.Gallery</div>
        <div class="header-actions">
          <a class="foss-btn" href="https://code.foss.global/stack.gallery/registry" target="_blank">View on foss.global</a>
          <button class="sign-in-btn" @click=${this.handleSignIn}>Sign in</button>
        </div>
      </div>

      <div class="content">
        <slot></slot>
      </div>

      <div class="statusbar">
        <div class="statusbar-left">
          <span>Powered by Stack.Gallery</span>
        </div>
        <div class="statusbar-right">
          <a href="https://code.foss.global/stack.gallery/registry" target="_blank">Host your own private on-prem registry</a>
        </div>
      </div>
    `;
  }

  private handleSignIn() {
    this.dispatchEvent(
      new CustomEvent('sign-in', {
        detail: {},
        bubbles: true,
        composed: true,
      })
    );
  }
}