// ========== Recomendador · Wizard de recomendación ==========
// Pregunta 3-4 cosas al usuario y ranquea productos del catálogo
// según un score multi-criterio.
//
// Score:
//   - Edad: si fuera de rango ingreso → descarta producto.
//   - Presupuesto: bonus si la prima está cerca del rango pedido.
//   - Destacado (TOP): pequeño bonus.
//   - Específico por ramo:
//       ahorro/apv: tasa garantizada y rentabilidad histórica.
//       apv: comisión anual baja.
//       salud: copago hospitalario + red preferente/libre elección.
//       vida: capital máximo + coberturas (3+ items).
//       rentas: capital mínimo accesible + edad encaja.
//       autos: nº de coberturas incluidas.

const { useState: uRec, useEffect: ueRec } = React;

const REC_RAMOS = [
  { k:'salud',  l:'Salud',           desc:'Isapres y complementarios', ico:'heart' },
  { k:'vida',   l:'Vida',            desc:'Cobertura fallecimiento e invalidez', ico:'shield' },
  { k:'ahorro', l:'Ahorro',          desc:'Acumular capital con seguro', ico:'trend' },
  { k:'apv',    l:'APV',             desc:'Ahorro Previsional Voluntario para pensión', ico:'bolt' },
  { k:'rentas', l:'Rentas privadas', desc:'Pensión vitalicia o temporal', ico:'clock' },
  { k:'autos',  l:'Auto',            desc:'Cobertura de tu vehículo', ico:'car' },
  { k:'hogar',  l:'Hogar',           desc:'Incendio, sismo, robo, RC', ico:'house' },
  { k:'viajes', l:'Viajes',          desc:'Asistencia médica y equipaje', ico:'plane' },
];

const REC_PRESUPUESTOS = [
  { k:'bajo',     l:'Hasta $30.000',      monthly: 20000 },
  { k:'medio',    l:'$30.000 – $80.000',  monthly: 55000 },
  { k:'alto',     l:'$80.000 – $150.000', monthly: 115000 },
  { k:'premium',  l:'Más de $150.000',    monthly: 200000 },
  { k:'flex',     l:'No me importa el precio', monthly: null },
];

// Convertir todo a CLP/mes para comparar
function primaMensualCLP(product) {
  if (!product.desde) return null;
  // UF se estima ~ $37.000 CLP a noviembre 2024 (cambia, pero alcanza para comparar)
  const UF = 37000;
  let monto = product.desde;
  if (product.detail?.moneda === 'UF') monto = monto * UF;
  if (product.unit === 'año')   return monto / 12;
  if (product.unit === 'viaje') return monto / 12; // amortizar a mes para comparar
  if (product.unit === 'mes')   return monto;
  return monto;
}

