<script>
  import { supabase } from '$lib/supabase';
  import { onMount } from 'svelte';

  let loading = $state(true);
  let searchQuery = $state('');
  let grupos = $state([]);
  let allItems = $state([]);
  let selectedGrupo = $state(null);
  let selectedItem = $state(null);
  let highlightedItem = $state(null);

  onMount(async () => {
    const { data, error } = await supabase
      .schema('ppto')
      .from('clas_objetos')
      .select('*')
      .order('objeto')
      .range(0, 9999);

    if (!error && data) {
      allItems = data;

      // Extraer grupos únicos
      grupos = data
        .filter(item => item.nivel === 'grupo')
        .reduce((acc, item) => {
          if (!acc.find(g => g.objeto === item.objeto)) {
            acc.push(item);
          }
          return acc;
        }, [])
        .sort((a, b) => a.objeto.localeCompare(b.objeto));

      if (grupos.length > 0) {
        selectedGrupo = grupos[0];
      }
    }

    loading = false;
  });

  function getItemsForGrupo(grupoCode) {
    if (!grupoCode) return { subgrupos: [] };

    const grupoNum = grupoCode.substring(0, 1);

    const subgruposUnicos = allItems
      .filter(item => item.nivel === 'subgrupo' && item.grupo == grupoNum)
      .reduce((acc, item) => {
        if (!acc.find(s => s.objeto === item.objeto)) {
          acc.push(item);
        }
        return acc;
      }, [])
      .sort((a, b) => a.objeto.localeCompare(b.objeto));

    const subgrupos = subgruposUnicos.map(sg => {
      const partidasUnicas = allItems
        .filter(item => item.nivel === 'partida' && item.grupo == grupoNum && item.subgrupo == sg.subgrupo)
        .reduce((acc, item) => {
          if (!acc.find(p => p.objeto === item.objeto)) {
            acc.push(item);
          }
          return acc;
        }, [])
        .sort((a, b) => a.objeto.localeCompare(b.objeto));

      const partidas = partidasUnicas.map(p => {
        const subpartidas = allItems
          .filter(item => item.nivel === 'subpartida' && item.grupo == grupoNum && item.subgrupo == sg.subgrupo && item.partida == p.partida)
          .reduce((acc, item) => {
            if (!acc.find(sp => sp.objeto === item.objeto)) {
              acc.push(item);
            }
            return acc;
          }, [])
          .sort((a, b) => a.objeto.localeCompare(b.objeto));

        return { ...p, subpartidas };
      });

      return { ...sg, partidas };
    });

    return { subgrupos };
  }

  // Búsqueda global
  function searchGlobal(query) {
    if (!query || query.length < 2) return [];
    const q = query.toLowerCase();

    return allItems
      .filter(item =>
        item.objeto.includes(q) ||
        item.desc_objeto?.toLowerCase().includes(q) ||
        item.descripciones?.toLowerCase().includes(q)
      )
      .reduce((acc, item) => {
        if (!acc.find(i => i.objeto === item.objeto)) {
          acc.push(item);
        }
        return acc;
      }, [])
      .slice(0, 20);
  }

  function parseDescripciones(descripcionesStr) {
    if (!descripcionesStr) return [];
    try {
      const parsed = JSON.parse(descripcionesStr);
      // Ordenar por año más reciente (extraer el máximo año de cada rango)
      return parsed.sort((a, b) => {
        const maxYearA = getMaxYear(a.rangos);
        const maxYearB = getMaxYear(b.rangos);
        return maxYearB - maxYearA; // Descendente, más reciente primero
      });
    } catch {
      return [];
    }
  }

  function getMaxYear(rangos) {
    if (!rangos) return 0;
    // Extraer todos los números de 4 dígitos (años) del string
    const years = rangos.match(/\d{4}/g);
    if (!years) return 0;
    return Math.max(...years.map(y => parseInt(y)));
  }

  function selectGrupo(grupo) {
    selectedGrupo = grupo;
    selectedItem = null;
    searchQuery = '';
    highlightedItem = null;
  }

  function openDetail(item) {
    selectedItem = item;
  }

  function closeDetail() {
    selectedItem = null;
  }

  function goToSearchResult(item) {
    // Encontrar el grupo correspondiente
    const grupoNum = item.grupo;
    const targetGrupo = grupos.find(g => g.objeto.startsWith(grupoNum));

    if (targetGrupo) {
      selectedGrupo = targetGrupo;
      highlightedItem = item.objeto;
      searchQuery = '';

      // Scroll al elemento después de un breve delay
      setTimeout(() => {
        const prefix = item.nivel === 'subgrupo' ? 'sg' : item.nivel === 'partida' ? 'p' : 'sp';
        const element = document.getElementById(`${prefix}-${item.objeto}`);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      }, 100);
    }
  }

  function getNivelLabel(nivel) {
    const labels = { grupo: 'Grupo', subgrupo: 'Subgrupo', partida: 'Partida', subpartida: 'Subpartida' };
    return labels[nivel] || nivel;
  }

  let grupoContent = $derived(selectedGrupo ? getItemsForGrupo(selectedGrupo.objeto) : { subgrupos: [] });
  let searchResults = $derived(searchGlobal(searchQuery));
  let isSearching = $derived(searchQuery.length >= 2);
