/**
 * StandardModule - Módulo estándar para bases con vistas Grid/Tree/Graph
 *
 * Usado por: taxonomía (hst, flg, itm, loc, ply), maestros (mst, bck),
 * registro (atc, mth)
 */

import { BaseModule } from '../registry.ts';
import { GridView, TreeView, GraphView } from '@/views/index.ts';
import { fetchTags, fetchHstTags, fetchGroups, fetchLibraries, fetchLibraryMembers } from '@/api/index.ts';
import { createNameMap, resolveGroupName, delegateEvent } from '@/utils/index.ts';
import type { ViewType } from '@/types/index.ts';

export class StandardModule extends BaseModule {
  private currentView: GridView | TreeView | GraphView | null = null;

  async mount(): Promise<void> {
    // Show loading
    this.ctx.container.innerHTML = '<div class="loading">Cargando...</div>';

    // Load data
    await this.loadData();

    // Render sidebar and groups
    this.renderSidebar();
    this.renderGroupsBar();

    // Render main view
    this.render();

    this.mounted = true;
  }

  unmount(): void {
    this.currentView?.unmount();
    this.currentView = null;
    this.unsubscribe?.();
    this.unsubscribe = null;
    this.mounted = false;
  }

  async loadData(): Promise<void> {
    const config = this.getConfig();

    // Fetch tags para esta base
    const tags = await fetchTags(config.id);

    // Fetch HST tags para resolución de nombres de grupos (si tiene grupos)
    const hstTags = config.api.hasGroups
      ? await fetchHstTags()
      : [];

    // Fetch grupos (solo si esta base los soporta)
    const groups = config.api.hasGroups
      ? await fetchGroups()
      : [];

    // Fetch bibliotecas (solo si esta base las soporta)
    const libraries = config.api.hasLibraries
      ? await fetchLibraries(config.id)
      : [];

    this.setState({
      tags,
      hstTags,
      groups,
      libraries,
      library: 'all',
      libraryMembers: new Set(),
      group: 'all'
    });
  }

  render(): void {
    const state = this.getState();
    const config = this.getConfig();

    // Verificar que la vista está soportada
    if (!this.isViewSupported(state.view)) {
      // Cambiar a vista por defecto
      const defaultView = config.defaultView as ViewType;
      this.setState({ view: defaultView });
      return;
    }

    // Unmount current view
    this.currentView?.unmount();

    // Clear container
    this.ctx.container.innerHTML = '';
    this.ctx.container.className = `content-area ${state.view}-view`;

    // Mount new view
    switch (state.view) {
      case 'grid':
        this.currentView = new GridView(this.ctx.container, this.ctx.store, this.ctx.showDetail);
        this.currentView.mount();
        break;

      case 'tree':
        if (config.views.tree) {
          this.currentView = new TreeView(this.ctx.container, this.ctx.store, this.ctx.showDetail);
          this.currentView.mount();
        }
        break;

      case 'graph':
        if (config.views.graph) {
          this.currentView = new GraphView(this.ctx.container, this.ctx.store, this.ctx.showDetail);
          (this.currentView as GraphView).mount();
        }
        break;
    }
  }

  renderSidebar(): void {
    const container = this.ctx.leftPanel;
    const state = this.getState();
    const config = this.getConfig();

    // Si es vista de grafo, mostrar opciones de grafo
    if (state.view === 'graph' && config.views.graph) {
      container.classList.add('graph-mode');
      this.renderGraphOptions(container);
      return;
    }

    container.classList.remove('graph-mode');

    // Si no tiene bibliotecas, vaciar sidebar
    if (!config.api.hasLibraries) {
      container.innerHTML = '<div class="sidebar-empty">Sin bibliotecas</div>';
      return;
    }

    // Ordenar bibliotecas alfabéticamente
    const sortedLibs = [...state.libraries].sort((a, b) => {
      const nameA = a.name || a.name_es || a.alias || a.ref || '';
      const nameB = b.name || b.name_es || b.alias || b.ref || '';
      return nameA.localeCompare(nameB);
    });

    // Renderizar bibliotecas (simple - sin config por ahora)
    container.innerHTML = `
      <div class="lib-icon ${state.library === 'all' ? 'active' : ''}" data-lib="all" title="Todos">
        <span>ALL</span>
      </div>
      ${sortedLibs.map(lib => {
        const icon = lib.img_thumb_url || lib.icon_url || '';
        const name = lib.name || lib.name_es || lib.alias || lib.ref || lib.mrf.slice(0, 6);
        return `
          <div class="lib-icon ${state.library === lib.mrf ? 'active' : ''}" data-lib="${lib.mrf}" title="${name}">
            ${icon ? `<img src="${icon}" alt="">` : ''}
            <span>${name.slice(0, 8)}</span>
          </div>
        `;
      }).join('')}
    `;

    // Bind library clicks
    delegateEvent<MouseEvent>(container, '.lib-icon', 'click', async (_, target) => {
      const library = target.dataset.lib || 'all';

      if (library === 'all') {
        this.setState({ library: 'all', libraryMembers: new Set() });
      } else {
        const currentBase = this.getState().base;
        const members = await fetchLibraryMembers(library, currentBase);
        this.setState({ library, libraryMembers: new Set(members) });
      }

      this.renderSidebar();
      this.render();
    });
  }

