// ========== Mercado de Seguros · Catálogo ==========
// Consume el catálogo desde window.HOLAI_INSURANCE_CATALOG
// (cargado en src/catalog-data.jsx antes que este archivo).

const { useState: uMkt, useEffect: ueMkt } = React;

const EMPRESAS = (typeof window !== 'undefined' && window.HOLAI_INSURANCE_CATALOG) || [];
const RAMOS    = (typeof window !== 'undefined' && window.HOLAI_INSURANCE_RAMOS)    || [
  { k:'todos', l:'Todos', ico:'all' },
];

// ── Tipos visibles en el filtro superior ────────────────────────────────────
const TIPOS = [
  { k:'todos',     l:'Todas' },
  { k:'Generales', l:'Generales' },
  { k:'Vida',      l:'Vida' },
  { k:'Isapre',    l:'Salud (Isapres)' },
  { k:'AFP',       l:'AFP' },
];

const RAMO_COLORS = {
  salud:  { bg:'rgba(0,212,160,0.15)',  color:'#009B72' },
  vida:   { bg:'rgba(108,92,231,0.12)', color:'#6C5CE7' },
  ahorro: { bg:'rgba(255,159,67,0.16)', color:'#B45309' },
  autos:  { bg:'rgba(255,0,131,0.12)',  color:'var(--accent)' },
  apv:    { bg:'rgba(15,105,196,0.12)', color:'#0F69C4' },
  rentas: { bg:'rgba(76,29,149,0.12)',  color:'#4A1D96' },
  hogar:  { bg:'rgba(255,216,77,0.25)', color:'#8C6B16' },
  viajes: { bg:'rgba(0,115,230,0.12)',  color:'#0073E6' },
};

const RAMO_ICONS = {
  salud:  'heart',
  vida:   'shield',
  ahorro: 'trend',
  autos:  'car',
  apv:    'bolt',
  rentas: 'clock',
  hogar:  'house',
  viajes: 'plane',
};

function fmtMonto(n) {
  if (!n) return null;
  return '$' + n.toLocaleString('es-CL');
}

// ── Logo con fallback en cadena ─────────────────────────────────────────────
// Intenta varias fuentes en orden hasta que una cargue:
//   1. Logo.dev (mejor calidad, requiere token publishable en HOLAI_LOGODEV_TOKEN)
//   2. Clearbit (logo.clearbit.com)
//   3. Favicon de Google (casi siempre devuelve algo)
//   4. Avatar de iniciales con color de marca (último recurso)
function CompanyLogo({ company, size = 56 }) {
  const [srcIdx, setSrcIdx] = React.useState(0);
  const domain = company && company.domain;

  // Construir la lista de fuentes disponibles para este dominio
  const sources = React.useMemo(() => {
    const list = [];
    // 1. Logo curado manualmente (URL directa del logo oficial) — máxima prioridad
    if (company && company.logo) list.push(company.logo);
    if (!domain) return list;
    const token = (typeof window !== 'undefined' && window.HOLAI_LOGODEV_TOKEN) || '';
    // 2. Logo.dev (alta calidad, requiere token)
    if (token) list.push(`https://img.logo.dev/${domain}?token=${token}&size=128&format=png&retina=true`);
    // 3. Clearbit
    list.push(`https://logo.clearbit.com/${domain}`);
    // 4. unavatar.io (agrega varias fuentes, suele traer el logo real)
    list.push(`https://unavatar.io/${domain}?fallback=false`);
    // 5. Favicon de Google (casi siempre devuelve algo)
    list.push(`https://www.google.com/s2/favicons?domain=${domain}&sz=128`);
    return list;
  }, [domain, company && company.logo]);

  // Reset del índice si cambia la compañía
  React.useEffect(() => { setSrcIdx(0); }, [domain, company && company.logo]);

  const exhausted = (!domain && !(company && company.logo)) || srcIdx >= sources.length;

  if (exhausted) {
    const initials = (company.name || '?')
      .split(/\s+/).filter(Boolean)
      .map(w => w[0])
      .slice(0, 2)
      .join('')
      .toUpperCase();
    const bg  = (company.brand && company.brand.bg)  || '#0F69C4';
    const txt = (company.brand && company.brand.txt) || '#fff';
    return (
      <div style={{
        width: size, height: size, borderRadius: 12,
        background: bg, color: txt,
        display: 'grid', placeItems: 'center',
        fontWeight: 800, fontSize: Math.max(11, size * 0.32),
        letterSpacing: '-0.02em',
        fontFamily: 'DM Sans, sans-serif',
        flexShrink: 0,
      }}>{initials}</div>
    );
  }
  return (
    <img
      src={sources[srcIdx]}
      alt={company.name}
      onError={() => setSrcIdx(i => i + 1)}
      loading="lazy"
      style={{
        width: size, height: size, borderRadius: 12,
        objectFit: 'contain',
        background: '#fff',
        padding: 8,
        border: '1px solid var(--line)',
        flexShrink: 0,
      }}
    />
  );
}

