<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 () => {
    // Forzar recálculo de layout para navegación cliente
    requestAnimationFrame(() => {
      document.body.offsetHeight; // Force reflow
    });

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

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

      // Crear grupos sintéticos desde valores únicos de grupo_fuente
      const gruposUnicos = [...new Set(data.map(item => item.grupo_fuente))].filter(g => g != null);
      grupos = gruposUnicos.map(grupoNum => {
        const sample = data.find(item => item.grupo_fuente === grupoNum);
        return {
          grupo_fuente: grupoNum,
          desc_grupo_fuente: sample?.desc_grupo_fuente || `Grupo ${grupoNum}`
        };
      }).sort((a, b) => Number(a.grupo_fuente) - Number(b.grupo_fuente));

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

    loading = false;
  });

  // Obtener fuentes para un grupo específico
  function getFuentesForGrupo(grupo) {
    if (!grupo) return [];
    return allItems
      .filter(item => item.grupo_fuente === grupo.grupo_fuente)
      .sort((a, b) => String(a.fuente).localeCompare(String(b.fuente)));
  }

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

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

  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)));
  }

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

  function openDetail(item) {
    selectedItem = item;
  }

  function closeDetail() {
    selectedItem = null;
  }

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

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

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

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

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

  // Contadores
  let totalItems = $derived(allItems.length);
  let totalGrupos = $derived(grupos.length);
</script>

