/* Perfil Hipotecario Inteligente™ — asistente conversacional + captura de lead */
const { useState: useStateC, useMemo: useMemoC, useEffect: useEffectC, useRef: useRefC } = React;
const CCV = window.CCV;
const num = (v) => { const n = parseFloat(String(v).replace(/[^0-9.-]/g, "")); return isNaN(n) ? 0 : n; };

// Pasos
const S = { CONTACTO: 0, TIPO: 1, INGRESO: 2, ENGANCHE: 3, FIJOS: 4, TARJETAS: 5, URG: 6, DOLOR: 7, COMP: 8, DEC: 9, ACC: 10, RESULT: 11 };
const TOTAL = 12;

const MSG = [
  "Empecemos por lo básico",
  "Personalizando tu cálculo…",
  "Con tu ingreso ya estimamos tu capacidad base",
  "Tu ahorro fortalece tu perfil",
  "Calculando tu relación deuda / ingreso",
  "Afinando tu tope de endeudamiento",
  "Calculando tu plazo recomendado",
  "Personalizando tu propuesta",
  "Ya casi tenemos tu perfil…",
  "Ajustando los últimos detalles",
  "Generando tu Perfil Hipotecario…",
  "",
];

const TIPOS = [
  { key: "nomina", ic: "👔", t: "Nómina", d: "Recibo mi sueldo por nómina" },
  { key: "pfae", ic: "🧾", t: "Persona Física con Actividad Empresarial", d: "Facturo con alta en el SAT" },
  { key: "empresario", ic: "🏭", t: "Empresario / Accionista", d: "Soy accionista de una empresa" },
  { key: "honorarios", ic: "✍️", t: "Honorarios", d: "Cobro por honorarios profesionales" },
];

// El cliente elige una actividad del catálogo maestro; cada banco aplica su propia tabla.

const QI = {
  urg: { q: "¿Para cuándo te gustaría mudarte?", sub: "Nos ayuda a recomendarte el mejor plazo.", opts: [["Lo antes posible", 25], ["En los próximos 3 meses", 20], ["Este año", 13], ["Solo estoy explorando", 5]] },
  dolor: { q: "¿Qué te motivó a buscar casa?", sub: "Para personalizar tu propuesta.", opts: [["Pago renta y quiero algo mío", 20], ["Mi familia necesita más espacio", 18], ["Quiero invertir y crear patrimonio", 14], ["Solo tengo curiosidad", 6]] },
  comp: { q: "¿Ya encontraste una casa que te guste?", sub: "Así ajustamos tu simulación.", opts: [["Sí, ya tengo una en mente", 20], ["Estoy viendo varias", 13], ["Apenas voy a comenzar", 6]] },
  dec: { q: "Cuando llegue el momento, ¿cómo tomarán la decisión?", sub: "Para acompañarte mejor en el proceso.", opts: [["Yo decido", 15], ["Mi pareja y yo", 12], ["Participa otro familiar", 8], ["Aún no lo hemos hablado", 4]] },
  acc: { q: "¿Qué tan listo estás para iniciar tu trámite?", sub: "Último paso para armar tu perfil.", opts: [["Listo para empezar hoy", 20], ["En cuanto vea números que me convengan", 15], ["Necesito ordenar mis finanzas primero", 9], ["Solo estoy investigando", 4]] },
};

function MonthGrid({ values, setValues }) {
  return (
    <div className="cap-months">
      {values.map((v, i) => (
        <label className="cap-m" key={i}>
          <span>Mes {i + 1}</span>
          <input className="inp cap-inp" inputMode="numeric" placeholder="$0" value={v}
            onChange={(e) => { const a = [...values]; a[i] = e.target.value; setValues(a); }} />
        </label>
      ))}
    </div>
  );
}

function ScoredQ({ q, onPick }) {
  return (
    <>
      <div className="q">{q.q}</div>
      {q.sub && <div className="q-sub">{q.sub}</div>}
      {q.opts.map(([label, score]) => (
        <button className="opt opt-simple" key={label} onClick={() => onPick(label, score)}>
          <span className="ot">{label}</span>
          <span className="opt-arrow">→</span>
        </button>
      ))}
    </>
  );
}

