// src/pages/home/home-component.ts

import loginHtml from './home.html?raw';
import loginCss from '../../4nk.css?raw';
import { initHomePage } from './home';

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

  connectedCallback() {
    this.render();

    try {
      if (this.shadowRoot) {
        initHomePage(this.shadowRoot);
      } else {
        console.error("[LoginComponent] 💥 ShadowRoot est nul. Impossible d'initialiser.");
      }
    } catch (e) {
      console.error("[LoginComponent] 💥 Échec de l'initHomePage:", e);
    }
  }

  render() {
    if (this.shadowRoot) {
      this.shadowRoot.innerHTML = `
        <style>${loginCss}</style>
        ${loginHtml} 
      `;
    }
  }

  set callback(fn) {
    if (typeof fn === 'function') {
      this._callback = fn;
    } else {
      console.error('Callback is not a function');
    }
  }
  get callback() {
    return this._callback;
  }
}

if (!customElements.get('login-4nk-component')) {
  customElements.define('login-4nk-component', LoginComponent);
}