/**
 * ProjectsModule.js
 * Feature module for managing DSS projects, metadata, and selection.
 */

class ProjectsModule extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = `
      <style>
        .module-container {
          padding: 24px;
          color: var(--vscode-foreground);
        }
        .empty-state {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 48px;
          border: 1px dashed var(--vscode-input-border, #3c3c3c);
          border-radius: 6px;
          background-color: var(--vscode-editor-background);
          margin-top: 24px;
        }
        h1 {
          font-size: 24px;
          font-weight: 500;
          margin-bottom: 8px;
        }
        .icon-large {
          font-size: 48px;
          margin-bottom: 16px;
          opacity: 0.8;
        }
        p {
          color: var(--vscode-descriptionForeground);
          max-width: 500px;
          text-align: center;
          line-height: 1.5;
        }
      </style>

      <div class="module-container">
        <h1>Projects</h1>
        <div class="empty-state">
          <div class="icon-large">📁</div>
          <h3>Projects Module Under Construction</h3>
          <p>
            This module will allow you to create new projects, edit project metadata,
            and manage access controls. Currently, use the selector in the top bar to switch contexts.
          </p>
        </div>
      </div>
    `;
  }
}

customElements.define('dss-projects-module', ProjectsModule);
export default ProjectsModule;