import { store } from '@/state/index.ts';
import { Router } from '@/router/index.ts';
import { fetchTags, fetchHstTags, fetchGroups, fetchLibraries, fetchLibraryMembers } from '@/api/index.ts';
import { GridView, TreeView, GraphView, DetailPanel } from '@/views/index.ts';
import { $, $$, delegateEvent, toast, createNameMap, resolveGroupName } from '@/utils/index.ts';
import { CATS, EDGE_COLORS } from '@/config/index.ts';
import type { BaseType, ViewType, CategoryKey, EdgeType } from '@/types/index.ts';
import './styles/main.css';

class App {
  private router: Router;
  private currentView: GridView | TreeView | GraphView | null = null;
  private detailPanel: DetailPanel | null = null;

  constructor() {
    this.router = new Router(store, () => this.init());
  }

  async start(): Promise<void> {
    this.router.parseHash();
    await this.init();
    this.bindEvents();
  }

  private async init(): Promise<void> {
    const contentArea = $('#content-area');
    const detailPanelEl = $('#detail-panel');
    if (!contentArea || !detailPanelEl) return;

    // Update UI
    this.updateBaseButtons();
    this.updateViewTabs();

    // Show loading
    contentArea.innerHTML = '<div class="loading">Cargando...</div>';

    // Fetch data
    const state = store.getState();
    const [tags, hstTags, groups, libraries] = await Promise.all([
      fetchTags(state.base),
      fetchHstTags(),  // Always load HST for group name resolution
      fetchGroups(),
      fetchLibraries(state.base)  // Load libraries for current base
    ]);
    store.setState({ tags, hstTags, groups, libraries });

    // Render groups
    this.renderGroups();
    this.renderLibraries();

    // Setup detail panel
    if (!this.detailPanel) {
      this.detailPanel = new DetailPanel(detailPanelEl, store);
    }

    // Render view
    this.renderView();
  }

  private renderView(): void {
    const contentArea = $('#content-area');
    if (!contentArea) return;

    const state = store.getState();
    const showDetail = (mrf: string) => this.detailPanel?.showDetail(mrf);

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

    // Clear and set class
    contentArea.innerHTML = '';
    contentArea.className = `content-area ${state.view}-view`;

    // Mount new view
    switch (state.view) {
      case 'grid':
        this.currentView = new GridView(contentArea, store, showDetail);
        this.currentView.mount();
        break;
      case 'tree':
        this.currentView = new TreeView(contentArea, store, showDetail);
        this.currentView.mount();
        break;
      case 'graph':
        this.currentView = new GraphView(contentArea, store, showDetail);
        (this.currentView as GraphView).mount();
        break;
    }
  }