</script>

<svelte:head>
  <title>Objeto del Gasto | Presupuesto Público</title>
</svelte:head>

<div class="min-h-screen bg-white">
  <!-- Header -->
  <header class="border-b bg-slate-50">
    <div class="max-w-screen-2xl mx-auto px-6 py-4">
      <nav class="text-sm text-slate-500 mb-2">
        <a href="/" class="hover:text-slate-700">Inicio</a>
        <span class="mx-2">/</span>
        <a href="/clasificadores" class="hover:text-slate-700">Clasificadores</a>
        <span class="mx-2">/</span>
        <span class="text-slate-900">Objeto del Gasto</span>
      </nav>
      <div class="flex items-center justify-between">
        <h1 class="text-2xl font-light text-slate-900">Clasificador por Objeto del Gasto</h1>
      </div>
    </div>
  </header>

  {#if loading}
    <div class="flex items-center justify-center py-20">
      <p class="text-slate-500">Cargando clasificador...</p>
    </div>
  {:else}
    <div class="max-w-screen-2xl mx-auto flex">
      <!-- Sidebar izquierda: Grupos -->
      <aside class="w-64 flex-shrink-0 border-r bg-slate-50/50">
        <div class="sticky top-0 h-screen overflow-y-auto p-4">
          <!-- Buscador -->
          <div class="mb-6">
            <input
              type="text"
              bind:value={searchQuery}
              placeholder="Buscar..."
              class="w-full px-3 py-2 text-sm border border-slate-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <!-- Resultados de búsqueda -->
          {#if isSearching}
            <div class="mb-4">
              <p class="text-xs text-slate-500 uppercase tracking-wide mb-2">
                {searchResults.length} resultados
              </p>
              <div class="space-y-1">
                {#each searchResults as result}
                  <button
                    class="w-full text-left px-2 py-2 text-sm rounded hover:bg-white hover:shadow-sm transition-all"
                    onclick={() => goToSearchResult(result)}
                  >
                    <span class="text-xs text-slate-400 block">{getNivelLabel(result.nivel)}</span>
                    <span class="font-mono text-xs text-blue-600">{result.objeto}</span>
                    <span class="text-slate-700 ml-1">{result.desc_objeto}</span>
                  </button>
                {/each}
                {#if searchResults.length === 0}
                  <p class="text-sm text-slate-400 px-2">Sin resultados</p>
                {/if}
              </div>
            </div>
          {:else}
            <!-- Lista de grupos -->
            <nav>
              <p class="text-xs text-slate-500 uppercase tracking-wide mb-3 px-2">Grupos</p>
              <ul class="space-y-1">
                {#each grupos as grupo}
                  <li>
                    <button
                      class="w-full text-left px-3 py-2 rounded-md text-sm transition-all
                        {selectedGrupo?.objeto === grupo.objeto
                          ? 'bg-blue-50 text-blue-900 font-medium border-l-2 border-blue-500'
                          : 'text-slate-600 hover:bg-white hover:text-slate-900'}"
                      onclick={() => selectGrupo(grupo)}
                    >
                      <span class="font-mono text-xs text-slate-400 block">{grupo.objeto}</span>
                      {grupo.desc_objeto}
                    </button>
                  </li>
                {/each}
              </ul>
            </nav>
          {/if}
        </div>
      </aside>

      <!-- Contenido principal -->
      <main class="flex-1 min-w-0">
        <div class="px-8 py-6">
          {#if selectedGrupo}
            <!-- Título del grupo -->
            <div class="mb-8 pb-6 border-b">
              <p class="text-sm font-mono text-slate-400 mb-1">{selectedGrupo.objeto}</p>
              <h2 class="text-xl font-medium text-slate-900 mb-2 flex items-center gap-3">
                {selectedGrupo.desc_objeto}
                <a
                  href="/objeto/{selectedGrupo.objeto}"
                  class="text-slate-300 hover:text-blue-500 transition-colors"
                  title="Ver detalle"
                >
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                  </svg>
                </a>
              </h2>
              {#if selectedGrupo.descripciones}
                {@const grupoDescs = parseDescripciones(selectedGrupo.descripciones)}
                {#if grupoDescs.length > 0}
                  <p class="text-slate-600 leading-relaxed">{grupoDescs[0].descripcion}</p>
                  {#if selectedGrupo.n_variaciones > 1}
                    <button
                      class="text-sm text-orange-500 hover:text-orange-700 mt-2 transition-colors underline decoration-dotted decoration-orange-300 hover:decoration-orange-500 cursor-pointer"
                      onclick={() => openDetail(selectedGrupo)}
                    >
                      Ver {selectedGrupo.n_variaciones} variaciones históricas
                    </button>
                  {/if}
                {/if}
              {/if}
            </div>

            <!-- Subgrupos -->
            <div class="space-y-8">
              {#each grupoContent.subgrupos as subgrupo}
                {@const subgrupoDescs = parseDescripciones(subgrupo.descripciones)}
                <section
                  id="sg-{subgrupo.objeto}"
                  class="scroll-mt-4 {highlightedItem === subgrupo.objeto ? 'ring-2 ring-blue-200 rounded-lg' : ''}"
                >
                  <div class="flex items-start gap-4 mb-3">
                    <span class="font-mono text-sm text-slate-400 pt-1">{subgrupo.objeto}</span>
                    <div class="flex-1">
                      <h3 class="text-lg font-medium text-slate-900 flex items-center gap-2">
                        <span class="text-left">{subgrupo.desc_objeto}</span>
                        {#if subgrupo.n_variaciones > 1}
                          <button
                            class="text-xs font-normal text-orange-500 hover:text-orange-700 transition-colors underline decoration-dotted decoration-orange-300 hover:decoration-orange-500 cursor-pointer"
                            onclick={() => openDetail(subgrupo)}
                            title="Ver variaciones de descripción"
                          >
                            {subgrupo.n_variaciones} var.
                          </button>
                        {/if}
                        <a
                          href="/objeto/{subgrupo.objeto}"
                          class="text-slate-300 hover:text-blue-500 transition-colors"
                          title="Ver página de detalle"
                        >
                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                          </svg>
                        </a>
                      </h3>
                      {#if subgrupoDescs.length > 0}
                        <p class="text-sm text-slate-600 mt-1 leading-relaxed">{subgrupoDescs[0].descripcion}</p>
                      {/if}
                    </div>
                  </div>

                  <!-- Partidas -->
                  {#if subgrupo.partidas?.length > 0}
                    <div class="ml-16 space-y-4 border-l-2 border-slate-100 pl-6">
                      {#each subgrupo.partidas as partida}
                        {@const partidaDescs = parseDescripciones(partida.descripciones)}
                        <div
                          id="p-{partida.objeto}"
                          class="scroll-mt-4 {highlightedItem === partida.objeto ? 'ring-2 ring-blue-200 rounded-lg p-2 -ml-2' : ''}"
                        >
                          <div class="flex items-start gap-3">
                            <span class="font-mono text-xs text-slate-400 pt-0.5">{partida.objeto}</span>
                            <div class="flex-1">
                              <h4 class="text-sm font-medium text-slate-800 flex items-center gap-2">
                                <span class="text-left">{partida.desc_objeto}</span>
                                {#if partida.n_variaciones > 1}
                                  <button
                                    class="text-xs font-normal text-orange-500 hover:text-orange-700 transition-colors underline decoration-dotted decoration-orange-300 hover:decoration-orange-500 cursor-pointer"
                                    onclick={() => openDetail(partida)}
                                    title="Ver variaciones de descripción"
                                  >
                                    {partida.n_variaciones} var.
                                  </button>
                                {/if}
                                <a
                                  href="/objeto/{partida.objeto}"
                                  class="text-slate-300 hover:text-blue-500 transition-colors"
                                  title="Ver página de detalle"
                                >
                                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                  </svg>
                                </a>
                              </h4>
                              {#if partidaDescs.length > 0}
                                <p class="text-xs text-slate-500 mt-1 leading-relaxed">{partidaDescs[0].descripcion}</p>
                              {/if}
                            </div>
                          </div>

                          <!-- Subpartidas -->
                          {#if partida.subpartidas?.length > 0}
                            <div class="ml-12 mt-3 space-y-2 border-l border-slate-100 pl-4">
                              {#each partida.subpartidas as subpartida}
                                {@const subpartidaDescs = parseDescripciones(subpartida.descripciones)}
                                <div
                                  id="sp-{subpartida.objeto}"
                                  class="scroll-mt-4 {highlightedItem === subpartida.objeto ? 'ring-2 ring-blue-200 rounded p-1 -ml-1' : ''}"
                                >
                                  <div class="flex items-start gap-2">
                                    <span class="font-mono text-xs text-slate-300">{subpartida.objeto}</span>
                                    <div class="flex-1">
                                      <span class="flex items-center gap-2">
                                        <span class="text-xs text-slate-700">{subpartida.desc_objeto}</span>
                                        {#if subpartida.n_variaciones > 1}
                                          <button
                                            class="text-xs text-orange-500 hover:text-orange-700 transition-colors underline decoration-dotted decoration-orange-300 hover:decoration-orange-500 cursor-pointer"
                                            onclick={() => openDetail(subpartida)}
                                            title="Ver variaciones de descripción"
                                          >
                                            {subpartida.n_variaciones} var.
                                          </button>
                                        {/if}
                                        <a
                                          href="/objeto/{subpartida.objeto}"
                                          class="text-slate-300 hover:text-blue-500 transition-colors"
                                          title="Ver página de detalle"
                                        >
                                          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                          </svg>
                                        </a>
                                      </span>
                                      {#if subpartidaDescs.length > 0}
                                        <p class="text-xs text-slate-400 mt-0.5">{subpartidaDescs[0].descripcion}</p>
                                      {/if}
                                    </div>
                                  </div>
                                </div>
                              {/each}
                            </div>
                          {/if}
                        </div>
                      {/each}
                    </div>
                  {/if}
                </section>
              {/each}
            </div>
          {/if}
        </div>
      </main>

      <!-- Sidebar derecha: En esta página -->
      <aside class="w-56 flex-shrink-0 hidden xl:block">
        <div class="sticky top-0 h-screen overflow-y-auto p-4 border-l">
          <p class="text-xs text-slate-500 uppercase tracking-wide mb-3">En esta página</p>
          {#if selectedGrupo && !isSearching}
            <nav class="space-y-2">
              {#each grupoContent.subgrupos as subgrupo}
                <div>
                  <a
                    href="#sg-{subgrupo.objeto}"
                    class="block text-sm text-slate-600 hover:text-blue-600 truncate"
                    title="{subgrupo.desc_objeto}"
                  >
                    {subgrupo.desc_objeto}
                  </a>
                  {#if subgrupo.partidas?.length > 0}
                    <div class="ml-3 mt-1 space-y-1 border-l border-slate-100 pl-2">
                      {#each subgrupo.partidas.slice(0, 5) as partida}
                        <a
                          href="#p-{partida.objeto}"
                          class="block text-xs text-slate-400 hover:text-blue-600 truncate"
                          title="{partida.desc_objeto}"
                        >
                          {partida.desc_objeto}
                        </a>
                      {/each}
                      {#if subgrupo.partidas.length > 5}
                        <span class="text-xs text-slate-300">+{subgrupo.partidas.length - 5} más</span>
                      {/if}
                    </div>
                  {/if}
                </div>
              {/each}
            </nav>
          {/if}
        </div>
      </aside>
    </div>
  {/if}
</div>

<!-- Modal de detalle -->
{#if selectedItem}
  <div class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50" onclick={closeDetail}>
    <div
      class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col"
      onclick={(e) => e.stopPropagation()}
    >
      <div class="px-6 py-4 border-b bg-slate-50 flex justify-between items-start">
        <div>
          <p class="text-xs text-slate-500 uppercase tracking-wide">{getNivelLabel(selectedItem.nivel)}</p>
          <h3 class="text-lg font-medium text-slate-900 mt-1">
            <span class="font-mono text-slate-400">{selectedItem.objeto}</span>
            <span class="mx-2">·</span>
            {selectedItem.desc_objeto}
          </h3>
        </div>
        <button
          onclick={closeDetail}
          class="text-slate-400 hover:text-slate-600 text-2xl leading-none"
        >
          &times;
        </button>
      </div>

      <div class="p-6 overflow-y-auto flex-1">
        <h4 class="text-sm font-medium text-slate-700 mb-4">
          {#if selectedItem.n_variaciones > 1}
            Descripciones ({selectedItem.n_variaciones} variaciones)
          {:else}
            Descripción
          {/if}
        </h4>

        <div class="space-y-4">
          {#each parseDescripciones(selectedItem.descripciones) as desc, i}
            <div class="border-l-2 {i === 0 ? 'border-blue-500 bg-blue-50/50' : 'border-slate-200'} pl-4 py-2 rounded-r">
              <p class="text-xs text-slate-500 mb-2">
                {#if i === 0 && selectedItem.n_variaciones > 1}
                  <span class="text-blue-600 font-medium">Vigente</span>
                  <span class="mx-1">·</span>
                {/if}
                {desc.rangos}
              </p>
              <p class="text-sm text-slate-700 leading-relaxed">{desc.descripcion}</p>
            </div>
          {/each}
        </div>
      </div>
    </div>
  </div>
{/if}