let iaHistorial = [];

function stripEmojiIA(text) {
  return String(text || '')
    .replace(/[\u2600-\u27BF]/g, '')
    .replace(/\p{Extended_Pictographic}/gu, '')
    .trim();
}

function buildAnalisisPeriodoPayload() {
  const params = typeof gfParams === 'function' ? gfParams() : {};
  const today = new Date();
  const fmtDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  const shift = (value, days) => {
    const date = new Date(`${value}T00:00:00`);
    date.setDate(date.getDate() + days);
    return fmtDate(date);
  };
  const inicio = $('ia-fecha-desde')?.value || fechaDesde || fecha || fmtDate(today);
  const fin = $('ia-fecha-hasta')?.value || fechaHasta || inicio;
  const days = Math.max(1, Math.round((new Date(`${fin}T00:00:00`) - new Date(`${inicio}T00:00:00`)) / 86400000) + 1);
  const prevFin = shift(inicio, -1);
  const prevInicio = shift(prevFin, -(days - 1));
  const anioActual = Number(fin.slice(0, 4));
  const anioAnterior = Number(prevFin.slice(0, 4));
  const grupoSelect = $('gf-grupo');
  const categoria = grupoSelect?.selectedOptions?.[0]?.textContent || '';
  return {
    anioActual,
    anioAnterior,
    inicio,
    fin,
    prevInicio,
    prevFin,
    dias_historico: days,
    idgrupo: params.idgrupo || '',
    categoria: params.idgrupo ? categoria : '',
    limite: Number(params.limite || 10),
  };
}