<svelte:head>
  <title>Fuentes de Financiamiento | 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); transition: background-color 0.2s, color 0.2s;">
  <!-- Header pedagógico -->
  <header class="border-b" style="border-color: var(--theme-borde); background-color: var(--theme-body);">
    <div class="max-w-screen-xl mx-auto px-4 sm:px-6 py-6">
      <!-- Breadcrumb: responsive -->
      <nav class="mb-4" style="font-family: 'DM Mono', monospace; font-size: 0.75rem;">
        <!-- Móvil: solo padre -->
        <a href="/clasificadores" class="sm:hidden transition-colors" style="color: var(--theme-texto);">
          ← Clasificadores
        </a>
        <!-- Desktop: ruta completa -->
        <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 02
        </p>
        <h1 class="text-3xl mb-3" style="font-family: 'DM Serif Display', serif; color: var(--theme-titulo);">
          ¿Con qué recursos se financia?
        </h1>

        <p class="leading-relaxed mb-3" style="color: var(--theme-texto);">
          Organiza los recursos según su <strong style="color: var(--theme-titulo);">origen de financiamiento</strong>:
          Tesoro General, recursos específicos, créditos externos e internos, donaciones.
          Permite entender de dónde provienen los fondos para el gasto público.
        </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> fuentes de financiamiento en
            <span style="color: var(--theme-titulo); font-weight: 500;">{totalGrupos}</span> grupos
          </p>
        {/if}

        <!-- Jerarquía -->
        <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); opacity: 0.9;">
            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);">
            Fuente
          </span>
        </div>
        <!-- Versión móvil simplificada -->
        <p class="sm:hidden text-sm mb-4" style="font-family: 'DM Mono', monospace; color: var(--theme-texto);">
          Jerarquía: Grupo → Fuente
        </p>
      </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 para abrir sidebar -->
    <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"
        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">{selectedGrupo ? selectedGrupo.desc_grupo_fuente : 'Seleccionar grupo'}</span>
        <svg class="w-4 h-4 ml-auto" 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="clasificador-layout max-w-screen-xl mx-auto flex px-4" style="display: flex !important; flex-direction: row;">
      <!-- Sidebar izquierda: Grupos -->
      {#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-64
        z-50 lg:z-auto
        transition-transform duration-200 ease-in-out
        lg:flex-shrink-0
        shadow-xl lg:shadow-none
        sidebar-left
      ">
        <div class="h-full lg:h-screen lg:sticky lg:top-0 overflow-y-auto py-6 px-4 lg:px-0 lg:pr-6">
          <!-- Cerrar en móvil -->
          <div class="flex justify-between items-center mb-4 lg:hidden">
            <span class="text-sm font-medium" style="color: var(--theme-titulo);">Grupos de fuentes</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..."
              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>

          <!-- Resultados de búsqueda -->
          {#if isSearching}
            <div class="mb-4">
              <p class="text-xs uppercase tracking-wide mb-2" style="color: var(--theme-texto);">
                {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 transition-all"
                    style="color: var(--theme-titulo);"
                    onclick={() => goToSearchResult(result)}
                  >
                    <span class="text-xs block" style="color: var(--theme-texto);">Fuente</span>
                    <span class="font-mono text-xs font-medium" style="color: var(--theme-accent);">{result.fuente}</span>
                    <span class="ml-1">{result.desc_fuente}</span>
                  </button>
                {/each}
                {#if searchResults.length === 0}
                  <p class="text-sm px-2" style="color: var(--theme-texto);">Sin resultados</p>
                {/if}
              </div>
            </div>
          {:else}
            <!-- Lista de grupos -->
            <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?.grupo_fuente === grupo.grupo_fuente
                        ? `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 {grupo.grupo_fuente}</span>
                      {grupo.desc_grupo_fuente}
                    </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.grupo_fuente}
            <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.grupo_fuente}</p>
              <h2 class="text-lg sm:text-xl font-medium mb-2 flex items-center gap-2 sm:gap-3 flex-wrap" style="color: var(--theme-titulo);">
                {selectedGrupo.desc_grupo_fuente}
              </h2>
              <p class="text-sm" style="color: var(--theme-texto);">
                {grupoContent.length} fuentes de financiamiento en este grupo
              </p>
            </div>

            <!-- Fuentes -->
            <div class="space-y-8">
              {#each grupoContent as fuente}
                {@const fuenteDescs = parseDescripciones(fuente.descripciones)}
                <section
                  id="f-{fuente.fuente}"
                  class="scroll-mt-4 {highlightedItem === fuente.fuente ? 'highlighted' : ''}"
                >
                  <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);">{fuente.fuente}</span>
                    <div class="flex-1">
                      <h3 class="text-base sm:text-lg font-medium flex items-center gap-2 flex-wrap" style="color: var(--theme-titulo);">
                        <span class="text-left">{fuente.desc_fuente}</span>
                        {#if fuente.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(fuente)}
                            title="Ver variaciones de descripción"
                          >
                            {fuente.n_variaciones} var.
                          </button>
                        {/if}
                        <a
                          href="/fuente/{fuente.fuente}"
                          class="transition-colors hover:text-[var(--theme-accent)]"
                          style="color: var(--theme-texto);"
                          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 fuenteDescs.length > 0}
                        <p class="text-sm mt-1 leading-relaxed" style="color: var(--theme-texto);">{fuenteDescs[0].descripcion}</p>
                      {/if}
                      <!-- Vigencia temporal -->
                      {#if fuente.gestiones}
                        <p class="text-xs mt-3 font-mono" style="color: var(--theme-texto); opacity: 0.7;">
                          Vigente: {fuente.gestiones}
                        </p>
                      {/if}
                    </div>
                  </div>
                </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 as fuente}
                <a
                  href="#f-{fuente.fuente}"
                  class="block text-sm truncate transition-colors hover:text-[var(--theme-accent)]"
                  style="color: var(--theme-texto);"
                  title="{fuente.desc_fuente}"
                >
                  <span class="font-mono text-xs" style="opacity: 0.6;">{fuente.fuente}</span>
                  {fuente.desc_fuente}
                </a>
              {/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);">Fuente de Financiamiento</p>
          <h3 class="text-lg font-medium mt-1" style="color: var(--theme-titulo);">
            <span class="font-mono" style="color: var(--theme-texto);">{selectedItem.fuente}</span>
            <span class="mx-2" style="color: var(--theme-texto); opacity: 0.5;">·</span>
            {selectedItem.desc_fuente}
          </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>

        <div class="space-y-4">
          {#each parseDescripciones(selectedItem.descripciones) as desc, i}
            <div class="border-l-2 pl-4 py-3 rounded-r" style="{i === 0 ? `border-color: var(--theme-accent); background-color: color-mix(in srgb, var(--theme-accent) 10%, transparent);` : `border-color: var(--theme-borde);`}">
              <p class="text-sm mb-2" style="color: var(--theme-texto);">
                {#if i === 0 && selectedItem.n_variaciones > 1}
                  <span class="font-medium" style="color: var(--theme-accent);">Vigente</span>
                  <span class="mx-1" style="opacity: 0.5;">·</span>
                {/if}
                <span class="font-mono">{desc.rangos}</span>
              </p>
              <p class="text-base leading-relaxed" style="color: var(--theme-titulo);">{desc.descripcion}</p>
            </div>
          {/each}
        </div>

        <!-- Vigencia temporal -->
        {#if selectedItem.gestiones}
          <div class="mt-6 pt-4 border-t" style="border-color: var(--theme-borde);">
            <p class="text-xs font-mono" style="color: var(--theme-texto);">
              <span class="font-medium">Años con datos:</span> {selectedItem.gestiones}
            </p>
          </div>
        {/if}
      </div>
    </div>
  </div>
{/if}

<style>
  /* Sidebar izquierdo: con fondo en móvil, transparente en desktop */
  .sidebar-left {
    background-color: var(--theme-surface);
  }
  @media (min-width: 1024px) {
    .sidebar-left {
      background-color: transparent;
    }
  }

  /* Highlight pulse animation para resultados de búsqueda */
  @keyframes highlight-pulse {
    0%, 100% {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 30%, transparent);
    }
    50% {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 50%, transparent);
    }
  }

  .highlighted {
    animation: highlight-pulse 0.8s ease-in-out 2;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-left: -0.5rem;
  }

  /* Layout principal - fallback nativo */
  .clasificador-layout {
    display: flex !important;
    flex-direction: row !important;
  }

  /* Sidebar - fallback para responsive */
  .sidebar-left {
    position: fixed;
    transform: translateX(-100%);
  }

  @media (min-width: 1024px) {
    .sidebar-left {
      position: relative !important;
      transform: translateX(0) !important;
      flex-shrink: 0;
      width: 16rem;
      z-index: auto !important;
      box-shadow: none !important;
    }
  }

  @media (max-width: 1023px) {
    .clasificador-layout {
      display: block !important;
    }
  }
</style>