<script>
  import { onMount } from 'svelte';
  import * as d3 from 'd3';
  import * as Plot from '@observablehq/plot';

  // Entidad de ejemplo
  const entidad = {
    codigo: 139,
    nombre: 'Universidad Mayor de San Andrés',
    sigla: 'UMSA',
    sector: 'Universidades Públicas'
  };

  // Estado
  let gestionSeleccionada = $state(2024);
  const gestiones = [2020, 2021, 2022, 2023, 2024, 2025];

  // Datos mock - Historia temporal (20 años)
  const historiaIngresos = Array.from({ length: 20 }, (_, i) => ({
    gestion: 2005 + i,
    monto: 800000000 + Math.random() * 400000000 + i * 50000000
  }));

  const historiaGastos = Array.from({ length: 20 }, (_, i) => ({
    gestion: 2005 + i,
    monto: 750000000 + Math.random() * 350000000 + i * 45000000
  }));

  // Datos mock - Composición del gasto
  const gastoObjetos = [
    { codigo: '10000', nombre: 'Servicios Personales', monto: 850000000, padre: 'Gasto Corriente' },
    { codigo: '20000', nombre: 'Servicios No Personales', monto: 180000000, padre: 'Gasto Corriente' },
    { codigo: '30000', nombre: 'Materiales y Suministros', monto: 120000000, padre: 'Gasto Corriente' },
    { codigo: '40000', nombre: 'Activos Reales', monto: 95000000, padre: 'Inversión' },
    { codigo: '70000', nombre: 'Transferencias', monto: 45000000, padre: 'Transferencias' },
    { codigo: '80000', nombre: 'Impuestos y Otros', monto: 25000000, padre: 'Otros' }
  ];

  const gastoFinalidad = [
    { codigo: '22', nombre: 'Educación Superior', monto: 920000000, padre: 'Educación' },
    { codigo: '23', nombre: 'Investigación', monto: 180000000, padre: 'Educación' },
    { codigo: '14', nombre: 'Administración', monto: 150000000, padre: 'Servicios Generales' },
    { codigo: '31', nombre: 'Salud', monto: 45000000, padre: 'Servicios Sociales' },
    { codigo: '42', nombre: 'Extensión', monto: 20000000, padre: 'Cultura' }
  ];

  const gastoSectores = [
    { codigo: 'EDU', nombre: 'Educación', monto: 1050000000, padre: 'Social' },
    { codigo: 'ADM', nombre: 'Administración Pública', monto: 180000000, padre: 'Gubernamental' },
    { codigo: 'SAL', nombre: 'Salud', monto: 55000000, padre: 'Social' },
    { codigo: 'CUL', nombre: 'Cultura y Deporte', monto: 30000000, padre: 'Social' }
  ];

  // Datos mock - Origen del dinero
  const ingresoRubros = [
    { codigo: '1200', nombre: 'Transferencias TGN', monto: 650000000, padre: 'Transferencias' },
    { codigo: '1400', nombre: 'Venta de Servicios', monto: 280000000, padre: 'Ingresos Propios' },
    { codigo: '1100', nombre: 'Matrículas y Aranceles', monto: 150000000, padre: 'Ingresos Propios' },
    { codigo: '1300', nombre: 'Regalías e IDH', monto: 95000000, padre: 'Coparticipación' },
    { codigo: '1900', nombre: 'Otros Ingresos', monto: 40000000, padre: 'Otros' }
  ];

  const ingresoOrganismos = [
    { codigo: 'TGN', nombre: 'Tesoro General de la Nación', monto: 720000000, padre: 'Gobierno Central' },
    { codigo: 'PROP', nombre: 'Recursos Propios', monto: 350000000, padre: 'Autogestión' },
    { codigo: 'IDH', nombre: 'Impuesto Directo a Hidrocarburos', monto: 95000000, padre: 'Coparticipación' },
    { codigo: 'COOP', nombre: 'Cooperación Internacional', monto: 50000000, padre: 'Externo' }
  ];

  // Ranking mock
  const ranking = {
    gastos: { posicion: 23, total: 647 },
    ingresos: { posicion: 28, total: 647 }
  };

  // Contenedores para barras D3
  let barContainers = $state({});
  let hoverData = $state({});

  // Contenedores para gráficos de historia
  let chartIngresosContainer = $state(null);
  let chartGastosContainer = $state(null);

  // Clasificadores de gasto
  const clasificadoresGasto = [
    { key: 'objetos', label: 'Objetos de gasto', data: gastoObjetos },
    { key: 'finalidad', label: 'Finalidad y función', data: gastoFinalidad },
    { key: 'sectores', label: 'Sectores económicos', data: gastoSectores }
  ];

  // Clasificadores de ingreso
  const clasificadoresIngreso = [
    { key: 'rubros', label: 'Rubros de ingreso', data: ingresoRubros },
    { key: 'organismos', label: 'Organismos financiadores', data: ingresoOrganismos }
  ];

  // Totales
  function getTotal(data) {
    return data.reduce((sum, d) => sum + d.monto, 0);
  }

  // Formatear montos
  function formatearMonto(valor) {
    if (valor >= 1e9) return `${(valor / 1e9).toFixed(1)} mil millones`;
    if (valor >= 1e6) return `${(valor / 1e6).toFixed(0)} millones`;
    if (valor >= 1e3) return `${(valor / 1e3).toFixed(0)} mil`;
    return valor.toFixed(0);
  }

  function formatearMontoCorto(valor) {
    if (valor >= 1e9) return `${(valor / 1e9).toFixed(1)}B`;
    if (valor >= 1e6) return `${(valor / 1e6).toFixed(0)}M`;
    if (valor >= 1e3) return `${(valor / 1e3).toFixed(0)}K`;
    return valor.toFixed(0);
  }

  // Colores del tema
  function getChartColors() {
    const root = document.documentElement;
    const isDark = root.classList.contains('dark');
    return {
      barDefault: isDark ? '#3a3a38' : '#e0e0e0',
      barHighlight: isDark ? '#C9A751' : '#F3EAD8',
      barStroke: isDark ? '#5a5a55' : '#b0b0b0',
      barStrokeDefault: isDark ? '#2a2a28' : 'white'
    };
  }

  // Renderizar barras D3
  function renderizarBarras(key, data) {
    const container = barContainers[key];
    if (!container) return;

    const total = getTotal(data);
    const height = 48;
    const radius = 4;

    d3.select(container).selectAll('*').remove();

    const containerRect = container.getBoundingClientRect();
    const width = containerRect.width || 800;

    const svg = d3.select(container)
      .append('svg')
      .attr('width', '100%')
      .attr('height', height)
      .attr('viewBox', `0 0 ${width} ${height}`)
      .attr('preserveAspectRatio', 'none')
      .style('display', 'block');

    let cumulative = 0;
    const segments = data.map(d => {
      const segWidth = (d.monto / total) * width;
      const segment = { ...d, x: cumulative, width: segWidth };
      cumulative += segWidth;
      return segment;
    });

    const chartColors = getChartColors();
    const colorDefault = chartColors.barDefault;
    const colorHover = chartColors.barHighlight;
    const colorFirst = chartColors.barHighlight;

    const bars = svg.selectAll('rect')
      .data(segments)
      .enter()
      .append('rect')
      .attr('x', d => d.x)
      .attr('y', 2)
      .attr('width', d => Math.max(d.width - 1, 1))
      .attr('height', height - 4)
      .attr('rx', (d, i) => {
        if (i === 0) return radius;
        if (i === segments.length - 1) return radius;
        return 0;
      })
      .attr('fill', (d, i) => i === 0 ? colorFirst : colorDefault)
      .attr('stroke', (d, i) => i === 0 ? chartColors.barStroke : chartColors.barStrokeDefault)
      .attr('stroke-width', (d, i) => i === 0 ? 1 : 0.5)
      .style('cursor', 'pointer')
      .on('mouseenter', function(event, d) {
        bars
          .attr('fill', colorDefault)
          .attr('stroke', chartColors.barStrokeDefault)
          .attr('stroke-width', 0.5);
        d3.select(this)
          .attr('fill', colorHover)
          .attr('stroke', chartColors.barStroke)
          .attr('stroke-width', 1);
        hoverData[key] = d;
        hoverData = { ...hoverData };
      })
      .on('mouseleave', function() {
        bars
          .attr('fill', (d, i) => i === 0 ? colorFirst : colorDefault)
          .attr('stroke', (d, i) => i === 0 ? chartColors.barStroke : chartColors.barStrokeDefault)
          .attr('stroke-width', (d, i) => i === 0 ? 1 : 0.5);
        hoverData[key] = null;
        hoverData = { ...hoverData };
      });
  }

  // Item a mostrar (hover o primero)
  function getDisplayItem(key, data) {
    const hover = hoverData[key];
    if (hover) return hover;
    return data[0] || null;
  }

  // Renderizar gráficos de historia
  function renderizarHistoria() {
    if (chartIngresosContainer) {
      chartIngresosContainer.innerHTML = '';
      const plot = Plot.plot({
        width: chartIngresosContainer.clientWidth,
        height: 180,
        marginLeft: 50,
        marginRight: 20,
        marginTop: 20,
        marginBottom: 30,
        style: { background: 'transparent', fontFamily: 'var(--font-sans)' },
        x: { label: null, tickFormat: d => d },
        y: { label: null, tickFormat: d => formatearMontoCorto(d), grid: true },
        marks: [
          Plot.areaY(historiaIngresos, { x: 'gestion', y: 'monto', fill: '#4A8B6E', fillOpacity: 0.3 }),
          Plot.lineY(historiaIngresos, { x: 'gestion', y: 'monto', stroke: '#4A8B6E', strokeWidth: 2 }),
          Plot.dot(historiaIngresos, { x: 'gestion', y: 'monto', fill: '#4A8B6E', r: 3 })
        ]
      });
      chartIngresosContainer.appendChild(plot);
    }

    if (chartGastosContainer) {
      chartGastosContainer.innerHTML = '';
      const plot = Plot.plot({
        width: chartGastosContainer.clientWidth,
        height: 180,
        marginLeft: 50,
        marginRight: 20,
        marginTop: 20,
        marginBottom: 30,
        style: { background: 'transparent', fontFamily: 'var(--font-sans)' },
        x: { label: null, tickFormat: d => d },
        y: { label: null, tickFormat: d => formatearMontoCorto(d), grid: true },
        marks: [
          Plot.areaY(historiaGastos, { x: 'gestion', y: 'monto', fill: '#C9A751', fillOpacity: 0.3 }),
          Plot.lineY(historiaGastos, { x: 'gestion', y: 'monto', stroke: '#C9A751', strokeWidth: 2 }),
          Plot.dot(historiaGastos, { x: 'gestion', y: 'monto', fill: '#C9A751', r: 3 })
        ]
      });
      chartGastosContainer.appendChild(plot);
    }
  }

  // Efectos
  $effect(() => {
    setTimeout(() => {
      clasificadoresGasto.forEach(({ key, data }) => {
        if (barContainers[key]) renderizarBarras(key, data);
      });
      clasificadoresIngreso.forEach(({ key, data }) => {
        if (barContainers[key]) renderizarBarras(key, data);
      });
    }, 100);
  });

  $effect(() => {
    if (chartIngresosContainer && chartGastosContainer) {
      setTimeout(renderizarHistoria, 150);
    }
  });

  onMount(() => {
    // Observer para tema
    const observer = new MutationObserver(() => {
      clasificadoresGasto.forEach(({ key, data }) => {
        if (barContainers[key]) renderizarBarras(key, data);
      });
      clasificadoresIngreso.forEach(({ key, data }) => {
        if (barContainers[key]) renderizarBarras(key, data);
      });
    });
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

    // Resize observer para charts
    const resizeObserver = new ResizeObserver(() => {
      renderizarHistoria();
    });
    if (chartIngresosContainer) resizeObserver.observe(chartIngresosContainer);
    if (chartGastosContainer) resizeObserver.observe(chartGastosContainer);

    return () => {
      observer.disconnect();
      resizeObserver.disconnect();
    };
  });