function scoreProduct(p, company, criteria) {
  // ── Filtros duros — descartan al producto ──────────────────────────────
  // 1. Compañías fusionadas: sus productos están en la compañía destino.
  if (company.mergedInto) return null;
  // 2. Compañías en run-off (no toman clientes nuevos).
  if (company.inRunOff) return null;
  // 3. Compañías con audiencia restringida (FFAA, etc.) — el usuario común
  //    no califica. Si en el futuro preguntamos profesión, revisamos esto.
  if (company.audience) return null;
  // 4. Edad fuera del rango de ingreso del producto.
  if (criteria.edad && p.detail) {
    const min = p.detail.edadIngresoMin;
    const max = p.detail.edadIngresoMax;
    if (min && criteria.edad < min) return null;
    if (max && criteria.edad > max) return null;
  }

  let score = 0;
  const reasons = [];

  // Bonus de calidad de datos (verificado contra sitio oficial)
  if (p.detail && p.detail.verified) {
    score += 10;
    reasons.push('Datos del producto verificados oficialmente');
  }
  // Bonus por folleto oficial disponible (transparencia)
  if (p.detail && p.detail.brochureUrl) {
    score += 3;
    reasons.push('Folleto oficial disponible');
  }
  // Bonus de compañía verificada (CMF + sitio oficial)
  if (company.verified) score += 2;

  // Producto destacado por la empresa
  if (p.destacado) { score += 6; reasons.push('Producto destacado'); }

  // Edad — compatibilidad
  if (criteria.edad && p.detail && (p.detail.edadIngresoMin || p.detail.edadIngresoMax)) {
    score += 8;
    const min = p.detail.edadIngresoMin || 18;
    const max = p.detail.edadIngresoMax || 99;
    reasons.push(`Edad ${criteria.edad} dentro del rango (${min}-${max})`);
  }

  // Presupuesto — el más cerca del rango pedido gana
  if (criteria.presupuestoMonthly && p.desde) {
    const prima = primaMensualCLP(p);
    if (prima) {
      const diff = prima - criteria.presupuestoMonthly;
      const rel = Math.abs(diff) / criteria.presupuestoMonthly;
      if (rel < 0.25) {
        score += 12;
        reasons.push(`Encaja con tu presupuesto (~$${Math.round(prima).toLocaleString('es-CL')}/mes)`);
      } else if (diff < 0) {
        score += 7;
        reasons.push(`Por debajo de tu presupuesto (~$${Math.round(prima).toLocaleString('es-CL')}/mes)`);
      } else {
        score += Math.max(0, 5 - Math.round(rel * 5));
      }
    }
  } else if (!criteria.presupuestoMonthly && p.desde) {
    score += 3; // tiene precio publicado = transparencia
  } else if (!p.desde) {
    score += 1; // hay que cotizar
  }

  // Criterios específicos por ramo
  const d = p.detail || {};
  switch (p.ramo) {
    case 'ahorro': {
      if (typeof d.tasaGarantizada === 'number') {
        score += d.tasaGarantizada * 200; // 2.5% = 5 puntos
        reasons.push(`Tasa garantizada ${(d.tasaGarantizada*100).toFixed(2)}% ${d.moneda || ''}`);
      }
      if (typeof d.rentabilidadHist === 'number') {
        score += d.rentabilidadHist * 100;
        reasons.push(`Rentabilidad histórica ${(d.rentabilidadHist*100).toFixed(1)}%`);
      }
      break;
    }
    case 'apv': {
      if (typeof d.comisionAnual === 'number') {
        // Menor comisión = más puntos. 0.5% = 10 puntos, 1.5% = 0 puntos.
        const pts = Math.max(0, (0.015 - d.comisionAnual) * 1000);
        score += pts;
        reasons.push(`Comisión anual ${(d.comisionAnual*100).toFixed(2)}%`);
      }
      if (d.regimenAPV === 'A y B') {
        score += 3;
        reasons.push('Soporta Régimen A y B');
      }
      break;
    }
    case 'salud': {
      if (typeof d.copagoHospital === 'number') {
        score += d.copagoHospital * 12;
        reasons.push(`Cobertura hospital ${Math.round(d.copagoHospital*100)}%`);
      }
      if (d.redPrestadores === 'libre elección') { score += 5; reasons.push('Libre elección de prestadores'); }
      if (d.redPrestadores === 'preferente')     { score += 3; reasons.push('Red preferente'); }
      if (d.maternidadCubierta === true)         { score += 2; reasons.push('Maternidad cubierta'); }
      break;
    }
    case 'vida': {
      if (d.capital && d.capital.max) {
        score += Math.min(10, d.capital.max / 200);
        reasons.push(`Capital hasta ${d.capital.unit || ''} ${d.capital.max.toLocaleString('es-CL')}`);
      }
      if (Array.isArray(d.coberturas) && d.coberturas.length >= 3) {
        score += 4;
        reasons.push(`${d.coberturas.length} coberturas incluidas`);
      }
      if (d.examenesMedicos && d.examenesMedicos.includes('no requiere')) {
        score += 2;
        reasons.push('Sin examen médico');
      }
      break;
    }
    case 'rentas': {
      if (d.capital && d.capital.min && d.capital.min <= 600) {
        score += 5;
        reasons.push(`Capital mínimo accesible (UF ${d.capital.min})`);
      }
      if (Array.isArray(d.modalidades) && d.modalidades.length >= 2) {
        score += 4;
        reasons.push(`${d.modalidades.length} modalidades disponibles`);
      }
      break;
    }
    case 'autos': {
      if (Array.isArray(d.coberturasIncluidas)) {
        score += d.coberturasIncluidas.length * 2;
        if (d.coberturasIncluidas.length >= 4) {
          reasons.push(`${d.coberturasIncluidas.length} coberturas incluidas`);
        }
      }
      break;
    }
    case 'hogar': {
      if (Array.isArray(d.coberturas) && d.coberturas.length >= 3) {
        score += d.coberturas.length;
        reasons.push(`${d.coberturas.length} coberturas`);
      }
      break;
    }
  }

  return { product: p, company, score: Math.round(score * 10) / 10, reasons };
}