  renderGroupsBar(): void {
    const container = this.ctx.groupsBar;
    const state = this.getState();
    const config = this.getConfig();

    // Si no tiene grupos, vaciar
    if (!config.api.hasGroups) {
      container.innerHTML = '';
      return;
    }

    // Usar hstTags para resolución de nombres
    const nameMap = createNameMap(state.hstTags, state.lang);

    // Contar tags por grupo
    const counts = new Map<string, number>();
    state.tags.forEach(tag => {
      const group = tag.set_hst || 'sin-grupo';
      counts.set(group, (counts.get(group) || 0) + 1);
    });

    // Ordenar por count y tomar top 20
    const sorted = Array.from(counts.entries())
      .sort((a, b) => b[1] - a[1])
      .slice(0, 20);

    container.innerHTML = `
      <button class="group-btn ${state.group === 'all' ? 'active' : ''}" data-group="all">
        Todos (${state.tags.length})
      </button>
      ${sorted.map(([groupMrf, count]) => {
        const groupName = resolveGroupName(groupMrf === 'sin-grupo' ? undefined : groupMrf, nameMap);
        return `
          <button class="group-btn ${state.group === groupMrf ? 'active' : ''}" data-group="${groupMrf}">
            ${groupName} (${count})
          </button>
        `;
      }).join('')}
    `;

    // Bind group clicks
    delegateEvent<MouseEvent>(container, '.group-btn', 'click', (_, target) => {
      const group = target.dataset.group || 'all';
      this.setState({ group });
      this.renderGroupsBar();
      this.render();
    });
  }

  private renderGraphOptions(container: HTMLElement): void {
    // TODO: Extraer a componente separado
    const state = this.getState();
    const { graphSettings, tags, graphEdges } = state;

    container.innerHTML = `
      <div class="graph-options">
        <div class="graph-section">
          <div class="graph-stat">
            <span>Nodos</span>
            <span class="graph-stat-value">${tags.length}</span>
          </div>
          <div class="graph-stat">
            <span>Edges</span>
            <span class="graph-stat-value">${graphEdges.length}</span>
          </div>
        </div>
        <div class="graph-section">
          <div class="graph-section-title">Visualización</div>
          <label class="graph-checkbox">
            <input type="checkbox" id="graph-show-img" ${graphSettings.showImg ? 'checked' : ''}>
            Imágenes
          </label>
          <label class="graph-checkbox">
            <input type="checkbox" id="graph-show-lbl" ${graphSettings.showLbl ? 'checked' : ''}>
            Etiquetas
          </label>
          <div class="graph-slider">
            <div class="graph-slider-label">
              <span>Nodo</span>
              <span class="graph-slider-value" id="node-size-val">${graphSettings.nodeSize}px</span>
            </div>
            <input type="range" id="graph-node-size" min="10" max="60" value="${graphSettings.nodeSize}">
          </div>
          <div class="graph-slider">
            <div class="graph-slider-label">
              <span>Distancia</span>
              <span class="graph-slider-value" id="link-dist-val">${graphSettings.linkDist}px</span>
            </div>
            <input type="range" id="graph-link-dist" min="30" max="200" value="${graphSettings.linkDist}">
          </div>
        </div>
      </div>
    `;

    this.bindGraphOptionEvents(container);
  }

  private bindGraphOptionEvents(container: HTMLElement): void {
    // Show images checkbox
    const showImgCb = container.querySelector<HTMLInputElement>('#graph-show-img');
    showImgCb?.addEventListener('change', () => {
      const state = this.getState();
      this.setState({
        graphSettings: { ...state.graphSettings, showImg: showImgCb.checked }
      });
      this.render();
    });

    // Show labels checkbox
    const showLblCb = container.querySelector<HTMLInputElement>('#graph-show-lbl');
    showLblCb?.addEventListener('change', () => {
      const state = this.getState();
      this.setState({
        graphSettings: { ...state.graphSettings, showLbl: showLblCb.checked }
      });
      this.render();
    });

    // Node size slider
    const nodeSizeSlider = container.querySelector<HTMLInputElement>('#graph-node-size');
    const nodeSizeVal = container.querySelector('#node-size-val');
    nodeSizeSlider?.addEventListener('input', () => {
      const size = parseInt(nodeSizeSlider.value, 10);
      if (nodeSizeVal) nodeSizeVal.textContent = `${size}px`;
      const state = this.getState();
      this.setState({
        graphSettings: { ...state.graphSettings, nodeSize: size }
      });
      this.render();
    });

    // Link distance slider
    const linkDistSlider = container.querySelector<HTMLInputElement>('#graph-link-dist');
    const linkDistVal = container.querySelector('#link-dist-val');
    linkDistSlider?.addEventListener('input', () => {
      const dist = parseInt(linkDistSlider.value, 10);
      if (linkDistVal) linkDistVal.textContent = `${dist}px`;
      const state = this.getState();
      this.setState({
        graphSettings: { ...state.graphSettings, linkDist: dist }
      });
      this.render();
    });
  }
}

export default StandardModule;