import { html, nothing } from 'lit';
import { LightElement } from '../../lib/base.js';
import { setSlice, clearSlice } from '../../lib/view-context.js';
import { RunningTasksSection }   from './running.js';
import { CronJobsSection }       from './cron.js';
import { ScheduledTasksSection } from './scheduled.js';
import { TaskHistorySection }    from './history.js';

const SECTIONS = ['running', 'cron', 'scheduled', 'history'];

/// The view-context slice this page owns (see `lib/view-context.js`).
const VIEW_SLICE = 'entity@tasks';

export class TasksPage extends LightElement {
  static properties = {
    _open:    { state: true },
    _section: { state: true },
  };

  constructor() {
    super();
    this._open    = false;
    this._section = 'running';
  }

  connectedCallback() {
    super.connectedCallback();
    window.addEventListener('llm-page-change', (e) => {
      const open = e.detail.page === 'tasks';
      this._open = open;
      this.style.display = open ? 'flex' : 'none';
      if (open) {
        const sec = this._sectionFromHash();
        this._section = sec;
        this._loadSection(sec);
        this._publishViewContext();
        if (!location.hash.includes('/')) {
          history.replaceState({ page: 'tasks', section: sec }, '', '#tasks/' + sec);
        }
      } else {
        clearSlice(VIEW_SLICE);
      }
    });
    window.addEventListener('tasks-section-change', (e) => {
      if (!this._open) return;
      const sec = e.detail.section;
      this._section = sec;
      this._loadSection(sec);
      this._publishViewContext();
    });
  }

  disconnectedCallback() {
    clearSlice(VIEW_SLICE);
    super.disconnectedCallback();
  }

  // The entity slice: which of the four sections is showing.
  _publishViewContext() {
    setSlice(VIEW_SLICE, [{ label: 'Open section', value: this._section }]);
  }

  _sectionFromHash() {
    const parts = location.hash.slice(1).split('/');
    if (parts[0] === 'tasks' && parts[1]) {
      return SECTIONS.includes(parts[1]) ? parts[1] : 'running';
    }
    return 'running';
  }

  _loadSection(sec) {
    this.updateComplete.then(() => {
      const el = this.querySelector(`[data-section="${sec}"]`);
      if (el?.load) el.load();
    });
  }

  render() {
    if (!this._open) return nothing;
    return html`
      ${this._section === 'running'
        ? html`<task-running-section data-section="running"></task-running-section>`
        : nothing}
      ${this._section === 'cron'
        ? html`<task-cron-jobs-section data-section="cron"></task-cron-jobs-section>`
        : nothing}
      ${this._section === 'scheduled'
        ? html`<task-scheduled-section data-section="scheduled"></task-scheduled-section>`
        : nothing}
      ${this._section === 'history'
        ? html`<task-history-section data-section="history"></task-history-section>`
        : nothing}
    `;
  }
}

customElements.define('task-running-section',    RunningTasksSection);
customElements.define('task-cron-jobs-section',  CronJobsSection);
customElements.define('task-scheduled-section',  ScheduledTasksSection);
customElements.define('task-history-section',    TaskHistorySection);