function CapacityFlow({ prop, enganchePct, anios, onClose, onSaved }) {
  const [step, setStep] = useStateC(0);
  const [type, setType] = useStateC(null);
  const [contacto, setContacto] = useStateC({ nombre: "", correo: "", celular: "" });
  const [touched, setTouched] = useStateC(false);
  const [sueldo, setSueldo] = useStateC("");
  const [m6, setM6] = useStateC(["", "", "", "", "", ""]);
  const [actividad, setActividad] = useStateC("servicios");
  const [shares, setShares] = useStateC("");
  const [nominaBank, setNominaBank] = useStateC("");
  const [bonos, setBonos] = useStateC("");
  const [clienteBancos, setClienteBancos] = useStateC([]);
  const [ahorro, setAhorro] = useStateC("");
  const [fijos, setFijos] = useStateC({ hipoteca: "", auto: "", nomina: "", personales: "" });
  const [tarjPago, setTarjPago] = useStateC("");
  const [intent, setIntent] = useStateC({});
  const [verDesglose, setVerDesglose] = useStateC(false);
  const savedRef = useRefC(false);

  const engineType = type === "honorarios" ? "pfae" : type;
  const engPct = num(ahorro) > 0 ? Math.max(0, Math.min(0.9, num(ahorro) / prop.precio)) : enganchePct;
  const celOK = /^\d{10}$/.test(contacto.celular.replace(/\D/g, ""));
  const correoOK = /\S+@\S+\.\S+/.test(contacto.correo);
  const contactoOK = contacto.nombre.trim().length > 2 && correoOK && celOK;
  const pct = Math.round((step / (TOTAL - 1)) * 100);

  const data = useMemoC(() => ({
    prom3: num(sueldo),
    avg6: CCV.avgMid4(m6.map(num)),
    avg3: CCV.avgRecent(m6.map(num), 3),
    actividad, shares: num(shares) / 100,
    nominaBank, bonos: num(bonos), clienteBancos,
    buroFijos: num(fijos.hipoteca) + num(fijos.auto) + num(fijos.nomina) + num(fijos.personales),
    buroCCPago: "", buroTarjetas: num(tarjPago),
  }), [sueldo, m6, actividad, shares, nominaBank, bonos, clienteBancos, fijos, tarjPago]);

  const cap = useMemoC(() => (step === S.RESULT && engineType ? CCV.computeCapacity(engineType, data, prop, engPct, anios) : null), [step, engineType, data, prop, engPct, anios]);
  const perfil = useMemoC(() => (cap ? CCV.computePerfil(engineType, cap, {
    urg: intent.urg && intent.urg.s, dolor: intent.dolor && intent.dolor.s, comp: intent.comp && intent.comp.s, dec: intent.dec && intent.dec.s, acc: intent.acc && intent.acc.s,
  }, { engancheRatio: engPct }) : null), [cap, engineType, intent, engPct]);

  const aprobados = cap ? cap.results.filter((r) => r.disponible && r.aprobado) : [];
  const disponiblesNo = cap ? cap.results.filter((r) => r.disponible && !r.aprobado) : [];
  const mejorGap = disponiblesNo.length ? disponiblesNo.reduce((a, b) => (-b.margen < -a.margen ? b : a)) : null;
  const bestPago = aprobados[0] ? aprobados[0].pago : (cap && cap.results.find((r) => r.disponible) ? cap.results.find((r) => r.disponible).pago : 0);

  // Plazo recomendado: busca el plazo (hasta 20 años) con la mensualidad más baja aprobada
  const recPlazo = useMemoC(() => {
    if (step !== S.RESULT || !cap) return null;
    const opts = [15, 20].map((a) => {
      const c = CCV.computeCapacity(engineType, data, prop, engPct, a);
      const ap = c.results.filter((r) => r.disponible && r.aprobado);
      const any = c.results.find((r) => r.disponible);
      const pago = ap[0] ? ap[0].pago : (any ? any.pago : null);
      return { anios: a, pago };
    }).filter((o) => o.pago != null);
    if (!opts.length) return null;
    const rec = opts.slice().sort((a, b) => a.pago - b.pago)[0];
    return { anios: rec.anios, pago: rec.pago };
  }, [step, cap, engineType, data, prop, engPct]);

  // Guardar lead (una sola vez por flujo)
  useEffectC(() => {
    if (step === S.RESULT && cap && perfil && !savedRef.current) {
      savedRef.current = true;
      const lead = {
        id: "L" + Date.now(), ts: Date.now(), estado: "nuevo",
        contacto, propiedad: { id: prop.id, titulo: prop.titulo, precio: prop.precio, ciudad: prop.ciudad },
        agente: { nombre: "Juan Pérez", inmobiliaria: "Inmobiliaria del Puerto" },
        tipoIngreso: type, engineType,
        ingreso: { sueldo: num(sueldo), m6: m6.map(num), actividad, shares: num(shares), nominaBank, bonos: num(bonos), clienteBancos },
        ahorro: num(ahorro), enganchePct: engPct, idealMensual: 0, anios,
        deudas: { hipoteca: num(fijos.hipoteca), auto: num(fijos.auto), nomina: num(fijos.nomina), personales: num(fijos.personales), tarjPago: num(tarjPago), total: cap.buro.total },
        intent, recPlazo,
        callback: { promesa: "En el transcurso del día", dueTs: (() => { const d = new Date(); d.setHours(23, 59, 0, 0); return d.getTime(); })() }, alerta: true,
        cap: { buro: cap.buro, results: cap.results }, perfil,
      };
      try {
        const arr = JSON.parse(localStorage.getItem("ccv_leads") || "[]");
        arr.unshift(lead);
        localStorage.setItem("ccv_leads", JSON.stringify(arr));
      } catch (e) { /* noop */ }
      // Perfil hipotecario reutilizable: se guarda para calcular compatibilidad (Buyer Match)
      // en cualquier propiedad del portal, no solo en esta.
      if (window.CCVRank) {
        const prevBuyer = window.CCVRank.getBuyer() || {};
        const ingresosCalc = engineType === "nomina" ? num(sueldo) : data.avg6;
        const buyerProfile = { ...prevBuyer, ingresos: ingresosCalc || prevBuyer.ingresos, presupuesto: prop.precio, tipo: prevBuyer.tipo || prop.tipo, ts: Date.now() };
        window.CCVRank.saveBuyer(buyerProfile);
        if (onSaved) onSaved(buyerProfile);
      }
    }
  }, [step, cap, perfil]);

  function go(n) { setStep(Math.max(0, Math.min(TOTAL - 1, n))); }
  function pickType(k) { setType(k); if (k === "honorarios") setActividad("independiente"); go(S.INGRESO); }
  function pickIntent(key, label, s, next) { setIntent((p) => ({ ...p, [key]: { label, s } })); go(next); }

  return (
    <div className="overlay" onClick={onClose}>
      <div className="sheet cap-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-head cap-head2">
          <div className="cap-brand">✨ Perfil Hipotecario Inteligente</div>
          <button className="x" onClick={onClose}>×</button>
        </div>
        {step < S.RESULT && (
          <div className="cap-progress">
            <div className="cap-bar"><span style={{ width: pct + "%" }}></span></div>
            <div className="cap-pmsg"><b>{pct}%</b> · {MSG[step]}</div>
          </div>
        )}

        <div className="sheet-body">
          {/* CONTACTO */}
          {step === S.CONTACTO && (
            <>
              <div className="q">Vamos a calcular tu crédito ideal</div>
              <div className="q-sub">En 2 minutos sabrás tu mensualidad, los bancos que te aprueban y tu mejor estrategia para <b>{prop.titulo}</b>. ¿A dónde te enviamos tu simulación?</div>
              <label className="fld-c"><span>Nombre completo</span>
                <input className={"inp" + (touched && contacto.nombre.trim().length <= 2 ? " err" : "")} placeholder="Tu nombre" value={contacto.nombre} onChange={(e) => setContacto({ ...contacto, nombre: e.target.value })} /></label>
              <label className="fld-c"><span>Número celular (WhatsApp)</span>
                <input className={"inp" + (touched && !celOK ? " err" : "")} inputMode="tel" placeholder="10 dígitos" value={contacto.celular} onChange={(e) => setContacto({ ...contacto, celular: e.target.value })} /></label>
              <label className="fld-c"><span>Correo electrónico</span>
                <input className={"inp" + (touched && !correoOK ? " err" : "")} inputMode="email" placeholder="tucorreo@ejemplo.com" value={contacto.correo} onChange={(e) => setContacto({ ...contacto, correo: e.target.value })} /></label>
              <button className="cta" style={{ marginTop: 16 }} onClick={() => { setTouched(true); if (contactoOK) go(S.TIPO); }}>Comenzar mi simulación →</button>
              <div className="note">🔒 Usamos tus datos solo para enviarte tu análisis y asesoría.</div>
            </>
          )}

          {/* TIPO */}
          {step === S.TIPO && (
            <>
              <div className="q">¿Cómo compruebas tus ingresos?</div>
              <div className="q-sub">Con esto elegimos el método de cálculo correcto para ti.</div>
              {TIPOS.map((o) => (
                <button className="opt" key={o.key} onClick={() => pickType(o.key)}>
                  <span className="ic">{o.ic}</span>
                  <span><span className="ot">{o.t}</span><span className="od">{o.d}</span></span>
                </button>
              ))}
            </>
          )}

          {/* INGRESO */}
          {step === S.INGRESO && (
            <>
              {type === "nomina" ? (
                <>
                  <div className="q">¿Cuál es tu sueldo neto mensual?</div>
                  <div className="q-sub">Lo que recibes en tu cuenta cada mes, después de impuestos.</div>
                  <label className="fld-c"><span>Sueldo neto mensual</span>
                    <input className="inp" inputMode="numeric" placeholder="$0" value={sueldo} onChange={(e) => setSueldo(e.target.value)} autoFocus /></label>
                  <label className="fld-c"><span>¿En qué banco recibes tu nómina?</span>
                    <select className="inp" value={nominaBank} onChange={(e) => setNominaBank(e.target.value)}>
                      <option value="">Selecciona tu banco…</option>
                      {CCV.BANCOS.map((b) => <option key={b.nombre} value={b.nombre}>{b.nombre}</option>)}
                      <option value="__otro">Otro banco</option>
                    </select></label>
                  <label className="fld-c"><span>Bonos mensuales demostrables <em>(opcional)</em></span>
                    <input className="inp" inputMode="numeric" placeholder="$0 al mes" value={bonos} onChange={(e) => setBonos(e.target.value)} /></label>
                  <div className="note">Algunos bancos suman tus bonos comprobables al ingreso, y otros elevan tu tope si tu nómina es de ellos.</div>
                </>
              ) : (
                <>
                  <div className="q">{type === "empresario" ? "Depósitos de tu empresa" : "Tus depósitos de los últimos 6 meses"}</div>
                  <div className="q-sub">
                    {type === "empresario"
                      ? "Lista los depósitos de los últimos 6 estados de cuenta de tu empresa (suma hasta 3 cuentas por mes). Eliminamos el mes más alto y el más bajo."
                      : "Lista los depósitos que reflejan tus ingresos en tus últimos 6 estados de cuenta (suma hasta 3 cuentas por mes). Eliminamos el mes más alto y el más bajo."}
                  </div>
                  <MonthGrid values={m6} setValues={setM6} />
                  <label className="fld-c"><span>Giro / actividad <em>(cada banco aplica su propio factor)</em></span>
                    <select className="inp" value={actividad} onChange={(e) => setActividad(e.target.value)}>
                      {CCV.MASTER_ACTS.map((a) => <option key={a.key} value={a.key}>{a.label}</option>)}
                    </select></label>
                  {type === "empresario" && (
                    <label className="fld-c"><span>% de acciones que posees en la empresa</span>
                      <input className="inp" inputMode="numeric" placeholder="Ej: 60" value={shares} onChange={(e) => setShares(e.target.value)} /></label>
                  )}
                  <div className="fld-c"><span>¿De cuáles de estos bancos ya eres cliente? <em>(mejora tu tope en algunos)</em></span>
                    <div className="ideal-chips" style={{ marginTop: 2 }}>
                      {CCV.BANCOS.map((b) => {
                        const on = clienteBancos.indexOf(b.nombre) >= 0;
                        return <button type="button" key={b.nombre} className={"chip-btn" + (on ? " on" : "")} onClick={() => setClienteBancos((p) => on ? p.filter((x) => x !== b.nombre) : [...p, b.nombre])}>{b.nombre}</button>;
                      })}
                    </div>
                  </div>
                </>
              )}
              <div className="cap-nav">
                <button className="btn-back" onClick={() => go(S.TIPO)}>← Atrás</button>
                <button className="cta cap-cta" onClick={() => go(S.ENGANCHE)}>Continuar →</button>
              </div>
            </>
          )}

          {/* ENGANCHE */}
          {step === S.ENGANCHE && (
            <>
              <div className="q">¿Cuánto tienes ahorrado para el enganche?</div>
              <div className="q-sub">Tu ahorro reduce el monto a financiar y baja tu mensualidad. Mientras más, mejores condiciones.</div>
              <label className="fld-c"><span>Ahorro disponible para enganche</span>
                <input className="inp" inputMode="numeric" placeholder="$0" value={ahorro} onChange={(e) => setAhorro(e.target.value)} autoFocus /></label>
              {num(ahorro) > 0 && (
                <div className="deuda-total">Equivale al <b>{Math.round(engPct * 100)}%</b> del valor de la casa</div>
              )}
              <div className="cap-nav">
                <button className="btn-back" onClick={() => go(S.INGRESO)}>← Atrás</button>
                <button className="cta cap-cta" onClick={() => go(S.FIJOS)}>Continuar →</button>
              </div>
            </>
          )}

          {/* FIJOS */}
          {step === S.FIJOS && (
            <>
              <div className="q">Tus pagos fijos mensuales</div>
              <div className="q-sub">Lo que ya pagas cada mes en el Buró. Nos ayuda a calcular tu tope de endeudamiento real.</div>
              <div className="cap-deudas">
                <label className="fld-c"><span>Hipoteca</span><input className="inp" inputMode="numeric" placeholder="$0 al mes" value={fijos.hipoteca} onChange={(e) => setFijos({ ...fijos, hipoteca: e.target.value })} /></label>
                <label className="fld-c"><span>Crédito de auto</span><input className="inp" inputMode="numeric" placeholder="$0 al mes" value={fijos.auto} onChange={(e) => setFijos({ ...fijos, auto: e.target.value })} /></label>
                <label className="fld-c"><span>Crédito de nómina</span><input className="inp" inputMode="numeric" placeholder="$0 al mes" value={fijos.nomina} onChange={(e) => setFijos({ ...fijos, nomina: e.target.value })} /></label>
                <label className="fld-c"><span>Préstamos personales</span><input className="inp" inputMode="numeric" placeholder="$0 al mes" value={fijos.personales} onChange={(e) => setFijos({ ...fijos, personales: e.target.value })} /></label>
              </div>
              <div className="cap-nav">
                <button className="btn-back" onClick={() => go(S.ENGANCHE)}>← Atrás</button>
                <button className="cta cap-cta" onClick={() => go(S.TARJETAS)}>Continuar →</button>
              </div>
            </>
          )}

          {/* TARJETAS */}
          {step === S.TARJETAS && (
            <>
              <div className="q">Tus tarjetas de crédito</div>
              <div className="q-sub">Suma el saldo de TODAS tus tarjetas: lo que has usado y debes al día de hoy (no el límite). Con eso estimamos tu pago mensual.</div>
              <label className="fld-c"><span>Suma de saldos de tarjetas de crédito</span>
                <input className="inp" inputMode="numeric" placeholder="$0 en total" value={tarjPago} onChange={(e) => setTarjPago(e.target.value)} autoFocus /></label>
              <div className="deuda-total">Pago mensual estimado de tarjetas: <b>{CCV.fmtMXN(num(tarjPago) * CCV.CC_FACTOR)}</b> · Total de pagos fijos: <b>{CCV.fmtMXN(data.buroFijos + num(tarjPago) * CCV.CC_FACTOR)}</b></div>
              <div className="cap-nav">
                <button className="btn-back" onClick={() => go(S.FIJOS)}>← Atrás</button>
                <button className="cta cap-cta" onClick={() => go(S.URG)}>Continuar →</button>
              </div>
            </>
          )}

          {/* INTENCIÓN (camufladas) */}
          {step === S.URG && <ScoredQ q={QI.urg} onPick={(l, s) => pickIntent("urg", l, s, S.DOLOR)} />}
          {step === S.DOLOR && <ScoredQ q={QI.dolor} onPick={(l, s) => pickIntent("dolor", l, s, S.COMP)} />}
          {step === S.COMP && <ScoredQ q={QI.comp} onPick={(l, s) => pickIntent("comp", l, s, S.DEC)} />}
          {step === S.DEC && <ScoredQ q={QI.dec} onPick={(l, s) => pickIntent("dec", l, s, S.ACC)} />}
          {step === S.ACC && <ScoredQ q={QI.acc} onPick={(l, s) => pickIntent("acc", l, s, S.RESULT)} />}

          {/* RESULTADO (solo vista del cliente) */}
          {step === S.RESULT && cap && perfil && (
            <>
              {aprobados.length > 0 ? (
                <>
                  <div className="success-ic">✓</div>
                  <div className="q" style={{ textAlign: "center" }}>¡{contacto.nombre.trim().split(" ")[0] || "Listo"}, tu crédito es viable!</div>
                  <div className="q-sub" style={{ textAlign: "center" }}>Tu perfil califica en <b>{aprobados.length} {aprobados.length === 1 ? "banco" : "bancos"}</b> para esta casa.</div>
                </>
              ) : (
                <>
                  <div className="warn-ic">!</div>
                  <div className="q" style={{ textAlign: "center" }}>{contacto.nombre.trim().split(" ")[0] || "Hola"}, tenemos una estrategia para ti</div>
                  <div className="q-sub" style={{ textAlign: "center" }}>Con tus ingresos actuales aún no alcanzas el tope, pero hay camino.</div>
                </>
              )}

              <div className="ideal-box">
                <div><span>Mensualidad estimada</span><b>{CCV.fmtMXN(bestPago)}</b></div>
              </div>

              {recPlazo && (
                <div className="ideal-rec ok">
                  ✓ A <b>{recPlazo.anios} años</b>, tu mensualidad estimada es de <b>{CCV.fmtMXN(recPlazo.pago)}</b>.
                </div>
              )}

              {aprobados.length === 0 && mejorGap && (
                <div className="coacred">
                  <b>👥 Suma a un coacreditado</b>
                  En <b>{mejorGap.banco}</b> te falta cubrir {CCV.fmtMXN(-mejorGap.margen)} de capacidad. Un coacreditado con buen Buró que aporte ~<b>{CCV.fmtMXN((-mejorGap.margen) / mejorGap.topeFactor)}</b> de ingreso mensual te alcanzaría.
                </div>
              )}

              <button className="ver-desglose" onClick={() => setVerDesglose(!verDesglose)}>{verDesglose ? "▲ Ocultar" : "▼ Ver"} desglose banco por banco</button>
              {verDesglose && (
                <div className="res-list">
                  {cap.results.map((r) => (
                    <div className={"res-card" + (!r.disponible ? " off" : r.aprobado ? " ok" : " no")} key={r.banco}>
                      <div className="res-top">
                        <span className="res-bank">{r.banco}{r.assumed && <i className="asum">≈</i>}</span>
                        {r.disponible ? <span className={"res-badge " + (r.aprobado ? "g" : "a")}>{r.aprobado ? "Aprobado" : "No alcanza"}</span> : <span className="res-badge off">No aplica</span>}
                      </div>
                      {r.disponible ? (
                        <div className="res-rows">
                          <div><span>Tope de pago</span><b>{CCV.fmtMXN(r.tope)}</b></div>
                          <div><span>Mensualidad casa</span><b>{CCV.fmtMXN(r.pago)}</b></div>
                          <div><span>Tus deudas</span><b>{CCV.fmtMXN(r.buro)}</b></div>
                          <div className="res-margin"><span>{r.aprobado ? "Te sobra" : "Te falta"}</span><b style={{ color: r.aprobado ? "var(--green)" : "oklch(0.6 0.2 25)" }}>{CCV.fmtMXN(Math.abs(r.margen))}</b></div>
                        </div>
                      ) : <div className="res-motivo">{r.motivo}</div>}
                    </div>
                  ))}
                </div>
              )}

              <button className="cta" style={{ marginTop: 18 }} onClick={onClose}>Quiero mi asesoría personalizada →</button>
              <div className="note">Ya tenemos tus datos (nombre, celular y correo): un asesor hipotecario te llamará en el transcurso del día para tu asesoría personalizada.</div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.CapacityFlow = CapacityFlow;