import { html, nothing } from 'lit';
import { FileViewerBase } from './shared/file-viewer-base.js';

const PAGE_ID = 'file_viewer';

function pathFromHash() {
  const h = location.hash;
  const prefix = `#${PAGE_ID}?path=`;
  if (!h.startsWith(prefix)) return null;
  try {
    return decodeURIComponent(h.slice(prefix.length));
  } catch {
    return null;
  }
}

/**
 * Desktop file-viewer page. Self-routes off the hash (`#file_viewer?path=...`):
 * the sidebar's `llm-page-change` event toggles visibility and `hashchange`
 * re-loads. All fetch/render/watch logic lives in `FileViewerBase`; this
 * subclass only adds the desktop chrome and the hash wiring.
 */
export class FileViewerPage extends FileViewerBase {
  static properties = {
    _open: { state: true },
  };

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

  connectedCallback() {
    super.connectedCallback();
    window.addEventListener('llm-page-change', (e) => {
      this._open = e.detail.page === PAGE_ID;
      this.style.display = this._open ? 'flex' : 'none';
      if (this._open) this._loadFromHash();
      else this._hide();
    });
    window.addEventListener('hashchange', () => {
      if (this._open) this._loadFromHash();
    });
  }

  _loadFromHash() {
    const path = pathFromHash();
    if (path) this._show(path);
  }

  _back() {
    history.back();
  }

  render() {
    if (!this._open) return nothing;
    return html`
      <div class="llm-page fv-page">
        <div class="llm-page-header">
          <div class="llm-header-left">
            <button class="btn btn-sm btn-outline-secondary back-btn" title="Back" @click=${() => this._back()}>
              <i class="bi bi-arrow-left"></i>
            </button>
            <h2 class="llm-page-title fv-title" title=${this._path ?? ''}><bdi>${this._path ?? ''}</bdi></h2>
          </div>
          <div class="fv-header-actions">
            ${this._renderModeToggle('btn btn-sm btn-outline-secondary fv-download-btn')}
            <button class="btn btn-sm btn-outline-secondary fv-download-btn" title="Download" @click=${() => this._download()}>
              <i class="bi bi-download"></i>
            </button>
          </div>
        </div>
        <div class="fv-body">${this._renderBody()}</div>
      </div>
    `;
  }
}
