// ========== CMF · Mis Seguros ==========
const { useState: uCMF, useEffect: ueCMF } = React;

// URL de la API — en producción sobreescribir con window.__HOLAI_API__
const HOLAI_API = (window.__HOLAI_API__ || 'http://localhost:3001').replace(/\/$/, '');

const CMF_MOCK_POLICIES = [
  {
    id: 'cmf-1',
    company: 'HDI Seguros',
    companyRut: '96.934.530-9',
    ramo: 'Vehículos motorizados',
    polizaN: '10-1234567-0',
    rol: 'Asegurado',
    startDate: '12/06/2025',
    endDate: '12/06/2026',
    prima: 418800,
    primaLabel: '$418.800',
    status: 'Vigente',
    detail: 'Toyota Yaris 2022 · AA-BB-12',
    icon: 'car',
  },
  {
    id: 'cmf-2',
    company: 'Cruz Blanca Seguros',
    companyRut: '76.105.826-6',
    ramo: 'Salud',
    polizaN: '30-2234580-1',
    rol: 'Contratante',
    startDate: '03/08/2025',
    endDate: '03/08/2026',
    prima: 1776000,
    primaLabel: '$1.776.000',
    status: 'Vigente',
    detail: 'Plan Integral + maternidad',
    icon: 'heart',
  },
  {
    id: 'cmf-3',
    company: 'Consorcio',
    companyRut: '99.012.000-5',
    ramo: 'Incendio / Hogar',
    polizaN: '40-3105901-2',
    rol: 'Asegurado',
    startDate: '29/09/2025',
    endDate: '29/09/2026',
    prima: 148800,
    primaLabel: '$148.800',
    status: 'Vigente',
    detail: 'Depto 72m² · Providencia',
    icon: 'house',
  },
  {
    id: 'cmf-4',
    company: 'BCI Seguros de Vida',
    companyRut: '96.519.800-8',
    ramo: 'Vida',
    polizaN: '50-7890123-4',
    rol: 'Asegurado',
    startDate: '18/11/2025',
    endDate: '18/11/2026',
    prima: 98400,
    primaLabel: '$98.400',
    status: 'Suspendida',
    detail: 'UF 1.500 cobertura básica',
    icon: 'shield',
  },
  {
    id: 'cmf-5',
    company: 'Mapfre Seguros',
    companyRut: '96.560.950-7',
    ramo: 'Accidentes en viaje',
    polizaN: '70-0056712-7',
    rol: 'Contratante',
    startDate: '01/03/2025',
    endDate: '15/03/2025',
    prima: 24900,
    primaLabel: '$24.900',
    status: 'Terminada',
    detail: 'Europa · 14 días',
    icon: 'plane',
  },
];

function useCMFState() {
  const [state, setState] = uCMF(() => {
    try {
      const raw = localStorage.getItem('holai-cmf-state');
      return raw ? JSON.parse(raw) : { connected: false, policies: [], lastSync: null, rut: null };
    } catch (e) {
      return { connected: false, policies: [], lastSync: null, rut: null };
    }
  });
  ueCMF(() => {
    localStorage.setItem('holai-cmf-state', JSON.stringify(state));
  }, [state]);
  return [state, setState];
}

function formatCLP(n) {
  return '$' + n.toLocaleString('es-CL');
}