function setAnalisisIAPeriod(periodo) {
  const today = new Date();
  const fmtDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  let inicio = fmtDate(today);
  const fin = inicio;
  if (periodo === 'semana') {
    const start = new Date(today);
    start.setDate(today.getDate() - today.getDay());
    inicio = fmtDate(start);
  } else if (periodo === 'mes') {
    inicio = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-01`;
  } else if (periodo === 'anio') {
    inicio = `${today.getFullYear()}-01-01`;
  }
  const desde = $('ia-fecha-desde');
  const hasta = $('ia-fecha-hasta');
  if (desde) desde.value = inicio;
  if (hasta) hasta.value = fin;
}

// ─── Construye el contexto de datos para enviar a Claude ────────────────────
function buildContextoIA() {
  const r   = cache.resumen || {};
  const vh  = cache.ventasHora || [];
  const prod = cache.productos || [];
  const mes  = cache.meseros || [];
  const fp   = cache.formasPago || [];
  const vs   = cache.ventasServicio || [];
  const mesas = cache.mesas || [];
  const met  = cache.ventasHoraMetricas || {};
  const mc   = cache.metasConfig || {};
  const now  = new Date();
  const horaActual = now.getHours();
  const periodo = buildAnalisisPeriodoPayload();

  const horasActivas = vh.filter(h => (h.venta || 0) > 0).sort((a, b) => Number(a.hora) - Number(b.hora));
  const horaMax = horasActivas.reduce((b, h) => h.venta > b.venta ? h : b, { hora: 0, venta: 0 });
  const horaMin = horasActivas.length > 1 ? horasActivas.reduce((b, h) => h.venta < b.venta ? h : b, horasActivas[0]) : null;
  const totalHora = horasActivas.reduce((a, h) => a + (h.venta || 0), 0);
  const promedioHora = horasActivas.length ? Math.round(totalHora / horasActivas.length) : 0;
  const horaActualVenta = (vh.find(h => Number(h.hora) === horaActual) || {}).venta || 0;

  const topProds = prod.slice(0, 5).map(p => `${p.producto || p.descripcion}: ${fmt(p.total_venta || p.total || 0)} (${p.cantidad_vendida || 0} uds)`).join(', ');
  const topMes   = mes.slice(0, 3).map(m => `${m.nombre || m.mesero}: ${fmt(m.total_venta || m.venta || 0)}`).join(', ');
  const fmtFP    = fp.map(f => `${f.forma_pago}: ${fmt(f.total || 0)}`).join(', ');
  const fmtVS    = vs.map(s => `${s.servicio}: ${fmt(s.total || s.venta || 0)} (${s.tickets || 0} tickets)`).join(', ');
  const mesasAbiertas = mesas.filter(m => m.estado === 'ocupada' || m.estatus === 'abierta' || m.total > 0);
  const metaDiaria = Number(mc.meta_diaria || 0);
  const pctMeta    = metaDiaria > 0 ? Math.round(((r.venta_total || 0) / metaDiaria) * 100) : null;
  const proyeccion = met.proyeccionCierre || null;

  return {
    texto: `
DATOS EN TIEMPO REAL — ${now.toLocaleString('es-MX')}
Restaurante con 3 canales: Comedor, Domicilio y Servicio Rápido.
Periodo filtrado en ARKHON: ${periodo.inicio} a ${periodo.fin}
Comparativo equivalente: ${periodo.prevInicio} a ${periodo.prevFin}

=== VENTAS HOY ===
- Venta total: ${fmt(r.venta_total || 0)}
- En curso (mesas abiertas): ${fmt(r.venta_en_curso || 0)}
- Tickets cerrados: ${r.cuentas_pagadas || 0}
- Ticket promedio: ${fmt(r.ticket_promedio || ((r.venta_total || 0) / (r.cuentas_pagadas || 1)))}
- Descuentos: ${fmt(r.total_descuentos || 0)}
- Cortesías: ${fmt(r.total_cortesias || 0)}
${metaDiaria > 0 ? `- Meta diaria: ${fmt(metaDiaria)} | Avance: ${pctMeta}% | ${22 - horaActual}h restantes` : ''}
${proyeccion ? `- Proyección de cierre: ${fmt(proyeccion)}` : ''}

=== TRÁFICO POR HORA ===
${horasActivas.map(h => `- ${String(h.hora).padStart(2,'0')}:00 → ${fmt(h.venta)}${Number(h.hora) === horaActual ? ' ← HORA ACTUAL' : ''}`).join('\n')}
- Hora pico: ${String(horaMax.hora).padStart(2,'0')}:00 (${fmt(horaMax.venta)})
${horaMin ? `- Hora más baja: ${String(horaMin.hora).padStart(2,'0')}:00 (${fmt(horaMin.venta)})` : ''}
- Promedio por hora: ${fmt(promedioHora)}
- Esta hora (${String(horaActual).padStart(2,'0')}:00): ${fmt(horaActualVenta)}

=== CANALES DE SERVICIO ===
${fmtVS || 'Sin datos'}

=== TOP PRODUCTOS ===
${topProds || 'Sin datos'}

=== FORMAS DE PAGO ===
${fmtFP || 'Sin datos'}

=== MESEROS ===
${topMes || 'Sin datos'}

=== MESAS ===
- Abiertas ahora: ${mesasAbiertas.length} / Total: ${mesas.length}
- Comensales del período: ${r.total_comensales || 0}
- Tiempo promedio por mesa: ${r.tiempo_promedio_min || 0} min
    `.trim(),
    kpis: {
      periodo:         `${periodo.inicio} a ${periodo.fin}`,
      venta:           fmt(r.venta_total || 0),
      tickets:         r.cuentas_pagadas || 0,
      horaActual:      `${String(horaActual).padStart(2,'0')}:00`,
      horaActualVenta: fmt(horaActualVenta),
      pctMeta:         pctMeta ? `${pctMeta}%` : '—',
      mesasAbiertas:   mesasAbiertas.length,
    }
  };
}

// ─── Genera análisis llamando al proxy backend ───────────────────────────────
async function generarAnalisisIA(tipo) {
  const btnId  = tipo === 'urgente' ? 'ia-btn-urgente' : 'ia-btn-completo';
  const btn    = $(btnId);
  const output = $('ia-output');
  if (!output) return;

  // Verificar que hay datos
  if (!cache.resumen) {
    output.innerHTML = `<div class="card" style="padding:20px;text-align:center;">
      <p style="color:var(--text-3);font-size:12px;">Sin datos cargados. Espera a que el dashboard cargue primero.</p>
    </div>`;
    return;
  }

  // Estado de carga
  if (btn) {
    btn.disabled = true;
    btn.style.opacity = '0.6';
  }

  output.innerHTML = `<div class="card" style="padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;">
    <svg viewBox="0 0 24 24" style="width:24px;height:24px;stroke:var(--purple);stroke-width:2;fill:none;animation:spin .9s linear infinite">
      <circle cx="12" cy="12" r="10" stroke-opacity=".25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
    </svg>
    <p style="font-size:12px;color:var(--text-3);font-weight:600;margin:0;">
      ${tipo === 'urgente' ? 'Detectando alertas críticas…' : 'Generando análisis estratégico…'}
    </p>
  </div>`;

  try {
    const ctx = buildContextoIA();
    const periodo = buildAnalisisPeriodoPayload();
    renderContextoKpis(ctx.kpis);

    const res = await fetch('/api/ia/analizar', {
      method: 'POST',
      headers: {
        'Content-Type':  'application/json',
        'X-Api-Token':   LOCAL_API_KEY,
        
      },
      body: JSON.stringify({
        contexto: ctx.texto,
        tipo,
        historico: tipo !== 'urgente',
        dias_historico: periodo.dias_historico,
        ...periodo,
      }),
    });

    const data = await res.json();

    if (!data.ok) {
      output.innerHTML = `<div class="card" style="padding:20px;border-left:3px solid var(--red);">
        <div style="font-size:11px;font-weight:800;color:var(--red);margin-bottom:6px;">Error al generar análisis</div>
        <p style="font-size:11px;color:var(--text-2);margin:0;">${data.error || 'Error desconocido'}</p>
        ${data.error && data.error.includes('API_KEY') ? `
        <p style="font-size:11px;color:var(--text-3);margin:8px 0 0;">
          Configura la llave del proveedor activo en <strong>Arkhon Engineering - Analisis avanzado</strong> y usa <strong>Probar conexion</strong>.<br/>
          <code style="background:var(--bg);padding:2px 6px;border-radius:4px;color:var(--orange);">${data.provider === 'openai' ? 'OPENAI_API_KEY' : 'ANTHROPIC_API_KEY'}</code>
        </p>` : ''}
      </div>`;
      return;
    }

    if (data.data?.contexto_meta?.kpis) renderContextoKpis(data.data.contexto_meta.kpis);
    const texto     = stripEmojiIA(data.data.texto);
    const timestamp = new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' });
    const html      = renderAnalisisIA(texto, tipo, timestamp);

    output.innerHTML = html;

    // Guardar en historial
    iaHistorial.unshift({ texto, tipo, timestamp, html });
    if (iaHistorial.length > 10) iaHistorial.pop();
    renderHistorialIA();

  } catch (e) {
    output.innerHTML = `<div class="card" style="padding:20px;border-left:3px solid var(--red);">
      <div style="font-size:11px;font-weight:800;color:var(--red);margin-bottom:6px;">Error de conexión</div>
      <p style="font-size:11px;color:var(--text-2);margin:0;">${e.message}</p>
    </div>`;
  } finally {
    if (btn) {
      btn.disabled = false;
      btn.style.opacity = '1';
    }
  }
}

// ─── KPIs del contexto enviado ───────────────────────────────────────────────
function renderContextoKpis(kpis) {
  const el = $('ia-contexto');
  if (!el) return;
  const moneyValue = value => Number.isFinite(Number(value)) ? Number(value).toLocaleString('es-MX', { style: 'currency', currency: 'MXN' }) : 'N/D';
  const pctValue = value => Number.isFinite(Number(value)) ? `${Number(value) > 0 ? '+' : ''}${Number(value).toFixed(1)}%` : 'N/D';
  const decision = Object.prototype.hasOwnProperty.call(kpis, 'venta_total');
  const items = decision ? [
    { label: 'Venta del periodo', val: moneyValue(kpis.venta_total), sub: `Vs anterior ${pctValue(kpis.variacion_venta_pct)}`, color: 'var(--orange)' },
    { label: 'Tickets', val: Number(kpis.tickets || 0).toLocaleString('es-MX'), sub: `Variacion ${pctValue(kpis.variacion_tickets_pct)}`, color: 'var(--text)' },
    { label: 'Ticket promedio', val: moneyValue(kpis.ticket_promedio), sub: `Variacion ${pctValue(kpis.variacion_ticket_promedio_pct)}`, color: 'var(--green)' },
    { label: 'Venta por comensal', val: moneyValue(kpis.venta_por_comensal), sub: `Promedio diario ${moneyValue(kpis.venta_promedio_dia)}`, color: 'var(--blue)' },
    { label: 'Fugas comerciales', val: `${Number(kpis.descuentos_pct_venta || 0).toFixed(1)}%`, sub: `Cortesia ${Number(kpis.cortesias_pct_venta || 0).toFixed(1)}% · Cancelacion ${Number(kpis.cancelaciones_pct_venta || 0).toFixed(1)}%`, color: 'var(--red)' },
    { label: 'Producto lider', val: kpis.producto_lider || 'N/D', sub: `Concentracion ${Number(kpis.concentracion_producto_lider_pct || 0).toFixed(1)}%`, color: 'var(--purple)' },
    { label: 'Canal lider', val: kpis.canal_lider || 'N/D', sub: `Participacion ${Number(kpis.participacion_canal_lider_pct || 0).toFixed(1)}%`, color: 'var(--orange)' },
    { label: 'Calidad de datos', val: String(kpis.calidad_datos || 'baja').toUpperCase(), sub: `Cobertura ${Number(kpis.cobertura_datos_pct || 0).toFixed(0)}% · ${Number(kpis.dias_con_venta || 0)} dias activos`, color: kpis.calidad_datos === 'alta' ? 'var(--green)' : 'var(--orange)' },
  ] : [
    { label: 'Periodo', val: kpis.periodo, color: 'var(--text)' },
    { label: 'Venta total', val: kpis.venta, color: 'var(--orange)' },
    { label: 'Tickets', val: kpis.tickets, color: 'var(--text)' },
    { label: 'Esta hora', val: kpis.horaActualVenta, color: 'var(--green)' },
    { label: 'Meta', val: kpis.pctMeta, color: 'var(--blue)' },
    { label: 'Mesas abiertas', val: kpis.mesasAbiertas, color: 'var(--orange)' },
  ];
  el.innerHTML = items.map(i => `
    <div class="metric-tile" style="padding:10px 12px;">
      <div class="metric-tile-label">${i.label}</div>
      <div class="metric-tile-val" style="color:${i.color};font-size:14px;">${escapeIA(i.val)}</div>
      ${i.sub ? `<div style="font-size:9.5px;color:var(--text-3);font-weight:600;margin-top:3px;line-height:1.3;">${escapeIA(i.sub)}</div>` : ''}
    </div>`).join('');
}

function escapeIA(value) {
  return String(value ?? '').replace(/[&<>"']/g, ch => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
  }[ch]));
}

// ─── Render del HTML de un análisis ─────────────────────────────────────────
function renderAnalisisIA(texto, tipo, timestamp) {
  const lines = stripEmojiIA(texto).split('\n');
  let html = '', inList = false, listType = 'ul';
  const bold = s => escapeIA(s).replace(/\*\*(.+?)\*\*/g, '<strong style="color:var(--text);">$1</strong>');

  lines.forEach(function(line) {
    line = line.trim();
    if (!line) {
      if (inList) { html += '</' + listType + '>'; inList = false; }
      return;
    }
    if (line.match(/^#{1,3}\s/)) {
      if (inList) { html += '</' + listType + '>'; inList = false; }
      const t = line.replace(/^#+\s*/, '');
      html += '<div style="font-size:12px;font-weight:800;color:var(--text);margin:14px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--border);">' + bold(t) + '</div>';
    } else if (line.match(/^[-•]\s/)) {
      if (!inList || listType !== 'ul') {
        if (inList) html += '</' + listType + '>';
        html += '<ul style="margin:2px 0 8px;padding:0;list-style:none;">';
        inList = true; listType = 'ul';
      }
      html += '<li style="display:flex;gap:8px;padding:5px 0;font-size:12px;color:var(--text-2);line-height:1.5;border-bottom:1px solid var(--border);"><span style="color:var(--orange);flex-shrink:0;margin-top:1px;">›</span><span>' + bold(line.replace(/^[-•]\s/, '')) + '</span></li>';
    } else if (line.match(/^\d+\.\s/)) {
      if (!inList || listType !== 'ol') {
        if (inList) html += '</' + listType + '>';
        html += '<ol style="margin:2px 0 8px;padding:0;list-style:none;">';
        inList = true; listType = 'ol';
      }
      const num = line.match(/^(\d+)/)[1];
      html += '<li style="display:flex;gap:9px;padding:6px 0;font-size:12px;color:var(--text-2);line-height:1.5;border-bottom:1px solid var(--border);align-items:flex-start;"><span style="min-width:20px;height:20px;background:var(--purple);color:#fff;border-radius:5px;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;">' + num + '</span><span>' + bold(line.replace(/^\d+\.\s*/, '')) + '</span></li>';
    } else {
      if (inList) { html += '</' + listType + '>'; inList = false; }
      html += '<p style="font-size:12px;color:var(--text-2);line-height:1.6;margin:3px 0;">' + bold(line) + '</p>';
    }
  });
  if (inList) html += '</' + listType + '>';

  const esUrgente   = tipo === 'urgente';
  const tipoLabel   = esUrgente ? 'Alertas críticas' : 'Análisis completo';
  const accentColor = esUrgente ? 'var(--red)' : 'var(--purple)';
  const accentLt    = esUrgente ? 'var(--red-lt)' : 'var(--purple-lt)';

  return '<div class="card" style="overflow:hidden;">'
    + '<div class="card-head" style="background:var(--bg);">'
    + '<div style="display:flex;align-items:center;gap:8px;">'
    + '<div style="width:7px;height:7px;border-radius:50%;background:' + accentColor + ';flex-shrink:0;"></div>'
    + '<span class="card-title">' + tipoLabel + '</span>'
    + '<span style="font-size:10px;color:var(--text-3);font-weight:600;">' + timestamp + '</span>'
    + '</div>'
    + '<span style="font-size:9.5px;padding:2px 9px;background:' + accentLt + ';color:' + accentColor + ';border-radius:20px;font-weight:700;">Análisis avanzado</span>'
    + '</div>'
    + '<div style="padding:14px 16px;">' + html + '</div>'
    + '</div>';
}

// ─── Historial de análisis ───────────────────────────────────────────────────
function renderHistorialIA() {
  const wrap = $('ia-historial-wrap');
  const cont = $('ia-historial');
  if (!wrap || !cont || !iaHistorial.length) return;
  wrap.style.display = 'block';
  cont.innerHTML = iaHistorial.slice(1).map((h, i) => `
    <div class="card" style="padding:10px 14px;cursor:pointer;" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none'">
      <div style="display:flex;align-items:center;gap:8px;">
        <span style="font-size:10px;font-weight:600;color:var(--text-3);">${h.timestamp}</span>
        <span style="font-size:11px;font-weight:700;color:var(--text-2);">${h.tipo === 'urgente' ? 'Alertas críticas' : 'Análisis completo'}</span>
        <span style="font-size:10px;color:var(--text-3);margin-left:auto;">Ver ›</span>
      </div>
    </div>
    <div style="display:none;margin-top:4px;">${h.html}</div>
  `).join('');
}