  private renderGroups(): void {
    const container = $('#groups-bar');
    if (!container) return;

    const state = store.getState();
    // Use hstTags for group name resolution (set_hst points to hst tags)
    const nameMap = createNameMap(state.hstTags, state.lang);

    // Count tags per group
    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);
    });

    // Sort by count and take 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('')}
    `;

    delegateEvent<MouseEvent>(container, '.group-btn', 'click', (_, target) => {
      const group = target.dataset.group || 'all';
      store.setState({ group });
      this.renderGroups();
      this.renderView();
    });
  }

  private renderLibraries(): void {
    const container = $('#left-panel');
    if (!container) return;

    const state = store.getState();

    // Show graph options when in graph view
    if (state.view === 'graph') {
      container.classList.add('graph-mode');
      this.renderGraphOptions(container);
      return;
    }

    container.classList.remove('graph-mode');
    container.innerHTML = `
      <div class="lib-icon ${state.library === 'all' ? 'active' : ''}" data-lib="all" title="Todos">
        <span>ALL</span>
      </div>
      ${state.libraries.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('')}
    `;

    delegateEvent<MouseEvent>(container, '.lib-icon', 'click', async (_, target) => {
      const library = target.dataset.lib || 'all';
      const currentBase = store.getState().base;

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

      this.renderLibraries();
      this.renderView();
    });
  }

  private renderGraphOptions(container: HTMLElement): void {
    const state = store.getState();
    const { graphFilters, graphSettings, tags, graphEdges } = state;

    // Count nodes and edges
    const nodeCount = tags.length;
    const edgeCount = graphEdges.length;

    container.innerHTML = `
      <div class="graph-options">
        <!-- Stats -->
        <div class="graph-section">
          <div class="graph-stat">
            <span>Nodos</span>
            <span class="graph-stat-value">${nodeCount}</span>
          </div>
          <div class="graph-stat">
            <span>Edges</span>
            <span class="graph-stat-value">${edgeCount}</span>
          </div>
        </div>

        <!-- Categories -->
        <div class="graph-section">
          <div class="graph-section-title">Categorias</div>
          ${Object.entries(CATS).map(([key, config]) => `
            <label class="graph-checkbox">
              <input type="checkbox" data-cat="${key}" ${graphFilters.cats.has(key as CategoryKey) ? 'checked' : ''}>
              <span class="color-dot" style="background: ${config.color}"></span>
              ${config.name}
            </label>
          `).join('')}
        </div>

        <!-- Edge Types -->
        <div class="graph-section">
          <div class="graph-section-title">Relaciones</div>
          ${Object.entries(EDGE_COLORS).map(([key, color]) => `
            <label class="graph-checkbox">
              <input type="checkbox" data-edge="${key}" ${graphFilters.edges.has(key as EdgeType) ? 'checked' : ''}>
              <span class="color-dot" style="background: ${color}"></span>
              ${key}
            </label>
          `).join('')}
        </div>

        <!-- Visualization -->
        <div class="graph-section">
          <div class="graph-section-title">Visualizacion</div>
          <label class="graph-checkbox">
            <input type="checkbox" id="graph-show-img" ${graphSettings.showImg ? 'checked' : ''}>
            Imagenes
          </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>
    `;

    // Bind events
    this.bindGraphOptionEvents(container);
  }

  private bindGraphOptionEvents(container: HTMLElement): void {
    // Category checkboxes
    container.querySelectorAll<HTMLInputElement>('[data-cat]').forEach(cb => {
      cb.addEventListener('change', () => {
        const cat = cb.dataset.cat as CategoryKey;
        const state = store.getState();
        const newCats = new Set(state.graphFilters.cats);
        if (cb.checked) {
          newCats.add(cat);
        } else {
          newCats.delete(cat);
        }
        store.setState({
          graphFilters: { ...state.graphFilters, cats: newCats }
        });
        this.renderView();
      });
    });

    // Edge checkboxes
    container.querySelectorAll<HTMLInputElement>('[data-edge]').forEach(cb => {
      cb.addEventListener('change', () => {
        const edge = cb.dataset.edge as EdgeType;
        const state = store.getState();
        const newEdges = new Set(state.graphFilters.edges);
        if (cb.checked) {
          newEdges.add(edge);
        } else {
          newEdges.delete(edge);
        }
        store.setState({
          graphFilters: { ...state.graphFilters, edges: newEdges }
        });
        this.renderView();
      });
    });

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

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

    // 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 = store.getState();
      store.setState({
        graphSettings: { ...state.graphSettings, nodeSize: size }
      });
      this.renderView();
    });

    // 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 = store.getState();
      store.setState({
        graphSettings: { ...state.graphSettings, linkDist: dist }
      });
      this.renderView();
    });
  }

  private updateBaseButtons(): void {
    const state = store.getState();
    $$('.base-btn').forEach(btn => {
      btn.classList.toggle('active', btn.dataset.base === state.base);
    });
  }

  private updateViewTabs(): void {
    const state = store.getState();
    $$('.view-tab').forEach(tab => {
      tab.classList.toggle('active', tab.dataset.view === state.view);
    });
  }

  private bindEvents(): void {
    // Base buttons
    delegateEvent<MouseEvent>(document.body, '.base-btn', 'click', async (_, target) => {
      const base = target.dataset.base as BaseType;
      if (!base) return;

      store.setState({
        base,
        group: 'all',
        library: 'all',
        libraryMembers: new Set(),
        search: '',
        graphEdges: [],
        treeEdges: [],
        selected: new Set(),
        selectionMode: false
      });

      this.router.updateHash();
      await this.init();
    });

    // View tabs
    delegateEvent<MouseEvent>(document.body, '.view-tab', 'click', (_, target) => {
      const view = target.dataset.view as ViewType;
      if (!view) return;

      store.setState({ view });
      this.router.updateHash();
      this.detailPanel?.close();
      this.updateViewTabs();
      this.renderLibraries();  // Update left panel (graph options vs libraries)
      this.renderView();
    });

    // Search
    const searchInput = $('#search') as HTMLInputElement;
    if (searchInput) {
      let timeout: number;
      searchInput.addEventListener('input', () => {
        clearTimeout(timeout);
        timeout = window.setTimeout(() => {
          store.setState({ search: searchInput.value });
          this.renderView();
        }, 200);
      });
    }

    // Language select
    const langSelect = $('#lang-select') as HTMLSelectElement;
    if (langSelect) {
      langSelect.addEventListener('change', () => {
        store.setState({ lang: langSelect.value as 'es' | 'en' | 'ch' });
        this.renderView();
      });
    }

    // Selection mode
    const selBtn = $('#btn-sel');
    if (selBtn) {
      selBtn.addEventListener('click', () => {
        const state = store.getState();
        store.setState({
          selectionMode: !state.selectionMode,
          selected: state.selectionMode ? new Set() : state.selected
        });
        selBtn.classList.toggle('active', !state.selectionMode);
        this.updateSelectionCount();
        this.renderView();
      });
    }

    // Get selected
    const getBtn = $('#btn-get');
    if (getBtn) {
      getBtn.addEventListener('click', () => {
        const state = store.getState();
        if (state.selected.size === 0) {
          toast('No hay seleccionados');
          return;
        }
        navigator.clipboard.writeText([...state.selected].join('\n'))
          .then(() => toast(`Copiados ${state.selected.size} mrfs`));
      });
    }

    // API modal
    const apiBtn = $('#btn-api');
    const apiModal = $('#api-modal');
    if (apiBtn && apiModal) {
      apiBtn.addEventListener('click', () => apiModal.classList.add('open'));
      apiModal.addEventListener('click', (e) => {
        if (e.target === apiModal) apiModal.classList.remove('open');
      });
      const closeBtn = apiModal.querySelector('.modal-close');
      closeBtn?.addEventListener('click', () => apiModal.classList.remove('open'));
    }

    // Keyboard shortcuts
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        this.detailPanel?.close();
        $('#api-modal')?.classList.remove('open');
        if (store.getState().selectionMode) {
          store.setState({ selectionMode: false, selected: new Set() });
          $('#btn-sel')?.classList.remove('active');
          this.renderView();
        }
      }
      if (e.key === '/' && (e.target as HTMLElement).tagName !== 'INPUT') {
        e.preventDefault();
        ($('#search') as HTMLInputElement)?.focus();
      }
    });
  }

  private updateSelectionCount(): void {
    const counter = $('#sel-count');
    if (counter) {
      const count = store.getState().selected.size;
      counter.textContent = count > 0 ? `(${count})` : '';
    }
  }
}

// Bootstrap
document.addEventListener('DOMContentLoaded', () => {
  new App().start();
});