/* BuyerProfileModal + MatchBadge — personalización del orden del marketplace */
const buyerStyles = `
.bp-overlay { position: fixed; inset: 0; background: oklch(0.2 0.03 290 / .55); backdrop-filter: blur(4px); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 18px; }
.bp { background: #fff; border-radius: 20px; width: min(480px, 100%); max-height: 92vh; overflow-y: auto; padding: 24px; box-shadow: 0 30px 80px oklch(0.3 0.08 295 / .4); }
.bp h2 { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.bp .bp-sub { font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-top: 5px; line-height: 1.5; }
.bp-f { margin-top: 14px; }
.bp-f label { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.bp-f input, .bp-f select { width: 100%; border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 13px; font-family: inherit; font-size: 14px; outline: none; background: #fff; }
.bp-f input:focus, .bp-f select:focus { border-color: var(--purple); }
.bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bp-ints { display: flex; gap: 7px; flex-wrap: wrap; }
.bp-int { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.bp-int.on { border-color: var(--purple); background: var(--purple-soft); color: var(--purple-deep); }
.bp-cta { margin-top: 18px; width: 100%; border: none; background: var(--purple); color: #fff; font-family: "Sora"; font-weight: 800; font-size: 15px; padding: 14px; border-radius: 12px; cursor: pointer; }
.bp-skip { width: 100%; background: none; border: none; color: var(--ink-soft); font-weight: 700; font-size: 13px; padding: 12px 0 2px; cursor: pointer; }
.bp-priv { font-size: 11px; color: var(--ink-soft); font-weight: 600; margin-top: 12px; text-align: center; }

.match-badge { display: inline-flex; align-items: center; gap: 6px; font-family: "Sora"; font-weight: 800; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; border: none; }
.match-badge.hi { background: oklch(0.93 0.06 152); color: oklch(0.4 0.13 152); }
.match-badge.mid { background: oklch(0.95 0.05 70); color: oklch(0.48 0.12 70); }
.match-badge.lo { background: oklch(0.94 0.006 290); color: var(--ink-soft); }
.match-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; width: 290px; box-shadow: 0 18px 50px oklch(0.3 0.06 295 / .25); }
.match-pop h4 { font-family: "Sora"; font-size: 13px; font-weight: 800; }
.match-pop .mp-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.match-pop .mp-r { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; }
.match-pop .mp-r .tr { height: 7px; background: oklch(0.94 0.006 290); border-radius: 999px; overflow: hidden; }
.match-pop .mp-r .tr i { display: block; height: 100%; background: var(--purple); border-radius: 999px; }
.match-pop .mp-note { font-size: 11px; color: var(--ink-soft); font-weight: 600; margin-top: 10px; line-height: 1.45; }
`;

const BUYER_INTERESES = ["Alberca", "Jardín", "Seguridad 24/7", "Cerca de playa", "Cerca de escuelas", "Terraza", "Estudio / oficina", "Cocina equipada", "Mascotas", "Plaza cercana"];

function BuyerProfileModal({ onClose, onSave }) {
  const { useState } = React;
  const prev = window.CCVRank.getBuyer() || {};
  const [f, setF] = useState({
    edad: prev.edad || "", ingresos: prev.ingresos || "", presupuesto: prev.presupuesto || "",
    tipo: prev.tipo || "Casa", intereses: prev.intereses || [],
  });
  const n = (v) => { const x = parseFloat(String(v).replace(/[^0-9.]/g, "")); return isNaN(x) ? 0 : x; };

  function toggleInt(i) {
    setF((s) => ({ ...s, intereses: s.intereses.includes(i) ? s.intereses.filter((x) => x !== i) : s.intereses.concat(i) }));
  }
  function save() {
    const b = { edad: n(f.edad), ingresos: n(f.ingresos), presupuesto: n(f.presupuesto), tipo: f.tipo, intereses: f.intereses, ts: Date.now() };
    window.CCVRank.saveBuyer(b);
    onSave(b);
  }

  return (
    <div className="bp-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="bp">
        <h2>💜 Personaliza tu búsqueda</h2>
        <div className="bp-sub">Con estos datos la IA calcula tu <b>compatibilidad</b> con cada propiedad y ordena el portal para ti. Puedes dejar campos vacíos.</div>

        <div className="bp-row">
          <div className="bp-f"><label>Tu edad</label><input inputMode="numeric" placeholder="Ej: 34" value={f.edad} onChange={(e) => setF({ ...f, edad: e.target.value })} /></div>
          <div className="bp-f"><label>Ingreso mensual (MXN)</label><input inputMode="numeric" placeholder="Ej: 45,000" value={f.ingresos} onChange={(e) => setF({ ...f, ingresos: e.target.value })} /></div>
        </div>
        <div className="bp-row">
          <div className="bp-f"><label>Presupuesto (MXN)</label><input inputMode="numeric" placeholder="Ej: 2,500,000" value={f.presupuesto} onChange={(e) => setF({ ...f, presupuesto: e.target.value })} /></div>
          <div className="bp-f"><label>¿Qué buscas?</label>
            <select value={f.tipo} onChange={(e) => setF({ ...f, tipo: e.target.value })}>
              <option>Casa</option><option>Departamento</option><option>Desarrollo</option><option>Terreno</option>
              <option>Proyecto de construcción</option><option>Bodega</option><option>Oficina</option><option>Nave industrial</option>
            </select>
          </div>
        </div>
        <div className="bp-f"><label>Tus intereses</label>
          <div className="bp-ints">
            {BUYER_INTERESES.map((i) => (
              <button key={i} className={"bp-int" + (f.intereses.includes(i) ? " on" : "")} onClick={() => toggleInt(i)}>{i}</button>
            ))}
          </div>
        </div>

        <button className="bp-cta" onClick={save}>Ver propiedades para mí →</button>
        <button className="bp-skip" onClick={onClose}>Ahora no</button>
        <div className="bp-priv">🔒 Tus datos se guardan solo en tu navegador y puedes cambiarlos cuando quieras.</div>
      </div>
    </div>
  );
}

function MatchBadge({ match }) {
  const { useState } = React;
  const [open, setOpen] = useState(false);
  if (!match) return null;
  const cls = match.score >= 80 ? "hi" : match.score >= 55 ? "mid" : "lo";
  return (
    <span style={{ position: "relative", display: "inline-block" }}>
      <button className={"match-badge " + cls} onClick={() => setOpen(!open)}>
        ✨ {match.score}% compatible contigo {open ? "▴" : "▾"}
      </button>
      {open && (
        <span className="match-pop" style={{ display: "block" }}>
          <h4>¿Por qué {match.score}%?</h4>
          <span className="mp-rows" style={{ display: "flex" }}>
            {match.parts.map((p) => (
              <span className="mp-r" key={p.k} style={{ display: "grid" }}>
                <span>{p.k}</span>
                <span className="tr"><i style={{ width: Math.round(p.s * 100) + "%" }}></i></span>
                <span>{Math.round(p.s * 100)}</span>
              </span>
            ))}
          </span>
          <span className="mp-note" style={{ display: "block" }}>Calculado con tu perfil, tu historial de navegación y esta propiedad. Cambia tu perfil con el botón "Para ti".</span>
        </span>
      )}
    </span>
  );
}

Object.assign(window, { BuyerProfileModal, MatchBadge, buyerStyles, BUYER_INTERESES });
(function () { const s = document.createElement("style"); s.textContent = buyerStyles; document.head.appendChild(s); })();