import globalCss from './assets/styles/style.css?inline';

export class AppLayout extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    if (this.shadowRoot) {
      this.shadowRoot.innerHTML = `
        <style>
          ${globalCss}
          
          :host {
            display: block;
            height: 100vh;
            width: 100vw;
            overflow: hidden; /* Empêche le scroll global sur body */
          }

          .app-grid {
            display: grid;
            grid-template-rows: auto 1fr; /* Ligne 1: auto (header), Ligne 2: le reste */
            height: 100%;
            width: 100%;
          }

          .header-area {
            width: 100%;
            z-index: 100;
            /* Le header est posé ici, plus besoin de position: fixed */
          }

          .content-area {
            position: relative;
            overflow-y: auto; /* C'est ICI que ça scrolle */
            overflow-x: hidden;
            width: 100%;
            height: 100%;
            /* Scrollbar jolie */
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.2) transparent;
          }

          /* Webkit Scrollbar */
          .content-area::-webkit-scrollbar { width: 6px; }
          .content-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
        </style>

        <div class="app-grid">
          <div class="header-area">
            <slot name="header"></slot>
          </div>

          <div class="content-area">
            <slot name="content"></slot>
          </div>
        </div>
      `;
    }
  }
}

customElements.define('app-layout', AppLayout);