function fmtDate(iso) {
  return new Date(iso).toLocaleString('es-CL', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
}

// ---------- Modal ClaveÚnica ----------
function ClaveUnicaModal({ open, onClose, onSuccess }) {
  const [step, setStep] = uCMF(0); // 0=form 1=autenticando 2=cmf 3=polizas
  const [rut, setRut] = uCMF('');
  const [pass, setPass] = uCMF('');
  const [err, setErr] = uCMF('');

  ueCMF(() => {
    if (!open) { setStep(0); setRut(''); setPass(''); setErr(''); }
  }, [open]);

  const handleSubmit = async () => {
    if (!rut.trim() || !pass.trim()) { setErr('Ingresa tu RUT y ClaveÚnica'); return; }
    setErr('');
    setStep(1); // Autenticando con ClaveÚnica

    try {
      // Avanzar paso visual mientras la API trabaja
      const stepTimer = setTimeout(() => setStep(2), 2000);  // Conectando CMF
      const stepTimer2 = setTimeout(() => setStep(3), 5000); // Extrayendo pólizas

      const res = await fetch(`${HOLAI_API}/api/cmf/connect`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ rut: rut.trim(), password: pass }),
      });

      clearTimeout(stepTimer);
      clearTimeout(stepTimer2);

      const data = await res.json();

      if (!res.ok || !data.success) {
        throw new Error(data.error || 'Error al conectar con CMF');
      }

      onSuccess(data); // { rut, policies, lastSync, source }

    } catch (e) {
      setStep(0);
      setErr(e.message || 'No se pudo conectar. Verifica tu conexión.');
    }
  };

  if (!open) return null;

  const steps = ['CLAVEÚNICA', 'CMF · SIAC4', 'PÓLIZAS'];
  const stepLabels = ['Autenticando con ClaveÚnica...', 'Conectando con CMF · SIAC4...', 'Extrayendo pólizas (Asegurado + Contratante)...'];

  return (
    <div style={{ position:'fixed', inset:0, background:'rgba(8,12,24,0.6)', backdropFilter:'blur(8px)', display:'grid', placeItems:'center', zIndex:60, padding:20 }}
         onClick={onClose}>
      <div style={{ width:'min(500px,100%)', background:'#fff', borderRadius:20, overflow:'hidden', boxShadow:'0 30px 80px -20px rgba(0,0,0,0.45)' }}
           onClick={e => e.stopPropagation()}>

        {/* Barra navegador */}
        <div style={{ background:'#0F69C4', color:'#fff', padding:'12px 18px', display:'flex', alignItems:'center', gap:8 }}>
          <div style={{ display:'flex', gap:6 }}>
            {['#E84545','#F8D457','#2ECC71'].map(c => (
              <div key={c} style={{ width:10, height:10, borderRadius:'50%', background:c }}/>
            ))}
          </div>
          <div style={{ flex:1, textAlign:'center', fontFamily:'JetBrains Mono, monospace', fontSize:11, opacity:0.85 }}>
            accounts.claveunica.gob.cl
          </div>
          <button onClick={onClose} style={{ background:'transparent', border:0, color:'rgba(255,255,255,0.7)', cursor:'pointer', fontSize:18, lineHeight:1, padding:'0 2px' }}>×</button>
        </div>

        {/* Cuerpo */}
        <div style={{ padding:36, background:'#F4F8FC', textAlign:'center' }}>

          {/* Logos */}
          <div style={{ display:'flex', justifyContent:'center', alignItems:'center', gap:12, marginBottom:24 }}>
            <div style={{ background:'#fff', padding:'8px 14px', borderRadius:10, border:'1px solid #DDE6F0', fontSize:10, fontFamily:'JetBrains Mono, monospace', fontWeight:700, color:'#0F69C4', letterSpacing:'0.06em' }}>
              GOB.CL<br/>CLAVEÚNICA
            </div>
            <div style={{ color:'#9AAFC5', fontSize:18 }}>→</div>
            <div style={{ background:'#fff', padding:'8px 14px', borderRadius:10, border:'1px solid #DDE6F0', fontSize:10, fontFamily:'JetBrains Mono, monospace', fontWeight:700, color:'#162340', letterSpacing:'0.06em' }}>
              CMF CHILE<br/>SIAC4
            </div>
          </div>

          {step === 0 && (
            <>
              <h2 style={{ fontSize:22, fontWeight:800, margin:'0 0 6px', color:'#0B1E3E', letterSpacing:'-0.02em' }}>
                Ingresa con ClaveÚnica
              </h2>
              <p style={{ fontSize:13, color:'#5A6B82', margin:'0 0 28px', lineHeight:1.5 }}>
                Consultaremos tus pólizas en CMF.<br/>No almacenamos tu contraseña.
              </p>

              <div style={{ textAlign:'left', marginBottom:14 }}>
                <label style={{ fontSize:10, fontWeight:700, color:'#0B1E3E', letterSpacing:'0.07em', textTransform:'uppercase' }}>RUT</label>
                <input value={rut} onChange={e=>setRut(e.target.value)}
                  placeholder="12.345.678-9"
                  style={{ width:'100%', padding:'13px 16px', border:'1.5px solid #D2DCE8', borderRadius:10, marginTop:6, fontSize:15, outline:'none', background:'#fff', fontFamily:'inherit', boxSizing:'border-box' }}/>
              </div>
              <div style={{ textAlign:'left', marginBottom:20 }}>
                <label style={{ fontSize:10, fontWeight:700, color:'#0B1E3E', letterSpacing:'0.07em', textTransform:'uppercase' }}>ClaveÚnica</label>
                <input type="password" value={pass} onChange={e=>setPass(e.target.value)}
                  placeholder="••••••••"
                  onKeyDown={e=>e.key==='Enter'&&handleSubmit()}
                  style={{ width:'100%', padding:'13px 16px', border:'1.5px solid #D2DCE8', borderRadius:10, marginTop:6, fontSize:15, outline:'none', background:'#fff', fontFamily:'inherit', boxSizing:'border-box' }}/>
              </div>

              {err && <div style={{ color:'#E84545', fontSize:13, marginBottom:14, fontWeight:600 }}>{err}</div>}

              <button onClick={handleSubmit}
                style={{ width:'100%', padding:'14px', background:'#0F69C4', color:'#fff', border:0, borderRadius:10, fontSize:15, fontWeight:700, cursor:'pointer', fontFamily:'inherit' }}>
                Ingresar
              </button>

              <div style={{ marginTop:18, padding:'10px 14px', background:'#FFF8E7', border:'1px solid #F0D888', borderRadius:8, fontSize:11, color:'#8C6B16', textAlign:'left', lineHeight:1.5 }}>
                <strong>DEMO:</strong> datos simulados. En producción esto usará la autenticación real de ClaveÚnica del gobierno de Chile.
              </div>
            </>
          )}

          {step > 0 && (
            <div style={{ padding:'32px 0' }}>
              <div style={{ width:52, height:52, margin:'0 auto 20px', borderRadius:'50%', border:'4px solid rgba(15,105,196,0.15)', borderTopColor:'#0F69C4', animation:'cmf-spin 0.8s linear infinite' }}/>
              <div style={{ fontSize:15, fontWeight:700, color:'#0B1E3E', marginBottom:24 }}>
                {stepLabels[step - 1]}
              </div>
              <div style={{ maxWidth:340, margin:'0 auto' }}>
                <div style={{ display:'flex', gap:6 }}>
                  {[1,2,3].map(i => (
                    <div key={i} style={{ flex:1, height:4, borderRadius:2, background: i <= step ? '#0F69C4' : '#DDE6F0', transition:'background 0.3s' }}/>
                  ))}
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', marginTop:8, fontSize:9, fontFamily:'JetBrains Mono, monospace', color:'#7A8FA8', letterSpacing:'0.06em' }}>
                  {steps.map(s => <span key={s}>{s}</span>)}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ---------- Status badge ----------
function StatusBadge({ status }) {
  const colors = {
    Vigente:   { bg:'rgba(46,204,113,0.14)', color:'#1A7A42' },
    Suspendida:{ bg:'rgba(248,212,87,0.25)', color:'#8C6B16' },
    Terminada: { bg:'var(--bg-warm)',         color:'var(--muted)' },
  };
  const c = colors[status] || colors.Terminada;
  return (
    <span style={{ fontSize:10, fontWeight:700, padding:'3px 9px', borderRadius:6, background:c.bg, color:c.color, letterSpacing:'0.04em', fontFamily:'JetBrains Mono, monospace' }}>
      {status.toUpperCase()}
    </span>
  );
}

// ---------- Rol badge ----------
function RolBadge({ rol }) {
  const isAse = rol === 'Asegurado';
  return (
    <span style={{ fontSize:10, fontWeight:700, padding:'3px 9px', borderRadius:6,
      background: isAse ? 'var(--accent-soft)' : 'rgba(108,92,231,0.12)',
      color: isAse ? 'var(--accent)' : '#6C5CE7',
      letterSpacing:'0.04em', fontFamily:'JetBrains Mono, monospace' }}>
      {rol.toUpperCase()}
    </span>
  );
}

// ---------- CMFPage ----------
function CMFPage({ go }) {
  const [state, setState] = useCMFState();
  const [modalOpen, setModalOpen] = uCMF(false);
  const [syncing, setSyncing] = uCMF(false);

  const connect = (data) => {
    // data = { rut, policies, lastSync, source } — viene directo de la API real
    setModalOpen(false);
    setState({
      connected: true,
      policies:  data.policies || [],
      lastSync:  data.lastSync || new Date().toISOString(),
      rut:       data.rut,
      source:    data.source || 'CMF SIAC4',
    });
  };

  const sync = async () => {
    if (!state.rut) return;
    setSyncing(true);
    try {
      // Re-sync requiere las credenciales → abrimos modal de nuevo
      // Por ahora solo refrescamos el timestamp (las credenciales no se guardan)
      setState(s => ({ ...s, lastSync: new Date().toISOString() }));
    } finally {
      setSyncing(false);
    }
    setSyncing(false);
  };

  const disconnect = () => setState({ connected:false, policies:[], lastSync:null, rut:null });

  const vigentes   = state.policies.filter(p => p.status === 'Vigente');
  const asegurado  = state.policies.filter(p => p.rol === 'Asegurado');
  const contratante= state.policies.filter(p => p.rol === 'Contratante');
  const totalPrima = vigentes.reduce((a,p) => a + p.prima, 0);

  return (
    <div className="app-shell">
      <Sidebar route="cmf" go={go}/>
      <div className="content-area">
        <TopBar
          title="Mis Seguros · CMF"
          sub={state.connected
            ? `${vigentes.length} vigentes · sincronizado con CMF SIAC4`
            : 'Importa todas tus pólizas registradas en la CMF'}/>

        {/* ===== DESCONECTADO ===== */}
        {!state.connected && (
          <div>
            <div className="cmf-hero" style={{ background:'var(--accent-soft)', borderRadius:'var(--radius-l)', padding:'48px 56px', marginBottom:20 }}>
              <div className="hstack" style={{ marginBottom:18 }}>
                <span style={{ background:'var(--accent)', color:'#fff', padding:'5px 12px', borderRadius:999, fontSize:10, fontFamily:'JetBrains Mono, monospace', fontWeight:700, letterSpacing:'0.08em' }}>
                  NUEVO · CMF CONECTADO
                </span>
              </div>
              <h2 style={{ fontSize:42, fontWeight:800, letterSpacing:'-0.04em', margin:'0 0 18px', maxWidth:640, lineHeight:1.08 }}>
                Conecta tu <span style={{ color:'var(--accent)' }}>ClaveÚnica</span> y trae todas tus pólizas.
              </h2>
              <p style={{ fontSize:16, color:'var(--ink-2)', margin:'0 0 32px', maxWidth:520, lineHeight:1.6 }}>
                Accedemos al portal SIAC4 de CMF en tu nombre y traemos todas las pólizas donde figuras como <strong>asegurado</strong> o <strong>contratante</strong>.
              </p>
              <div className="hstack hero-cta" style={{ gap:12 }}>
                <button className="btn btn-accent btn-lg" onClick={()=>setModalOpen(true)}>
                  Conectar con ClaveÚnica <I.arrow size={16}/>
                </button>
                <button className="btn btn-ghost btn-lg mob-full" onClick={()=>go('dashboard')}>
                  Ingresar manualmente
                </button>
              </div>
            </div>

            {/* Trust cards */}
            <div className="cmf-trust" style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
              {[
                { ico:<I.lock size={22}/>, t:'Sin contraseñas guardadas', d:'Autenticas directo con ClaveÚnica. Nosotros nunca almacenamos tu clave.' },
                { ico:<I.sparkle size={22}/>, t:'Importación automática', d:'Ramo, vigencia, prima, compañía y tu rol. Todo desde SIAC4 de CMF.' },
                { ico:<I.bell size={22}/>, t:'Alertas de vencimiento', d:'Te avisamos antes de que venza cada póliza para que nunca quedes sin cobertura.' },
              ].map(x => (
                <div key={x.t} className="card" style={{ padding:28 }}>
                  <div style={{ width:44, height:44, borderRadius:12, background:'var(--accent-soft)', color:'var(--accent)', display:'grid', placeItems:'center', marginBottom:14 }}>{x.ico}</div>
                  <div style={{ fontSize:16, fontWeight:800, letterSpacing:'-0.02em', marginBottom:8 }}>{x.t}</div>
                  <div style={{ fontSize:13, color:'var(--ink-2)', lineHeight:1.55 }}>{x.d}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ===== CONECTADO ===== */}
        {state.connected && (
          <div>
            {/* KPIs */}
            <div className="cmf-kpi-grid" style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:20 }}>
              {[
                { label:'Pólizas vigentes',   val:vigentes.length,          sub:`de ${state.policies.length} encontradas` },
                { label:'Prima total anual',   val:formatCLP(totalPrima),   sub:`${formatCLP(Math.round(totalPrima/12))} / mes` },
                { label:'Como asegurado',      val:asegurado.length,        sub:'pólizas a tu nombre' },
                { label:'Como contratante',    val:contratante.length,      sub:'pólizas que pagas' },
              ].map(k => (
                <div key={k.label} className="card">
                  <div className="eyebrow">{k.label}</div>
                  <div style={{ fontSize:38, fontWeight:800, letterSpacing:'-0.04em', lineHeight:1, margin:'10px 0 4px' }}>{k.val}</div>
                  <div className="muted" style={{ fontSize:12 }}>{k.sub}</div>
                </div>
              ))}
            </div>

            {/* Barra de estado */}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'13px 18px', background:'var(--bg-warm)', borderRadius:12, border:'1px solid var(--line)', marginBottom:16 }}>
              <div className="hstack" style={{ gap:10, flexWrap:'wrap' }}>
                <div style={{ width:8, height:8, borderRadius:'50%', background:'#2ECC71', flexShrink:0 }}/>
                <span style={{ fontSize:13, fontWeight:700 }}>Conectado a CMF · SIAC4</span>
                <span className="mono muted" style={{ fontSize:11 }}>RUT {state.rut}</span>
                <span className="mono muted" style={{ fontSize:11 }}>· SYNC {fmtDate(state.lastSync)}</span>
              </div>
              <div className="hstack" style={{ gap:8, flexShrink:0 }}>
                <button className="btn btn-outline btn-sm" onClick={()=>setModalOpen(true)} disabled={syncing}>
                  <I.sparkle size={12}/> Re-sincronizar
                </button>
                <button className="btn btn-ghost btn-sm" onClick={disconnect}>Desconectar</button>
              </div>
            </div>

            {/* Tabla */}
            <div className="table-scroll" style={{ marginBottom:20 }}>
            <div style={{ background:'var(--bg)', borderRadius:'var(--radius)', border:'1px solid var(--line)', overflow:'hidden' }}>
              {/* Encabezado */}
              <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1.1fr 1.2fr 0.85fr 1fr 0.85fr', gap:12, padding:'13px 22px', background:'var(--bg-warm)', fontSize:9, fontFamily:'JetBrains Mono, monospace', fontWeight:700, letterSpacing:'0.08em', color:'var(--muted)' }}>
                <span>COMPAÑÍA · RAMO</span>
                <span>N° PÓLIZA</span>
                <span>VIGENCIA</span>
                <span>ROL</span>
                <span style={{ textAlign:'right' }}>PRIMA ANUAL</span>
                <span style={{ textAlign:'right' }}>ESTADO</span>
              </div>

              {state.policies.map((p, i) => (
                <div key={p.id} style={{ display:'grid', gridTemplateColumns:'1.5fr 1.1fr 1.2fr 0.85fr 1fr 0.85fr', gap:12, padding:'17px 22px', borderTop:'1px solid var(--line)', alignItems:'center', opacity: p.status !== 'Vigente' ? 0.6 : 1 }}>
                  <div>
                    <div style={{ fontSize:14, fontWeight:700 }}>{p.company}</div>
                    <div className="muted" style={{ fontSize:12, marginTop:2 }}>{p.ramo}</div>
                  </div>
                  <div className="mono" style={{ fontSize:12 }}>{p.polizaN}</div>
                  <div style={{ fontSize:12 }}>
                    <div>{p.startDate}</div>
                    <div className="muted" style={{ fontSize:11 }}>al {p.endDate}</div>
                  </div>
                  <div><RolBadge rol={p.rol}/></div>
                  <div style={{ textAlign:'right', fontSize:14, fontWeight:700 }}>{p.primaLabel}</div>
                  <div style={{ textAlign:'right' }}><StatusBadge status={p.status}/></div>
                </div>
              ))}
            </div>
            </div>{/* /table-scroll */}

            {/* CTA IA */}
            <div style={{ padding:'18px 22px', background:'var(--accent-soft)', borderRadius:14, display:'flex', gap:16, alignItems:'center' }}>
              <div style={{ width:40, height:40, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', flexShrink:0 }}>
                <I.sparkle size={18}/>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:14, fontWeight:700, marginBottom:2 }}>Pólizas importadas desde CMF</div>
                <div style={{ fontSize:13, color:'var(--ink-2)' }}>¿Quieres que la IA las analice y te diga dónde puedes ahorrar?</div>
              </div>
              <button className="btn btn-accent btn-sm" onClick={()=>go('chat')}>
                Analizar con IA <I.arrow size={12}/>
              </button>
            </div>
          </div>
        )}
      </div>

      <ClaveUnicaModal open={modalOpen} onClose={()=>setModalOpen(false)} onSuccess={connect}/>
    </div>
  );
}

Object.assign(window, { CMFPage });