// Dashboard del stand — 4 pestañas para el consultor en la feria.
// Renderizado dentro de un browser-window frame en desktop.

window.Dashboard = function Dashboard({ leads, onClose, accent }) {
  const [tab, setTab] = React.useState('resumen');
  const tabs = [
    { id: 'resumen', label: 'Resumen', icon: 'chart' },
    { id: 'dolores', label: 'Dolores y oportunidades', icon: 'trend' },
    { id: 'prospectos', label: 'Prospectos', icon: 'users' },
    { id: 'guia', label: 'Guía de conversación', icon: 'book' },
  ];
  const T = window.THEME;

  return (
    <div style={{
      width: '100%', height: '100%', background: T.bg, color: T.text,
      display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
    }}>
      <window.PremiumBg accent={{ glow: 'var(--accent-glow)' }} />

      {/* Top bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 32px', borderBottom: `1px solid ${T.border}`,
        position: 'relative', zIndex: 2,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <window.Wordmark size={14} />
          <div style={{
            fontSize: 11, color: T.textDim, fontWeight: 600,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            padding: '4px 10px', borderRadius: 99,
            background: 'rgba(20,22,30,0.04)', border: `1px solid ${T.border}`,
          }}>Panel de cualificación · Tiempo real</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div style={{ fontSize: 12, color: T.textMuted }}>
            {leads.length} {leads.length === 1 ? 'diagnóstico' : 'diagnósticos'} hoy
          </div>
          <button onClick={onClose} style={{
            width: 32, height: 32, borderRadius: 8,
            background: 'rgba(20,22,30,0.04)', border: `1px solid ${T.border}`,
            color: T.textMuted, cursor: 'pointer', display: 'flex',
            alignItems: 'center', justifyContent: 'center', fontFamily: 'inherit',
          }}>
            <window.Icon name="x" size={16} strokeWidth={2} />
          </button>
        </div>
      </div>

      {/* Tabs */}
      <div style={{
        display: 'flex', gap: 4, padding: '12px 32px 0',
        borderBottom: `1px solid ${T.border}`, position: 'relative', zIndex: 2,
      }}>
        {tabs.map(tb => (
          <button key={tb.id} onClick={() => setTab(tb.id)} style={{
            background: 'transparent', border: 'none',
            color: tab === tb.id ? T.text : T.textMuted,
            fontSize: 13, fontWeight: 500, padding: '10px 14px',
            display: 'flex', alignItems: 'center', gap: 8,
            position: 'relative', cursor: 'pointer', fontFamily: 'inherit',
            borderBottom: `2px solid ${tab === tb.id ? 'var(--accent-solid)' : 'transparent'}`,
            marginBottom: -1,
          }}>
            <window.Icon name={tb.icon} size={15} strokeWidth={1.8} />
            {tb.label}
          </button>
        ))}
      </div>

      {/* Content */}
      <div style={{ flex: 1, overflow: 'auto', position: 'relative', zIndex: 2 }}>
        {tab === 'resumen' && <TabResumen leads={leads} />}
        {tab === 'dolores' && <TabDolores leads={leads} />}
        {tab === 'prospectos' && <TabProspectos leads={leads} />}
        {tab === 'guia' && <TabGuia leads={leads} />}
      </div>
    </div>
  );
};