function rankProducts(criteria) {
  const all = (window.HOLAI_INSURANCE_CATALOG || []);
  const results = [];
  for (const company of all) {
    // Saltar temprano: fusionadas, en run-off, audiencia restringida
    if (company.mergedInto || company.inRunOff || company.audience) continue;
    for (const p of company.productos) {
      if (p.ramo !== criteria.ramo) continue;
      const scored = scoreProduct(p, company, criteria);
      if (scored) results.push(scored);
    }
  }
  return results.sort((a,b) => b.score - a.score);
}

// ── Step indicator ──────────────────────────────────────────────────────────
function StepBar({ step, total }) {
  return (
    <div style={{ display:'flex', gap:6, marginBottom: 28 }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          flex:1, height:5, borderRadius:3,
          background: i < step ? 'var(--accent)' : 'var(--bg-warm)',
          transition: 'background 0.2s',
        }}/>
      ))}
    </div>
  );
}

// ── Página principal ────────────────────────────────────────────────────────
function RecomendadorPage({ go }) {
  const [step, setStep] = uRec(0); // 0 ramo, 1 edad, 2 presupuesto, 3 resultados
  const [ramo, setRamo] = uRec(null);
  const [edad, setEdad] = uRec('');
  const [presupuestoK, setPresupuestoK] = uRec(null);
  const [detail, setDetail] = uRec(null);

  const presupuesto = REC_PRESUPUESTOS.find(p => p.k === presupuestoK);

  const ramoNeedsEdad = ramo && ['vida','salud','ahorro','apv','rentas'].includes(ramo);

  const goNext = () => setStep(s => s + 1);
  const goBack = () => setStep(s => Math.max(0, s - 1));
  const restart = () => { setStep(0); setRamo(null); setEdad(''); setPresupuestoK(null); };

  const criteria = {
    ramo,
    edad: edad ? parseInt(edad, 10) : null,
    presupuestoMonthly: presupuesto ? presupuesto.monthly : null,
  };

  const results = step === 3 ? rankProducts(criteria) : [];
  const top = results.slice(0, 10);

  // Total de steps: ramo, [edad opcional], presupuesto, resultados.
  const TOTAL_STEPS = 4;

  return (
    <div className="app-shell">
      <Sidebar route="recomendador" go={go}/>
      <div className="content-area">
        <TopBar
          title="Recomendador de seguros"
          sub="Analizamos el mercado y te mostramos las opciones que más encajan con tus criterios"/>

        <div style={{ maxWidth: 720, margin:'0 auto', width:'100%' }}>
          <StepBar step={step + 1} total={TOTAL_STEPS}/>

          {/* ── Step 0: ramo ────────────────────────────────────────── */}
          {step === 0 && (
            <div>
              <div className="eyebrow">Paso 1 de {TOTAL_STEPS}</div>
              <h2 style={{ fontSize:28, fontWeight:800, letterSpacing:'-0.03em', margin:'8px 0 18px' }}>
                ¿Qué tipo de seguro estás buscando?
              </h2>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(200px, 1fr))', gap:12 }}>
                {REC_RAMOS.map(r => {
                  const IconCmp = I[r.ico];
                  const selected = ramo === r.k;
                  return (
                    <button key={r.k}
                      onClick={() => { setRamo(r.k); setTimeout(goNext, 120); }}
                      style={{
                        background: selected ? 'var(--accent-soft)' : 'var(--bg)',
                        border: selected ? '2px solid var(--accent)' : '1.5px solid var(--line)',
                        borderRadius: 14,
                        padding:'18px 16px',
                        cursor:'pointer',
                        textAlign:'left',
                        fontFamily:'inherit',
                        transition:'all 0.15s',
                      }}>
                      <div style={{ width:36, height:36, borderRadius:10, background:'var(--accent-soft)', color:'var(--accent)', display:'grid', placeItems:'center', marginBottom:10 }}>
                        {IconCmp && <IconCmp size={18}/>}
                      </div>
                      <div style={{ fontWeight:800, fontSize:15, marginBottom:3 }}>{r.l}</div>
                      <div style={{ fontSize:12, color:'var(--ink-2)', lineHeight:1.4 }}>{r.desc}</div>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {/* ── Step 1: edad ──────────────────────────────────────── */}
          {step === 1 && (
            <div>
              <div className="eyebrow">Paso 2 de {TOTAL_STEPS}</div>
              <h2 style={{ fontSize:28, fontWeight:800, letterSpacing:'-0.03em', margin:'8px 0 8px' }}>
                ¿Cuántos años tenés?
              </h2>
              <p className="muted" style={{ fontSize:14, marginBottom:24 }}>
                {ramoNeedsEdad
                  ? 'Para descartar productos donde no cumplís la edad de ingreso.'
                  : 'Opcional. Si lo querés saltear, deja vacío y continuá.'}
              </p>

              <input
                type="number"
                inputMode="numeric"
                min={0} max={120}
                value={edad}
                onChange={(e)=>setEdad(e.target.value)}
                placeholder="35"
                autoFocus
                style={{
                  width:'100%', padding:'18px 22px', fontSize:32, fontWeight:800,
                  border:'2px solid var(--line)', borderRadius:14, outline:'none',
                  fontFamily:'inherit', boxSizing:'border-box',
                  letterSpacing:'-0.03em',
                }}/>

              <div className="hstack" style={{ gap:10, marginTop:24, justifyContent:'space-between' }}>
                <button className="btn btn-ghost" onClick={goBack}>← Volver</button>
                <button className="btn btn-accent btn-lg" onClick={goNext}
                  disabled={ramoNeedsEdad && (!edad || parseInt(edad,10) < 18 || parseInt(edad,10) > 99)}>
                  Continuar →
                </button>
              </div>
              {ramoNeedsEdad && edad && (parseInt(edad,10) < 18 || parseInt(edad,10) > 99) && (
                <div style={{ marginTop:12, color:'#E84545', fontSize:13, fontWeight:600 }}>
                  Edad fuera de rango aceptable (18-99).
                </div>
              )}
            </div>
          )}

          {/* ── Step 2: presupuesto ───────────────────────────────── */}
          {step === 2 && (
            <div>
              <div className="eyebrow">Paso 3 de {TOTAL_STEPS}</div>
              <h2 style={{ fontSize:28, fontWeight:800, letterSpacing:'-0.03em', margin:'8px 0 8px' }}>
                ¿Cuánto querés invertir al mes?
              </h2>
              <p className="muted" style={{ fontSize:14, marginBottom:24 }}>
                {ramo === 'apv' || ramo === 'rentas' || ramo === 'ahorro'
                  ? 'Tu aporte mensual aproximado. Te muestra opciones que encajan.'
                  : 'Prima aproximada en CLP. Es referencial.'}
              </p>

              <div style={{ display:'grid', gap:10 }}>
                {REC_PRESUPUESTOS.map(p => {
                  const selected = presupuestoK === p.k;
                  return (
                    <button key={p.k}
                      onClick={() => { setPresupuestoK(p.k); setTimeout(goNext, 120); }}
                      style={{
                        background: selected ? 'var(--accent-soft)' : 'var(--bg)',
                        border: selected ? '2px solid var(--accent)' : '1.5px solid var(--line)',
                        borderRadius: 12,
                        padding:'16px 20px',
                        cursor:'pointer',
                        textAlign:'left',
                        fontFamily:'inherit',
                        fontSize:15,
                        fontWeight:700,
                      }}>
                      {p.l}
                    </button>
                  );
                })}
              </div>

              <div style={{ marginTop:24 }}>
                <button className="btn btn-ghost" onClick={goBack}>← Volver</button>
              </div>
            </div>
          )}

          {/* ── Step 3: resultados ────────────────────────────────── */}
          {step === 3 && (
            <div>
              <div className="eyebrow">Tu recomendación</div>
              <h2 style={{ fontSize:28, fontWeight:800, letterSpacing:'-0.03em', margin:'8px 0 6px' }}>
                {top.length > 0
                  ? `${top.length === 10 ? 'Top 10' : top.length} opciones para ti`
                  : 'No encontré opciones'}
              </h2>
              <div className="muted" style={{ fontSize:13, marginBottom:18 }}>
                Ramo <strong style={{color:'var(--ink)'}}>{REC_RAMOS.find(r=>r.k===ramo)?.l}</strong>
                {edad && <> · edad <strong style={{color:'var(--ink)'}}>{edad}</strong></>}
                {presupuesto && <> · presupuesto <strong style={{color:'var(--ink)'}}>{presupuesto.l}</strong></>}
                <button onClick={restart}
                  style={{ marginLeft:12, background:'transparent', border:0, color:'var(--accent)', cursor:'pointer', fontWeight:700, fontSize:13, textDecoration:'underline' }}>
                  Cambiar respuestas
                </button>
              </div>

              {top.length === 0 && (
                <div style={{ padding:'40px 20px', textAlign:'center', color:'var(--muted)' }}>
                  <I.search size={36}/>
                  <div style={{ fontSize:16, fontWeight:700, marginTop:14, color:'var(--ink)' }}>
                    No hay productos que cumplan tus filtros
                  </div>
                  <div style={{ fontSize:13, marginTop:6 }}>
                    Probá <button onClick={restart} style={{ background:'transparent', border:0, color:'var(--accent)', cursor:'pointer', fontWeight:700, textDecoration:'underline' }}>otros filtros</button> o
                    explorá el <button onClick={() => go('mercado')} style={{ background:'transparent', border:0, color:'var(--accent)', cursor:'pointer', fontWeight:700, textDecoration:'underline' }}>catálogo completo</button>.
                  </div>
                </div>
              )}

              <div style={{ display:'grid', gap:12 }}>
                {top.map((r, i) => (
                  <ResultCard key={`${r.company.id}-${r.product.id || r.product.nombre}`} rank={i+1} result={r}
                    onClick={() => setDetail({ product: r.product, company: r.company })}/>
                ))}
              </div>

              {top.length > 0 && (
                <div style={{
                  marginTop:24, padding:'24px 22px', borderRadius:16,
                  background:'var(--accent-soft)', border:'1px solid var(--accent)',
                }}>
                  <div style={{ fontWeight:800, fontSize:17, letterSpacing:'-0.02em', marginBottom:4 }}>
                    Te mando estas opciones a tu correo
                  </div>
                  <div className="muted" style={{ fontSize:13, marginBottom:16, lineHeight:1.5 }}>
                    Más alertas de precio y novedades para tu seguro de {REC_RAMOS.find(r=>r.k===ramo)?.l?.toLowerCase()}. Sin spam.
                  </div>
                  <LeadCaptureForm
                    source="recomendador"
                    cta="Enviarme las opciones"
                    meta={{
                      ramo,
                      edad: edad ? parseInt(edad, 10) : null,
                      presupuesto: presupuesto ? presupuesto.k : null,
                      top: top.slice(0, 3).map(r => `${r.company.name} · ${r.product.nombre}`),
                    }}/>
                </div>
              )}

              {top.length > 0 && (
                <div style={{ marginTop:18, fontSize:11, color:'var(--muted)', textAlign:'center', lineHeight:1.6 }}>
                  Ranking basado en compatibilidad con tu edad, presupuesto y datos del producto. Cotizá directo con cada compañía para precio real.
                </div>
              )}
            </div>
          )}

          {/* Modal de detalle compartido */}
          <ProductDetailModal
            open={!!detail}
            onClose={()=>setDetail(null)}
            product={detail?.product}
            company={detail?.company}/>
        </div>
      </div>
    </div>
  );
}

// ── Card de resultado ─────────────────────────────────────────────
function ResultCard({ rank, result, onClick }) {
  const { product: p, company: c, score, reasons } = result;
  const primaMes = primaMensualCLP(p);
  return (
    <div onClick={onClick} className="card"
      style={{ padding:0, cursor:'pointer', overflow:'hidden', transition:'transform 0.12s' }}
      onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
      onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
      <div style={{ display:'flex', alignItems:'center', gap:14, padding:'14px 18px' }}>
        {/* Ranking */}
        <div style={{
          width:32, height:32, borderRadius:'50%',
          background: rank === 1 ? '#FFD700' : rank === 2 ? '#C0C0C0' : rank === 3 ? '#CD7F32' : 'var(--bg-warm)',
          color: rank <= 3 ? '#0B1E3E' : 'var(--ink-2)',
          display:'grid', placeItems:'center', fontWeight:800, fontSize:14,
          fontFamily:'JetBrains Mono, monospace', flexShrink:0,
        }}>{rank}</div>

        {/* Logo */}
        <CompanyLogo company={c} size={48}/>

        {/* Info */}
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:11, color:'var(--muted)', fontFamily:'JetBrains Mono, monospace', textTransform:'uppercase', letterSpacing:'0.05em' }}>
            {c.name}
          </div>
          <div style={{ fontWeight:800, fontSize:16, letterSpacing:'-0.02em', marginTop:1 }}>{p.nombre}</div>
          {p.desc && <div style={{ fontSize:12, color:'var(--ink-2)', marginTop:2, lineHeight:1.4 }}>{p.desc}</div>}
        </div>

        {/* Precio */}
        <div style={{ textAlign:'right', flexShrink:0 }}>
          {p.desde ? (
            <>
              <div style={{ fontSize:11, color:'var(--muted)', fontFamily:'JetBrains Mono, monospace' }}>DESDE</div>
              <div style={{ fontSize:17, fontWeight:800, letterSpacing:'-0.02em' }}>${p.desde.toLocaleString('es-CL')}</div>
              <div style={{ fontSize:10, color:'var(--muted)' }}>/ {p.unit}</div>
            </>
          ) : (
            <div style={{ fontSize:12, color:'var(--muted)', fontStyle:'italic' }}>Cotizar</div>
          )}
        </div>

        {/* Toggle comparar */}
        <CompareToggleButton company={c} product={p} size="sm"/>
      </div>

      {/* Razones del match */}
      {reasons.length > 0 && (
        <div style={{ padding:'10px 18px 14px', borderTop:'1px solid var(--line)', background:'var(--bg-warm)' }}>
          <div style={{ fontSize:10, fontFamily:'JetBrains Mono, monospace', color:'var(--muted)', marginBottom:6, letterSpacing:'0.06em' }}>POR QUÉ TE LO RECOMIENDO</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
            {reasons.slice(0, 5).map((r, i) => (
              <span key={i} style={{
                fontSize:11, padding:'3px 9px', borderRadius:999,
                background:'#fff', color:'var(--ink-2)', border:'1px solid var(--line)', fontWeight:600,
              }}>✓ {r}</span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.RecomendadorPage = RecomendadorPage;