<script>
  import { supabase } from '$lib/supabase';
  import { onMount } from 'svelte';
  import { fade, scale } from 'svelte/transition';
  import { cubicOut } from 'svelte/easing';

  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);
  let sidebarOpen = $state(false);

  onMount(async () => {
    requestAnimationFrame(() => {
      document.body.offsetHeight;
    });

    const { data, error } = await supabase
      .schema('ppto')
      .from('clas_organismos')
      .select('*')
      .order('organismo');

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

      // Extraer grupos únicos desde organismo_grupo
      const gruposUnicos = [...new Set(data.map(d => d.organismo_grupo))].filter(g => g != null);

      grupos = gruposUnicos.map(grupoNum => {
        const sample = data.find(d => d.organismo_grupo === grupoNum);
        return {
          organismo_grupo: grupoNum,
          organismo_desc_grupo: sample?.organismo_desc_grupo || `Grupo ${grupoNum}`,
          organismo_sigla_grupo: sample?.organismo_sigla_grupo || ''
        };
      }).sort((a, b) => Number(a.organismo_grupo) - Number(b.organismo_grupo));

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

    loading = false;
  });

  // Helper para obtener subgrupos de un grupo
  function getItemsForGrupo(grupo) {
    if (!grupo) return { subgrupos: [] };

    const grupoNum = grupo.organismo_grupo;
    const itemsDelGrupo = allItems.filter(item => item.organismo_grupo === grupoNum);
    const subgruposUnicos = [...new Set(itemsDelGrupo.map(i => i.organismo_sub_grupo))].filter(s => s != null);

    const subgrupos = subgruposUnicos.map(subgrupoNum => {
      const itemsDelSubgrupo = itemsDelGrupo.filter(i => i.organismo_sub_grupo === subgrupoNum);
      const sample = itemsDelSubgrupo[0];

      return {
        organismo_sub_grupo: subgrupoNum,
        organismo_desc_sub_grupo: sample?.organismo_desc_sub_grupo || `Subgrupo ${subgrupoNum}`,
        organismo_sigla_sub_grupo: sample?.organismo_sigla_sub_grupo || '',
        organismo_grupo: grupoNum,
        organismos: itemsDelSubgrupo.sort((a, b) => String(a.organismo).localeCompare(String(b.organismo)))
      };
    }).sort((a, b) => Number(a.organismo_sub_grupo) - Number(b.organismo_sub_grupo));

    return { subgrupos };
  }

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

    return allItems
      .filter(item =>
        item.organismo?.toString().toLowerCase().includes(q) ||
        item.organismo_desc_organismo?.toLowerCase().includes(q)
      )
      .slice(0, 20);
  }

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

  function openDetail(item) {
    selectedItem = item;
  }

  function closeDetail() {
    selectedItem = null;
  }

  function goToSearchResult(item) {
    const targetGrupo = grupos.find(g => g.organismo_grupo === item.organismo_grupo);

    if (targetGrupo) {
      selectedGrupo = targetGrupo;
      highlightedItem = item.organismo;
      searchQuery = '';
      sidebarOpen = false;

      setTimeout(() => {
        const element = document.getElementById(`org-${item.organismo}`);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      }, 100);

      setTimeout(() => {
        highlightedItem = null;
      }, 2000);
    }
  }

  function parseDescripciones(descripcionesStr) {
    if (!descripcionesStr) return [];
    try {
      const parsed = typeof descripcionesStr === 'string'
        ? JSON.parse(descripcionesStr)
        : descripcionesStr;
      return parsed.sort((a, b) => {
        const maxYearA = getMaxYear(a.rangos);
        const maxYearB = getMaxYear(b.rangos);
        return maxYearB - maxYearA;
      });
    } catch {
      return [];
    }
  }

  function getMaxYear(rangos) {
    if (!rangos) return 0;
    const years = rangos.match(/\d{4}/g);
    if (!years) return 0;
    return Math.max(...years.map(y => parseInt(y)));
  }

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

  // Contadores
  let totalItems = $derived(allItems.length);
  let numSubgrupos = $derived(() => {
    const pairs = new Set();
    allItems.forEach(i => pairs.add(`${i.organismo_grupo}-${i.organismo_sub_grupo}`));
    return pairs.size;
  });
</script>

<svelte:head>
  <title>Organismos | Presupuesto Público</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet" />
</svelte:head>