// ─── TAB 1 — Resumen ──────────────────────────────────────────────
function TabResumen({ leads }) {
  const T = window.THEME;
  const total = leads.length;
  const calientes = leads.filter(l => l.temperatura === 'caliente').length;
  const tibios = leads.filter(l => l.temperatura === 'tibio').length;
  const frios = leads.filter(l => l.temperatura === 'frio').length;

  // Niche frequency
  const nicheCounts = {};
  leads.forEach(l => { nicheCounts[l.nicho] = (nicheCounts[l.nicho] || 0) + 1; });
  const topNiche = Object.entries(nicheCounts).sort((a, b) => b[1] - a[1])[0];
  const topNicheLabel = topNiche ? (window.NICHOS.find(n => n.id === topNiche[0]) || {}).label : '—';

  // Top dolor
  const dolorCounts = {};
  leads.forEach(l => { (l.dolores || []).forEach(d => { dolorCounts[d] = (dolorCounts[d] || 0) + 1; }); });
  const topDolor = Object.entries(dolorCounts).sort((a, b) => b[1] - a[1])[0];
  const topDolorLabel = topDolor ? findDolorLabel(topDolor[0]) : '—';

  // Hour bars (last 12 hours from earliest lead)
  const hours = {};
  leads.forEach(l => { const h = new Date(l.ts).getHours(); hours[h] = (hours[h] || 0) + 1; });
  const maxHour = Math.max(1, ...Object.values(hours));
  const hourEntries = Array.from({ length: 12 }, (_, i) => 8 + i)
    .map(h => ({ h, n: hours[h] || 0 }));

  if (total === 0) return <EmptyState />;

  return (
    <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KPICard label="Diagnósticos completados" value={total} icon="check" />
        <KPICard label="Calientes" value={calientes} sub={total ? Math.round(calientes / total * 100) + '%' : '0%'} tone="hot" icon="fire" />
        <KPICard label="Tibios" value={tibios} sub={total ? Math.round(tibios / total * 100) + '%' : '0%'} tone="warn" icon="trend" />
        <KPICard label="Explorando" value={frios} sub={total ? Math.round(frios / total * 100) + '%' : '0%'} tone="cold" icon="eye" />
      </div>

      {/* Temperature distribution bar */}
      <Card title="Distribución de temperatura" subtitle="Composición del lead pool del día">
        <div style={{ height: 16, borderRadius: 99, overflow: 'hidden', display: 'flex', background: 'rgba(20,22,30,0.05)', border: `1px solid ${T.border}` }}>
          {calientes > 0 && <div style={{ flex: calientes, background: '#EF4444' }} />}
          {tibios > 0 && <div style={{ flex: tibios, background: '#F59E0B' }} />}
          {frios > 0 && <div style={{ flex: frios, background: '#60A5FA' }} />}
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 12, fontSize: 12 }}>
          <Legend dot="#EF4444" label={`Caliente · ${calientes}`} />
          <Legend dot="#F59E0B" label={`Tibio · ${tibios}`} />
          <Legend dot="#60A5FA" label={`Explorando · ${frios}`} />
        </div>
      </Card>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <Card title="Nicho más frecuente" subtitle="Quién está visitando el stand hoy">
          <div style={{ fontSize: 28, fontWeight: 600, color: T.text, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
            {topNicheLabel}
          </div>
          {topNiche && (
            <div style={{ fontSize: 12, color: T.textMuted, marginTop: 6 }}>
              {topNiche[1]} {topNiche[1] === 1 ? 'diagnóstico' : 'diagnósticos'} · {Math.round(topNiche[1] / total * 100)}% del flujo
            </div>
          )}
        </Card>

        <Card title="Dolor más mencionado" subtitle="Para ajustar el pitch en vivo">
          <div style={{ fontSize: 24, fontWeight: 600, color: T.text, lineHeight: 1.15, letterSpacing: '-0.02em' }}>
            {topDolorLabel}
          </div>
          {topDolor && (
            <div style={{ fontSize: 12, color: T.textMuted, marginTop: 6 }}>
              Mencionado en {topDolor[1]} {topDolor[1] === 1 ? 'conversación' : 'conversaciones'}
            </div>
          )}
        </Card>
      </div>

      <Card title="Actividad por hora" subtitle="Hora pico y dispersión del día">
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 100, marginTop: 6 }}>
          {hourEntries.map(({ h, n }) => (
            <div key={h} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: '100%', height: `${(n / maxHour) * 100}%`,
                minHeight: n ? 4 : 1,
                background: n ? 'var(--accent-solid)' : 'rgba(20,22,30,0.06)',
                borderRadius: 4, opacity: n ? 0.85 : 1,
                transition: 'all 400ms ease',
              }} />
              <div style={{ fontSize: 10, color: T.textDim, fontVariantNumeric: 'tabular-nums' }}>{h}h</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// ─── TAB 2 — Dolores y oportunidades ──────────────────────────────
function TabDolores({ leads }) {
  const T = window.THEME;
  if (leads.length === 0) return <EmptyState />;

  const dolorCounts = {};
  leads.forEach(l => { (l.dolores || []).forEach(d => { dolorCounts[d] = (dolorCounts[d] || 0) + 1; }); });
  const sorted = Object.entries(dolorCounts).sort((a, b) => b[1] - a[1]).slice(0, 8);
  const max = sorted[0] ? sorted[0][1] : 1;

  // Niche × dolor crosstab
  const niches = window.NICHOS.filter(n => leads.some(l => l.nicho === n.id));
  const allDolores = sorted.map(([id]) => id);

  const cellCount = (nicheId, dolorId) => leads.filter(l => l.nicho === nicheId && (l.dolores || []).includes(dolorId)).length;
  const maxCell = Math.max(1, ...niches.flatMap(n => allDolores.map(d => cellCount(n.id, d))));

  return (
    <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <Card title="Ranking de dolores" subtitle="Frecuencia en los diagnósticos del día">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 6 }}>
          {sorted.map(([id, n], i) => (
            <div key={id} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 24, fontSize: 11, color: T.textDim, fontWeight: 600, textAlign: 'right' }}>#{i + 1}</div>
              <div style={{ flex: '0 0 220px', fontSize: 13, color: T.text }}>{findDolorLabel(id)}</div>
              <div style={{ flex: 1, height: 10, borderRadius: 99, background: 'rgba(20,22,30,0.05)', overflow: 'hidden' }}>
                <div style={{
                  height: '100%', width: `${(n / max) * 100}%`,
                  background: 'var(--accent-solid)', borderRadius: 99,
                  transition: 'width 600ms ease',
                }} />
              </div>
              <div style={{ width: 28, textAlign: 'right', fontSize: 13, fontWeight: 600, color: T.text, fontVariantNumeric: 'tabular-nums' }}>{n}</div>
            </div>
          ))}
        </div>
      </Card>

      <Card title="Cruce nicho × dolor" subtitle="Mapa de calor para ajustar el pitch por audiencia">
        <div style={{ overflow: 'auto', marginTop: 6 }}>
          <table style={{ borderCollapse: 'separate', borderSpacing: 4, fontSize: 12 }}>
            <thead>
              <tr>
                <th style={{ padding: 8, textAlign: 'left', color: T.textDim, fontWeight: 600 }}></th>
                {allDolores.map(id => (
                  <th key={id} style={{ padding: 8, textAlign: 'left', color: T.textMuted, fontWeight: 500, minWidth: 100, maxWidth: 130 }}>
                    <div style={{ fontSize: 11, lineHeight: 1.2 }}>{findDolorLabel(id)}</div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {niches.map(n => (
                <tr key={n.id}>
                  <td style={{ padding: '8px 12px 8px 0', fontSize: 12, color: T.text, fontWeight: 500, whiteSpace: 'nowrap' }}>{n.label}</td>
                  {allDolores.map(d => {
                    const c = cellCount(n.id, d);
                    const intensity = c / maxCell;
                    return (
                      <td key={d} style={{
                        padding: 8, borderRadius: 6, textAlign: 'center',
                        background: c ? `rgba(37,99,235,${0.06 + intensity * 0.45})` : 'rgba(20,22,30,0.02)',
                        color: c ? T.text : T.textDim,
                        fontWeight: 600, fontVariantNumeric: 'tabular-nums',
                        border: `1px solid ${c ? 'var(--accent-soft)' : T.border}`,
                      }}>
                        {c || '·'}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

// ─── TAB 3 — Lista de prospectos ──────────────────────────────────
function TabProspectos({ leads }) {
  const T = window.THEME;
  const [filter, setFilter] = React.useState('todos');
  const filtered = filter === 'todos' ? leads : leads.filter(l => l.temperatura === filter);

  const exportCSV = () => {
    const header = ['Nombre', 'Empresa', 'Cargo', 'Nicho', 'Dolor principal', 'Temperatura', 'WhatsApp', 'Email', 'Hora'];
    const rows = leads.map(l => {
      const nicheLabel = (window.NICHOS.find(n => n.id === l.nicho) || {}).label || l.nicho;
      const dolor = findDolorLabel(l.dolores?.[0]) || '';
      return [l.nombre, l.empresa, l.cargo, nicheLabel, dolor, l.temperatura, l.wsp || '', l.email || '', new Date(l.ts).toLocaleString('es-CO')];
    });
    const csv = '\uFEFF' + [header, ...rows]
      .map(r => r.map(v => `"${String(v ?? '').replace(/"/g, '""')}"`).join(','))
      .join('\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    const d = new Date();
    a.href = url;
    a.download = `leads-feria-${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}.csv`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const wspOf = (l) => {
    const niche = window.NICHOS.find(n => n.id === l.nicho);
    const dolor = findDolorLabel(l.dolores?.[0]) || 'tu dolor principal';
    const msg = encodeURIComponent(
      `Hola ${l.nombre.split(' ')[0]}, te escribo de AI First Business. Vimos que tu dolor en ${l.empresa} es "${dolor}" y queremos compartirte la solución de ${niche?.solucion?.titulo?.toLowerCase() || 'automatización'}. ¿Tienes 2 minutos?`
    );
    const num = (l.wsp || '').replace(/\D/g, '') || window.WSP_NUMBER;
    const fullNum = num.length === 10 ? '57' + num : num;
    return `https://wa.me/${fullNum}?text=${msg}`;
  };

  if (leads.length === 0) return <EmptyState />;

  return (
    <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', gap: 4, padding: 4, borderRadius: 10, background: 'rgba(20,22,30,0.04)', border: `1px solid ${T.border}` }}>
          {[
            { id: 'todos', label: `Todos (${leads.length})` },
            { id: 'caliente', label: `Calientes (${leads.filter(l => l.temperatura === 'caliente').length})` },
            { id: 'tibio', label: `Tibios (${leads.filter(l => l.temperatura === 'tibio').length})` },
            { id: 'frio', label: `Explorando (${leads.filter(l => l.temperatura === 'frio').length})` },
          ].map(o => (
            <button key={o.id} onClick={() => setFilter(o.id)} style={{
              padding: '8px 12px', borderRadius: 7, border: 'none',
              background: filter === o.id ? 'rgba(20,22,30,0.07)' : 'transparent',
              color: filter === o.id ? T.text : T.textMuted,
              fontSize: 12, fontWeight: 500, fontFamily: 'inherit', cursor: 'pointer',
            }}>{o.label}</button>
          ))}
        </div>
        <button onClick={exportCSV} style={{
          padding: '10px 14px', borderRadius: 10,
          background: 'var(--accent-solid)', color: '#fff',
          border: 'none', fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
          cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <window.Icon name="download" size={15} strokeWidth={2} />
          Exportar CSV
        </button>
      </div>

      <div style={{
        borderRadius: 14, border: `1px solid ${T.border}`,
        background: T.bgCard, overflow: 'hidden',
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: 'rgba(20,22,30,0.03)', borderBottom: `1px solid ${T.border}` }}>
              {['Hora', 'Nombre', 'Empresa', 'Cargo', 'Nicho', 'Dolor', 'Temp.', 'Acción'].map(h => (
                <th key={h} style={{ padding: '12px 14px', textAlign: 'left', color: T.textDim, fontWeight: 600, fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filtered.map((l, i) => {
              const niche = window.NICHOS.find(n => n.id === l.nicho);
              return (
                <tr key={l.id} style={{
                  borderBottom: i === filtered.length - 1 ? 'none' : `1px solid ${T.border}`,
                }}>
                  <td style={{ padding: '14px', color: T.textMuted, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>
                    {new Date(l.ts).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' })}
                  </td>
                  <td style={{ padding: '14px', color: T.text, fontWeight: 500 }}>{l.nombre}</td>
                  <td style={{ padding: '14px', color: T.text }}>{l.empresa}</td>
                  <td style={{ padding: '14px', color: T.textMuted }}>{l.cargo}</td>
                  <td style={{ padding: '14px', color: T.textMuted, fontSize: 12 }}>{niche?.label || l.nicho}</td>
                  <td style={{ padding: '14px', color: T.textMuted, fontSize: 12 }}>{findDolorLabel(l.dolores?.[0])}</td>
                  <td style={{ padding: '14px' }}><window.TempChip temp={l.temperatura} /></td>
                  <td style={{ padding: '14px' }}>
                    <a href={wspOf(l)} target="_blank" rel="noopener noreferrer" style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                      padding: '6px 10px', borderRadius: 7,
                      background: 'rgba(52,211,153,0.12)', color: '#6EE7B7',
                      border: '1px solid rgba(52,211,153,0.25)',
                      fontSize: 11, fontWeight: 500, textDecoration: 'none',
                    }}>
                      <window.Icon name="whatsapp" size={12} strokeWidth={2} />
                      Contactar
                    </a>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─── TAB 4 — Guía de conversación ─────────────────────────────────
function TabGuia({ leads }) {
  const T = window.THEME;
  // Detect most active niche of the day
  const counts = {};
  leads.forEach(l => { counts[l.nicho] = (counts[l.nicho] || 0) + 1; });
  const topId = Object.entries(counts).sort((a, b) => b[1] - a[1])[0]?.[0];
  const niche = window.NICHOS.find(n => n.id === topId) || window.NICHOS[0];

  const aperturas = {
    lab: [
      'Pregunta: "¿Cuántas horas/semana invierten preparando expedientes para INVIMA?" — abre el dolor regulatorio.',
      'Argumento: "Hoy el 70% del trabajo de tu director regulatorio es buscar y compilar — no analizar."',
      'Cierre: "Te muestro un expediente generado en 4 minutos en lugar de 3 días."',
    ],
    drogueria: [
      'Pregunta: "¿Qué referencias se quiebran con más frecuencia y cuánto te cuesta esa venta perdida?"',
      'Argumento: "Las cadenas que están ganando ya predicen demanda 14 días por delante, sucursal por sucursal."',
      'Cierre: "En 4 semanas tienes el motor de reposición sobre tu POS actual."',
    ],
    distri: [
      'Pregunta: "¿Cuántas horas/semana destinas a conciliar facturas vs pedidos?"',
      'Argumento: "Cada llamada de un cliente preguntando dónde va su pedido es una factura emocional que estás pagando."',
      'Cierre: "Te muestro cómo Distrisanty redujo conciliación 70% en 6 semanas."',
    ],
    ips: [
      'Pregunta: "¿Cuántos errores de dispensación tuviste el último mes que llegaron a auditoría?"',
      'Argumento: "Una IPS no puede correr el riesgo de un error clínico cuando el HIS y el inventario hablan idiomas distintos."',
      'Cierre: "Cierre de mes en 1 día en lugar de 7. Te muestro cómo."',
    ],
    dispositivos: [
      'Pregunta: "¿Cuánto tarda una cotización compleja desde la primera llamada?"',
      'Argumento: "Cada día que tarda una cotización es 5% menos probabilidad de cerrar."',
      'Cierre: "20 minutos en lugar de 3 días. Implementable en 4 semanas."',
    ],
    otro: [
      'Pregunta: "¿Cuál es el proceso que más tiempo le quita a tu mejor talento?"',
      'Argumento: "No vendemos software — vendemos horas recuperadas para tu mejor gente."',
      'Cierre: "Te diagnostico el proceso ahora mismo. 15 minutos."',
    ],
  };

  const objeciones = [
    {
      q: '"Esto es muy caro para nosotros"',
      a: 'Devuelve a horas: "El costo es menor que un salario senior trimestral, y recuperas más horas que ese salario." Anclar en la estimación del diagnóstico.',
    },
    {
      q: '"Ya tenemos un ERP"',
      a: 'Reafirma: "No reemplazamos tu ERP. Le agregamos la inteligencia que le falta. Se conecta en 2 semanas."',
    },
    {
      q: '"Tengo que consultarlo con el comité"',
      a: 'Ofrece: "Te preparo un caso de negocio de 1 página personalizado para tu comité. ¿Cuándo lo presentas?"',
    },
    {
      q: '"Mi equipo no está listo para IA"',
      a: 'Reformula: "No es IA — es automatización inteligente. Tu equipo sigue haciendo su trabajo, solo deja de hacer las partes repetitivas."',
    },
  ];

  return (
    <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{
        padding: 16, borderRadius: 12,
        background: 'var(--accent-soft)', border: '1px solid var(--accent-soft)',
      }}>
        <div style={{ fontSize: 11, color: 'var(--accent-solid)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>
          Coaching en vivo · audiencia de hoy
        </div>
        <div style={{ fontSize: 18, fontWeight: 600, color: T.text }}>
          Tu nicho más activo: {niche.label}
        </div>
        <div style={{ fontSize: 12, color: T.textMuted, marginTop: 4 }}>
          Ajusta tu pitch en torno a este nicho mientras la frecuencia se mantenga.
        </div>
      </div>

      <Card title="Mejores aperturas para este nicho" subtitle="Para usar en los primeros 30 segundos del stand">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
          {(aperturas[niche.id] || aperturas.otro).map((a, i) => (
            <div key={i} style={{
              padding: 12, borderRadius: 10,
              background: 'rgba(20,22,30,0.03)',
              border: `1px solid ${T.border}`,
              fontSize: 13, color: T.text, lineHeight: 1.5,
            }}>{a}</div>
          ))}
        </div>
      </Card>

      <Card title="Objeciones frecuentes" subtitle="Respuestas recomendadas que ya funcionaron">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 4 }}>
          {objeciones.map((o, i) => (
            <div key={i} style={{
              padding: 14, borderRadius: 12,
              background: 'rgba(20,22,30,0.03)',
              border: `1px solid ${T.border}`,
            }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: T.text, marginBottom: 8 }}>
                {o.q}
              </div>
              <div style={{ fontSize: 12, color: T.textMuted, lineHeight: 1.5 }}>{o.a}</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// ─── Helpers ──────────────────────────────────────────────────────
function Card({ title, subtitle, children }) {
  const T = window.THEME;
  return (
    <div style={{
      padding: 20, borderRadius: 14,
      background: T.bgCard,
      border: `1px solid ${T.border}`,
    }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: T.text }}>{title}</div>
      {subtitle && <div style={{ fontSize: 11, color: T.textDim, marginTop: 3 }}>{subtitle}</div>}
      <div style={{ marginTop: 14 }}>{children}</div>
    </div>
  );
}

function KPICard({ label, value, sub, tone, icon }) {
  const T = window.THEME;
  const toneColor = { hot: '#FCA5A5', warn: '#FCD34D', cold: '#93C5FD' }[tone];
  return (
    <div style={{
      padding: 18, borderRadius: 14,
      background: T.bgCard, border: `1px solid ${T.border}`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', top: 14, right: 14, color: toneColor || T.textDim, opacity: 0.6 }}>
        <window.Icon name={icon} size={18} strokeWidth={1.6} />
      </div>
      <div style={{ fontSize: 11, color: T.textMuted, fontWeight: 500, letterSpacing: '0.02em' }}>{label}</div>
      <div style={{ fontSize: 32, fontWeight: 600, color: toneColor || T.text, lineHeight: 1.05, marginTop: 8, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>
        {value}
      </div>
      {sub && <div style={{ fontSize: 11, color: T.textDim, marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

function Legend({ dot, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <div style={{ width: 8, height: 8, borderRadius: 99, background: dot }} />
      <span style={{ color: window.THEME.textMuted }}>{label}</span>
    </div>
  );
}

function EmptyState() {
  return (
    <div style={{
      padding: 64, height: '100%', display: 'flex',
      alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 12,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 14,
        background: 'var(--accent-soft)', color: 'var(--accent-solid)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <window.Icon name="users" size={26} strokeWidth={1.6} />
      </div>
      <div style={{ fontSize: 16, fontWeight: 600, color: window.THEME.text }}>Aún no hay diagnósticos</div>
      <div style={{ fontSize: 13, color: window.THEME.textMuted, textAlign: 'center', maxWidth: 360, lineHeight: 1.5 }}>
        Completa el flujo del prospecto desde el celular para que los datos aparezcan aquí en tiempo real.
      </div>
    </div>
  );
}

function findDolorLabel(id) {
  if (!id) return '';
  for (const n of window.NICHOS) {
    const d = n.dolores.find(x => x.id === id);
    if (d) return d.titulo;
  }
  return id;
}

window.findDolorLabel = findDolorLabel;