// ── Card de empresa ─────────────────────────────────────────────────────────
function EmpresaCard({ emp, ramoFiltro, onProductClick }) {
  const prods = ramoFiltro === 'todos'
    ? emp.productos
    : emp.productos.filter(p => p.ramo === ramoFiltro);

  if (!prods.length) return null;

  const ramos = [...new Set(emp.productos.map(p => p.ramo))];

  return (
    <div className="card" style={{ padding:0, overflow:'hidden', display:'flex', flexDirection:'column' }}>
      {/* Header */}
      <div style={{ padding:'18px 20px', borderBottom:'1px solid var(--line)', display:'flex', gap:14, alignItems:'center' }}>
        <CompanyLogo company={emp} size={56}/>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontWeight:800, fontSize:16, letterSpacing:'-0.02em', lineHeight:1.2, display:'flex', alignItems:'center', gap:6, flexWrap:'wrap' }}>
            {emp.name}
            {emp.verified && (
              <span title="Compañía y dominio verificados desde CMF y sitio oficial"
                style={{ fontSize:9, background:'#1A7A42', color:'#fff', padding:'2px 6px', borderRadius:4, fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', fontWeight:700, flexShrink:0 }}>
                ✓ VERIFICADO
              </span>
            )}
            {emp.mergedInto && (
              <span title="Compañía fusionada con otra"
                style={{ fontSize:9, background:'#8C6B16', color:'#fff', padding:'2px 6px', borderRadius:4, fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', fontWeight:700, flexShrink:0 }}>
                FUSIONADA
              </span>
            )}
          </div>
          <div style={{ fontSize:11, color:'var(--muted)', marginTop:3, fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.05em', textTransform:'uppercase' }}>
            {emp.tipo}
          </div>
          <div style={{ display:'flex', gap:4, flexWrap:'wrap', marginTop:6 }}>
            {ramos.slice(0, 5).map(r => {
              const c = RAMO_COLORS[r] || { bg:'#eee', color:'#666' };
              return (
                <span key={r} style={{
                  fontSize:9, fontWeight:700, padding:'2px 7px', borderRadius:5,
                  background:c.bg, color:c.color,
                  fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em',
                }}>{r.toUpperCase()}</span>
              );
            })}
          </div>
        </div>
      </div>

      {/* Productos */}
      <div style={{ flex:1, padding:'10px 0' }}>
        {prods.map((p, i) => {
          const rc = RAMO_COLORS[p.ramo] || RAMO_COLORS.autos;
          const hasDetail = !!p.detail;
          const isVerified = p.detail && p.detail.verified;
          return (
            <div
              key={i}
              onClick={() => onProductClick && onProductClick(p, emp)}
              style={{
                padding:'10px 20px', borderBottom: i < prods.length-1 ? '1px solid var(--line)' : 'none',
                display:'flex', alignItems:'center', gap:12,
                cursor: 'pointer',
                transition: 'background 0.12s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-warm)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <span style={{
                fontSize:9, fontWeight:700, padding:'3px 8px', borderRadius:6,
                background:rc.bg, color:rc.color, whiteSpace:'nowrap',
                fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', flexShrink:0,
              }}>{(p.ramo || '').toUpperCase()}</span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight:700, display:'flex', alignItems:'center', gap:6 }}>
                  {p.nombre}
                  {p.destacado && (
                    <span style={{ fontSize:9, background:'var(--accent)', color:'#fff', padding:'2px 6px', borderRadius:4, fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em' }}>TOP</span>
                  )}
                  {isVerified ? (
                    <span title={`URL verificada desde sitio oficial${window.HOLAI_VERIFIED_AT ? ' al ' + window.HOLAI_VERIFIED_AT : ''}`}
                      style={{ fontSize:9, background:'rgba(26,122,66,0.14)', color:'#1A7A42', padding:'2px 6px', borderRadius:4, fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', fontWeight:700 }}>
                      ✓ VERIFICADO
                    </span>
                  ) : hasDetail && (
                    <span title="Datos referenciales — cotizá en el sitio oficial"
                      style={{ fontSize:9, background:'rgba(255,216,77,0.25)', color:'#8C6B16', padding:'2px 6px', borderRadius:4, fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', fontWeight:700 }}>
                      REFERENCIAL
                    </span>
                  )}
                </div>
                <div style={{ fontSize:11, color:'var(--ink-2)', marginTop:2, lineHeight:1.35 }}>{p.desc}</div>
              </div>
              <div style={{ textAlign:'right', flexShrink:0 }}>
                {p.desde ? (
                  <>
                    <div style={{ fontSize:13, fontWeight:800, letterSpacing:'-0.02em' }}>{fmtMonto(p.desde)}</div>
                    <div style={{ fontSize:10, color:'var(--muted)' }}>/{p.unit}</div>
                  </>
                ) : (
                  <div style={{ fontSize:11, color:'var(--muted)', fontStyle:'italic' }}>Cotizar</div>
                )}
              </div>
              <CompareToggleButton company={emp} product={p} size="sm"/>
              <div style={{ color:'var(--muted)', fontSize:14, flexShrink:0, paddingLeft:4 }}>›</div>
            </div>
          );
        })}
      </div>

      {/* Footer */}
      <div style={{ padding:'14px 20px', borderTop:'1px solid var(--line)' }}>
        <a href={emp.url} target="_blank" rel="noopener noreferrer"
          style={{
            display:'block', width:'100%', padding:'10px 0',
            background: emp.brand?.bg || 'var(--ink)',
            color:      emp.brand?.txt || '#fff',
            borderRadius:10, fontSize:13, fontWeight:700,
            textDecoration:'none', textAlign:'center',
          }}>
          Cotizar en {emp.name} →
        </a>
      </div>
    </div>
  );
}

// ── Página principal ────────────────────────────────────────────────────────
function MercadoPage({ go }) {
  const [ramo, setRamo] = uMkt('todos');
  const [tipo, setTipo] = uMkt('todos');
  const [q, setQ]       = uMkt('');
  const [detail, setDetail] = uMkt(null); // { product, company } o null

  const empresasFiltradas = EMPRESAS.filter(e => {
    if (tipo !== 'todos' && e.tipo !== tipo) return false;
    if (ramo !== 'todos' && !e.productos.some(p => p.ramo === ramo)) return false;
    if (q.trim()) {
      const needle = q.trim().toLowerCase();
      if (!e.name.toLowerCase().includes(needle) &&
          !e.productos.some(p => (p.nombre || '').toLowerCase().includes(needle))) return false;
    }
    return true;
  });

  const totalCompanies = EMPRESAS.length;
  const countsByRamo = RAMOS.reduce((acc, r) => {
    if (r.k === 'todos') { acc[r.k] = totalCompanies; return acc; }
    acc[r.k] = EMPRESAS.filter(e => e.productos.some(p => p.ramo === r.k)).length;
    return acc;
  }, {});

  return (
    <div className="app-shell">
      <Sidebar route="mercado" go={go}/>
      <div className="content-area">
        <TopBar
          title="Mercado de Seguros"
          sub={`${totalCompanies} aseguradoras de Chile · catálogo CMF`}/>

        {/* CTA al recomendador */}
        <div style={{
          padding:'14px 18px', background:'var(--accent-soft)', border:'1px solid rgba(15,105,196,0.15)',
          borderRadius:12, marginBottom:18, display:'flex', alignItems:'center', gap:14, flexWrap:'wrap',
        }}>
          <div style={{ width:36, height:36, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', flexShrink:0 }}>
            <I.sparkle size={16}/>
          </div>
          <div style={{ flex:1, minWidth:200 }}>
            <div style={{ fontWeight:700, fontSize:14 }}>¿No sabés cuál elegir?</div>
            <div style={{ fontSize:12, color:'var(--ink-2)', marginTop:2 }}>Te recomiendo los mejores en 30 segundos según tu edad y presupuesto.</div>
          </div>
          <button onClick={()=>go('recomendador')} className="btn btn-accent btn-sm">
            Ir al Recomendador →
          </button>
        </div>

        {/* Filtros tipo */}
        <div className="hstack" style={{ gap:8, marginBottom:14, flexWrap:'wrap' }}>
          {TIPOS.map(t => (
            <button key={t.k} onClick={()=>setTipo(t.k)}
              style={{ padding:'7px 16px', borderRadius:999, border:'1.5px solid', cursor:'pointer', fontFamily:'inherit', fontWeight:600, fontSize:13,
                background: tipo===t.k ? 'var(--ink)' : 'transparent',
                borderColor: tipo===t.k ? 'var(--ink)' : 'var(--line)',
                color: tipo===t.k ? 'var(--bg)' : 'var(--ink-2)',
              }}>{t.l}</button>
          ))}
        </div>

        {/* Filtros ramo */}
        <div style={{ display:'flex', gap:8, marginBottom:16, overflowX:'auto', paddingBottom:6, scrollbarWidth:'none' }}>
          {RAMOS.map(r => {
            const count = countsByRamo[r.k] || 0;
            const IconCmp = I[RAMO_ICONS[r.k] || 'shield'];
            return (
              <button key={r.k} onClick={()=>setRamo(r.k)}
                style={{ padding:'8px 16px', borderRadius:999, border:'1.5px solid', cursor:'pointer', fontFamily:'inherit', fontWeight:600, fontSize:13, whiteSpace:'nowrap', flexShrink:0, display:'inline-flex', alignItems:'center', gap:8,
                  background: ramo===r.k ? 'var(--accent)' : 'transparent',
                  borderColor: ramo===r.k ? 'var(--accent)' : 'var(--line)',
                  color: ramo===r.k ? '#fff' : 'var(--ink-2)',
                }}>
                {IconCmp && r.k !== 'todos' && <IconCmp size={14}/>}
                {r.l}
                <span style={{
                  fontSize:10, fontWeight:700, padding:'1px 7px', borderRadius:999,
                  background: ramo===r.k ? 'rgba(255,255,255,0.25)' : 'var(--bg-warm)',
                  color: ramo===r.k ? '#fff' : 'var(--muted)',
                  fontFamily:'JetBrains Mono, monospace',
                }}>{count}</span>
              </button>
            );
          })}
        </div>

        {/* Buscador */}
        <div style={{ display:'flex', gap:10, marginBottom:24, alignItems:'center' }}>
          <div style={{ flex:1, position:'relative' }}>
            <I.search size={16} style={{ position:'absolute', left:14, top:'50%', transform:'translateY(-50%)', color:'var(--muted)' }}/>
            <input value={q} onChange={e=>setQ(e.target.value)}
              placeholder="Buscar aseguradora o producto…"
              style={{ width:'100%', padding:'11px 14px 11px 38px', border:'1.5px solid var(--line)', borderRadius:10, fontSize:14, fontFamily:'inherit', outline:'none', background:'var(--bg)', boxSizing:'border-box' }}/>
          </div>
          {(ramo !== 'todos' || tipo !== 'todos' || q) && (
            <button onClick={()=>{ setRamo('todos'); setTipo('todos'); setQ(''); }}
              className="btn btn-ghost btn-sm">
              Limpiar filtros
            </button>
          )}
        </div>

        {/* Resumen */}
        <div className="muted" style={{ fontSize:13, marginBottom:18 }}>
          Mostrando <strong style={{ color:'var(--ink)' }}>{empresasFiltradas.length}</strong> {empresasFiltradas.length === 1 ? 'aseguradora' : 'aseguradoras'}
          {ramo !== 'todos' && <> en <strong style={{ color:'var(--ink)' }}>{RAMOS.find(r=>r.k===ramo)?.l}</strong></>}
          {tipo !== 'todos' && <> · tipo <strong style={{ color:'var(--ink)' }}>{TIPOS.find(t=>t.k===tipo)?.l}</strong></>}
        </div>

        {/* Grid */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(360px, 1fr))', gap:16 }}>
          {empresasFiltradas.map(e => (
            <EmpresaCard key={e.id} emp={e} ramoFiltro={ramo}
              onProductClick={(product, company) => setDetail({ product, company })}/>
          ))}
        </div>

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

        {!empresasFiltradas.length && (
          <div style={{ textAlign:'center', padding:'60px 20px', color:'var(--muted)' }}>
            <I.search size={40}/>
            <div style={{ fontSize:18, fontWeight:700, marginTop:16 }}>Sin resultados</div>
            <div style={{ fontSize:14, marginTop:8 }}>Probá otro filtro o término de búsqueda</div>
          </div>
        )}

        {/* Nota legal */}
        <div style={{ marginTop:32, padding:'16px 20px', background:'var(--bg-warm)', borderRadius:12, fontSize:12, color:'var(--muted)', lineHeight:1.6 }}>
          <strong style={{ color:'var(--ink)' }}>Datos del catálogo:</strong> nombres de compañías y dominios verificados (CMF Chile). Logos vía <code style={{ fontSize:11, fontFamily:'JetBrains Mono, monospace' }}>logo.clearbit.com</code>.
          <br/>
          <strong style={{ color:'#8C6B16' }}>Datos referenciales:</strong> nombres de productos, precios, capitales, tasas y edades son <strong>rangos típicos del mercado chileno</strong>, NO scrapeados del sitio oficial de cada compañía. Las URLs de productos individuales pueden no ser exactas.
          <br/>
          <strong style={{ color:'var(--ink)' }}>Para datos reales:</strong> cotizá directo con cada aseguradora. Holai no es corredor ni intermediario.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MercadoPage });