<div class="min-h-screen" style="font-family: 'Instrument Sans', sans-serif; background-color: var(--theme-body); color: var(--theme-titulo);">
  <!-- Header -->
  <header class="border-b" style="border-color: var(--theme-borde);">
    <div class="max-w-screen-xl mx-auto px-4 sm:px-6 py-6">
      <nav class="mb-4" style="font-family: 'DM Mono', monospace; font-size: 0.75rem;">
        <a href="/clasificadores" class="sm:hidden transition-colors" style="color: var(--theme-texto);">
          ← Clasificadores
        </a>
        <div class="hidden sm:flex items-center gap-2" style="color: var(--theme-texto);">
          <a href="/" class="transition-colors hover:opacity-80">Inicio</a>
          <span style="opacity: 0.5;">/</span>
          <a href="/clasificadores" class="transition-colors hover:opacity-80">Clasificadores</a>
        </div>
      </nav>

      <div class="max-w-3xl">
        <p class="text-xs uppercase tracking-widest mb-2" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
          Clasificador de Organismos Financiadores
        </p>
        <h1 class="text-3xl mb-3" style="font-family: 'DM Serif Display', serif; color: var(--theme-titulo);">
          ¿Quién financia el gasto?
        </h1>

        <p class="leading-relaxed mb-3" style="color: var(--theme-texto);">
          Clasifica las fuentes de financiamiento según su <strong style="color: var(--theme-titulo);">origen</strong>:
          recursos internos, crédito externo, donaciones, etc.
        </p>

        {#if totalItems > 0}
          <p class="text-sm mb-5" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
            <span style="color: var(--theme-titulo); font-weight: 500;">{totalItems}</span> organismos en
            {grupos.length} grupos y {numSubgrupos()} subgrupos
          </p>
        {/if}

        <div class="hidden sm:flex flex-wrap items-center gap-2 sm:gap-3 text-xs mb-6" style="font-family: 'DM Mono', monospace;">
          <span class="px-2.5 py-1 rounded-full font-medium" style="background-color: var(--theme-accent); color: var(--theme-body);">
            Grupo
          </span>
          <span style="color: var(--theme-texto);">→</span>
          <span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
            Subgrupo
          </span>
          <span style="color: var(--theme-texto);">→</span>
          <span class="px-2.5 py-1 rounded-full" style="background-color: var(--theme-fill); color: var(--theme-titulo); border: 1px solid var(--theme-borde);">
            Organismo
          </span>
        </div>
      </div>
    </div>
  </header>

  {#if loading}
    <div class="flex items-center justify-center py-20">
      <p style="color: var(--theme-texto);">Cargando clasificador...</p>
    </div>
  {:else}
    <!-- Botón móvil -->
    <div class="lg:hidden px-4 py-3 border-b" style="border-color: var(--theme-borde); background-color: var(--theme-fill);">
      <button
        onclick={() => sidebarOpen = !sidebarOpen}
        class="flex items-center gap-2 text-sm w-full"
        style="color: var(--theme-texto);"
      >
        <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="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <span class="font-medium truncate">{selectedGrupo ? selectedGrupo.organismo_desc_grupo : 'Seleccionar grupo'}</span>
        <svg class="w-4 h-4 ml-auto flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
    </div>

    <div class="max-w-screen-xl mx-auto flex">
      <!-- Sidebar izquierda -->
      {#if sidebarOpen}
        <div
          transition:fade={{ duration: 150 }}
          class="fixed inset-0 bg-black/30 z-40 lg:hidden"
          onclick={() => sidebarOpen = false}
        ></div>
      {/if}
      <aside class="
        {sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
        lg:translate-x-0
        fixed lg:relative
        inset-y-0 left-0
        w-72 lg:w-56
        z-50 lg:z-auto
        transition-transform duration-200 ease-in-out
        lg:flex-shrink-0
        shadow-xl lg:shadow-none
      " style="background-color: var(--theme-body);">
        <div class="h-full lg:h-screen lg:sticky lg:top-0 overflow-y-auto py-6 px-4 lg:px-0 lg:pr-4">
          <div class="flex justify-between items-center mb-4 lg:hidden">
            <span class="text-sm font-medium" style="color: var(--theme-titulo);">Grupos</span>
            <button onclick={() => sidebarOpen = false} style="color: var(--theme-texto);">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          <!-- Buscador -->
          <div class="mb-6">
            <input
              type="text"
              bind:value={searchQuery}
              placeholder="Buscar organismo..."
              class="w-full px-3 py-2 text-sm rounded-md focus:outline-none focus:ring-2"
              style="border: 1px solid var(--theme-borde); background-color: var(--theme-surface); color: var(--theme-titulo);"
            />
          </div>

          {#if isSearching}
            <div class="space-y-1">
              <p class="text-xs uppercase tracking-wide mb-2 px-2" style="color: var(--theme-texto);">
                {searchResults.length} resultados
              </p>
              {#each searchResults as result}
                <button
                  class="w-full text-left px-2 py-2 text-sm rounded transition-all"
                  style="color: var(--theme-titulo);"
                  onclick={() => goToSearchResult(result)}
                >
                  <span class="font-mono text-xs font-medium" style="color: var(--theme-accent);">{result.organismo}</span>
                  <span class="ml-1 block truncate">{result.organismo_desc_organismo}</span>
                </button>
              {/each}
              {#if searchResults.length === 0}
                <p class="text-sm px-2" style="color: var(--theme-texto);">Sin resultados</p>
              {/if}
            </div>
          {:else}
            <nav>
              <p class="text-xs uppercase tracking-wide mb-3 px-2 hidden lg:block" style="color: var(--theme-texto);">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"
                      style="{selectedGrupo?.organismo_grupo === grupo.organismo_grupo
                        ? `background-color: color-mix(in srgb, var(--theme-accent) 15%, transparent); color: var(--theme-titulo); font-weight: 500; border-left: 2px solid var(--theme-accent);`
                        : `color: var(--theme-texto);`}"
                      onclick={() => selectGrupo(grupo)}
                    >
                      <span class="font-mono text-xs block" style="color: var(--theme-texto);">{grupo.organismo_grupo}</span>
                      {grupo.organismo_desc_grupo}
                    </button>
                  </li>
                {/each}
              </ul>
            </nav>
          {/if}
        </div>
      </aside>

      <!-- Contenido principal -->
      <main class="flex-1 min-w-0 lg:border-l xl:border-r" style="border-color: var(--theme-borde);">
        <div class="px-4 sm:px-6 lg:px-10 py-6 lg:py-8">
          {#if selectedGrupo}
            {#key selectedGrupo.organismo_grupo}
            <div in:fade={{ duration: 200, delay: 50 }}>
              <!-- Título del grupo -->
              <div class="mb-8 lg:mb-10 pb-6 lg:pb-8 border-b" style="border-color: var(--theme-borde);">
                <p class="text-sm font-mono mb-1" style="color: var(--theme-texto);">Grupo {selectedGrupo.organismo_grupo}</p>
                <h2 class="text-lg sm:text-xl font-medium mb-2" style="color: var(--theme-titulo);">
                  {selectedGrupo.organismo_desc_grupo}
                </h2>
              </div>

              <!-- Subgrupos -->
              <div class="space-y-12">
                {#each grupoContent.subgrupos as subgrupo}
                  <section
                    id="sg-{subgrupo.organismo_sub_grupo}"
                    class="scroll-mt-4"
                  >
                    <div class="flex items-start gap-2 sm:gap-4 mb-3">
                      <span class="font-mono text-xs sm:text-sm pt-1" style="color: var(--theme-texto);">{subgrupo.organismo_sub_grupo}</span>
                      <div class="flex-1">
                        <h3 class="text-base sm:text-lg font-medium" style="color: var(--theme-titulo);">
                          {subgrupo.organismo_desc_sub_grupo}
                        </h3>
                      </div>
                    </div>

                    <!-- Organismos -->
                    {#if subgrupo.organismos?.length > 0}
                      <div class="ml-4 sm:ml-8 lg:ml-16 space-y-3 border-l pl-4 sm:pl-6 lg:pl-8" style="border-color: var(--theme-borde);">
                        {#each subgrupo.organismos as org}
                          {@const orgDescs = parseDescripciones(org.descripciones)}
                          <div
                            id="org-{org.organismo}"
                            class="scroll-mt-4 py-2 transition-all duration-300 rounded-md px-2 -mx-2"
                            style="{highlightedItem === org.organismo ? 'background-color: color-mix(in srgb, var(--theme-accent) 20%, transparent);' : ''}"
                          >
                            <div class="flex items-start gap-2 sm:gap-3">
                              <span class="font-mono text-xs pt-0.5 flex-shrink-0" style="color: var(--theme-texto);">{org.organismo}</span>
                              <div class="flex-1 min-w-0">
                                <h4 class="text-sm font-medium flex items-center gap-2 flex-wrap" style="color: var(--theme-titulo);">
                                  <span class="text-left">{org.organismo_desc_organismo}</span>
                                  {#if org.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(org)}
                                      title="Ver variaciones de descripción"
                                    >
                                      {org.n_variaciones} var.
                                    </button>
                                  {/if}
                                  <a
                                    href="/organismo/{org.organismo}"
                                    class="transition-colors hover:text-[var(--theme-accent)]"
                                    style="color: var(--theme-texto);"
                                    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 org.organismo_sigla_organismo && org.organismo_sigla_organismo !== 'NC'}
                                  <p class="text-xs font-mono mt-0.5" style="color: var(--theme-texto); opacity: 0.7;">{org.organismo_sigla_organismo}</p>
                                {/if}
                                {#if orgDescs.length > 0 && orgDescs[0].descripcion}
                                  <p class="text-xs mt-1 leading-relaxed" style="color: var(--theme-texto);">{orgDescs[0].descripcion}</p>
                                {/if}
                                {#if org.gestiones}
                                  <p class="text-xs mt-1 font-mono" style="color: var(--theme-texto); opacity: 0.6;">
                                    Vigente: {org.gestiones}
                                  </p>
                                {/if}
                              </div>
                            </div>
                          </div>
                        {/each}
                      </div>
                    {/if}
                  </section>
                {/each}
              </div>
            </div>
            {/key}
          {/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" style="border-color: var(--theme-borde);">
          <p class="text-xs uppercase tracking-wide mb-3" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">En esta página</p>
          {#if selectedGrupo && !isSearching}
            <nav class="space-y-2">
              {#each grupoContent.subgrupos as subgrupo}
                <div>
                  <a
                    href="#sg-{subgrupo.organismo_sub_grupo}"
                    class="block text-sm truncate transition-colors hover:text-[var(--theme-accent)]"
                    style="color: var(--theme-texto);"
                    title="{subgrupo.organismo_desc_sub_grupo}"
                  >
                    {subgrupo.organismo_desc_sub_grupo}
                  </a>
                  {#if subgrupo.organismos?.length > 0}
                    <div class="ml-3 mt-1 space-y-1 border-l pl-2" style="border-color: var(--theme-borde);">
                      {#each subgrupo.organismos.slice(0, 5) as org}
                        <a
                          href="#org-{org.organismo}"
                          class="block text-xs truncate transition-colors hover:text-[var(--theme-accent)]"
                          style="color: var(--theme-texto); opacity: 0.7;"
                          title="{org.organismo_desc_organismo}"
                        >
                          {org.organismo_desc_organismo}
                        </a>
                      {/each}
                      {#if subgrupo.organismos.length > 5}
                        <span class="text-xs" style="color: var(--theme-texto); opacity: 0.5;">+{subgrupo.organismos.length - 5} más</span>
                      {/if}
                    </div>
                  {/if}
                </div>
              {/each}
            </nav>
          {/if}
        </div>
      </aside>
    </div>
  {/if}
</div>

<!-- Modal de detalle -->
{#if selectedItem}
  <div
    transition:fade={{ duration: 150 }}
    class="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50"
    onclick={closeDetail}
  >
    <div
      transition:scale={{ duration: 200, start: 0.95, easing: cubicOut }}
      class="rounded-xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col"
      style="background-color: var(--theme-surface);"
      onclick={(e) => e.stopPropagation()}
    >
      <div class="px-6 py-4 border-b flex justify-between items-start" style="background-color: var(--theme-fill); border-color: var(--theme-borde);">
        <div>
          <p class="text-xs uppercase tracking-wide font-medium" style="color: var(--theme-texto);">Organismo</p>
          <h3 class="text-lg font-medium mt-1" style="color: var(--theme-titulo);">
            <span class="font-mono" style="color: var(--theme-texto);">{selectedItem.organismo}</span>
            <span class="mx-2" style="color: var(--theme-texto); opacity: 0.5;">·</span>
            {selectedItem.organismo_desc_organismo}
          </h3>
        </div>
        <button
          onclick={closeDetail}
          class="text-2xl leading-none"
          style="color: var(--theme-texto);"
        >
          &times;
        </button>
      </div>

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

        {#if selectedItem.descripciones}
          {@const descs = parseDescripciones(selectedItem.descripciones)}
          {#if descs.length > 0}
            <div class="space-y-4">
              {#each descs as desc}
                <div class="p-4 rounded-lg" style="background-color: var(--theme-fill);">
                  <p class="text-xs font-mono mb-2" style="color: var(--theme-accent);">{desc.rangos}</p>
                  <p class="text-sm leading-relaxed" style="color: var(--theme-titulo);">{desc.descripcion || 'Sin descripción'}</p>
                </div>
              {/each}
            </div>
          {:else}
            <p class="text-sm" style="color: var(--theme-texto);">Sin descripciones registradas.</p>
          {/if}
        {:else}
          <p class="text-sm" style="color: var(--theme-texto);">Sin descripciones registradas.</p>
        {/if}
      </div>
    </div>
  </div>
{/if}