</script>

<svelte:head>
  <title>{entidad.nombre} - Radiografía</title>
</svelte:head>

<div class="dashboard">
  <!-- Header -->
  <header class="dashboard-header">
    <div class="header-info">
      <h1 class="entidad-nombre">{entidad.nombre}</h1>
      <div class="entidad-meta">
        <span class="entidad-sigla">{entidad.sigla}</span>
        <span class="meta-sep">·</span>
        <span class="entidad-sector">{entidad.sector}</span>
      </div>
    </div>
    <div class="header-control">
      <label class="gestion-label">Gestión</label>
      <select class="gestion-select" bind:value={gestionSeleccionada}>
        {#each gestiones as g}
          <option value={g}>{g}</option>
        {/each}
      </select>
    </div>
  </header>

  <!-- Ranking -->
  <div class="ranking-bar">
    <div class="ranking-item">
      <span class="ranking-label">Ranking gastos</span>
      <span class="ranking-value">#{ranking.gastos.posicion}</span>
      <span class="ranking-total">de {ranking.gastos.total}</span>
    </div>
    <div class="ranking-sep"></div>
    <div class="ranking-item">
      <span class="ranking-label">Ranking ingresos</span>
      <span class="ranking-value">#{ranking.ingresos.posicion}</span>
      <span class="ranking-total">de {ranking.ingresos.total}</span>
    </div>
  </div>

  <!-- Historia temporal -->
  <section class="seccion">
    <h2 class="seccion-titulo">Historia 2005 – 2025</h2>
    <div class="historia-grid">
      <div class="historia-card">
        <div class="historia-header">
          <span class="historia-label">Ingresos</span>
          <span class="historia-monto ingresos">{formatearMonto(historiaIngresos[historiaIngresos.length - 1].monto)} Bs</span>
        </div>
        <div class="historia-chart" bind:this={chartIngresosContainer}></div>
      </div>
      <div class="historia-card">
        <div class="historia-header">
          <span class="historia-label">Gastos</span>
          <span class="historia-monto gastos">{formatearMonto(historiaGastos[historiaGastos.length - 1].monto)} Bs</span>
        </div>
        <div class="historia-chart" bind:this={chartGastosContainer}></div>
      </div>
    </div>
  </section>

  <!-- Composición del gasto -->
  <section class="seccion">
    <h2 class="seccion-titulo">¿En qué gasta? <span class="gestion-badge">{gestionSeleccionada}</span></h2>
    <div class="clasificadores-grid">
      {#each clasificadoresGasto as { key, label, data }}
        {@const displayItem = getDisplayItem(key, data)}
        {@const total = getTotal(data)}
        <div class="clasificador-card">
          <div class="clasificador-header">
            <div class="clasificador-info">
              <span class="clasificador-monto">{formatearMonto(displayItem?.monto || 0)} Bs</span>
              <span class="clasificador-nombre">{displayItem?.nombre || ''}</span>
              <span class="clasificador-padre">({displayItem?.padre || ''})</span>
            </div>
            <span class="clasificador-label">{label}</span>
          </div>
          <div class="barra-container" bind:this={barContainers[key]}></div>
        </div>
      {/each}
    </div>
  </section>

  <!-- Origen del dinero -->
  <section class="seccion">
    <h2 class="seccion-titulo">¿De dónde viene la plata? <span class="gestion-badge">{gestionSeleccionada}</span></h2>
    <div class="clasificadores-grid">
      {#each clasificadoresIngreso as { key, label, data }}
        {@const displayItem = getDisplayItem(key, data)}
        {@const total = getTotal(data)}
        <div class="clasificador-card">
          <div class="clasificador-header">
            <div class="clasificador-info">
              <span class="clasificador-monto">{formatearMonto(displayItem?.monto || 0)} Bs</span>
              <span class="clasificador-nombre">{displayItem?.nombre || ''}</span>
              <span class="clasificador-padre">({displayItem?.padre || ''})</span>
            </div>
            <span class="clasificador-label">{label}</span>
          </div>
          <div class="barra-container" bind:this={barContainers[key]}></div>
        </div>
      {/each}
    </div>
  </section>
</div>

<style>
  .dashboard {
    min-height: 100vh;
    background: var(--theme-fondo);
    color: var(--theme-texto);
    padding: 2rem;
    font-family: var(--font-sans);
  }

  /* Header */
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--theme-borde);
  }

  .entidad-nombre {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-titulo);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
  }

  .entidad-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--theme-texto);
    opacity: 0.7;
  }

  .entidad-sigla {
    font-weight: 600;
    color: var(--theme-titulo);
    opacity: 1;
  }

  .meta-sep {
    opacity: 0.4;
  }

  .header-control {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .gestion-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-texto);
    opacity: 0.6;
  }

  .gestion-select {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    background: var(--theme-tarjeta);
    border: 1px solid var(--theme-borde);
    border-radius: 8px;
    color: var(--theme-titulo);
    cursor: pointer;
  }

  /* Ranking */
  .ranking-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--theme-tarjeta);
    border-radius: 12px;
    margin-bottom: 2rem;
  }

  .ranking-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .ranking-label {
    font-size: 0.8rem;
    color: var(--theme-texto);
    opacity: 0.7;
  }

  .ranking-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #C9A751;
  }

  .ranking-total {
    font-size: 0.8rem;
    color: var(--theme-texto);
    opacity: 0.5;
  }

  .ranking-sep {
    width: 1px;
    height: 24px;
    background: var(--theme-borde);
  }

  /* Secciones */
  .seccion {
    margin-bottom: 2.5rem;
  }

  .seccion-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-titulo);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .gestion-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    background: rgba(201, 167, 81, 0.15);
    color: #C9A751;
    border-radius: 4px;
  }

  /* Historia */
  .historia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .historia-card {
    background: var(--theme-tarjeta);
    border-radius: 12px;
    padding: 1rem;
  }

  .historia-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
  }

  .historia-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-texto);
  }

  .historia-monto {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .historia-monto.ingresos {
    color: #4A8B6E;
  }

  .historia-monto.gastos {
    color: #C9A751;
  }

  .historia-chart {
    width: 100%;
    height: 180px;
  }

  /* Clasificadores */
  .clasificadores-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .clasificador-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .clasificador-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .clasificador-info {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .clasificador-monto {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-titulo);
  }

  .clasificador-nombre {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-titulo);
  }

  .clasificador-padre {
    font-size: 0.7rem;
    color: var(--theme-texto);
    opacity: 0.5;
  }

  .clasificador-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-texto);
    opacity: 0.6;
    flex-shrink: 0;
  }

  .barra-container {
    width: 100%;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .dashboard {
      padding: 1rem;
    }

    .dashboard-header {
      flex-direction: column;
      gap: 1rem;
    }

    .entidad-nombre {
      font-size: 1.35rem;
    }

    .historia-grid {
      grid-template-columns: 1fr;
    }

    .ranking-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .ranking-sep {
      width: 100%;
      height: 1px;
    }
  }
</style>