/* ============================================================
   Robotia Cotizador · PDF CLIENTE (propuesta de venta)
   Tema claro. Muestra precios de venta + plan de escalabilidad.
   NO expone costos, márgenes ni constantes internas.
   ============================================================ */
function PrintDocVenta({ cot }) {
  const Eg = window.RBEngine;
  const Sx = window.RBSales;
  const vb = Sx.ventaBase(cot, cot.venta);
  const esc = cot.venta.escalabilidad;
  const mtz = esc.activo ? Sx.matrizEscalabilidad(cot, cot.venta) : null;
  const escData = mtz && mtz.K > 0 ? Sx.escalera(cot, cot.venta, mtz.Tmax - 1) : null;
  const m = MODALIDADES[cot.modalidad];

  const row = (label, val, opt) => (
    <tr style={opt && opt.bold ? { fontWeight: 600 } : null}>
      <td style={{ padding: "9px 0", borderTop: "1px solid #e3e3e3", color: opt && opt.bold ? "#111" : "#444" }}>{label}</td>
      <td style={{ padding: "9px 0", borderTop: "1px solid #e3e3e3", textAlign: "right", fontVariantNumeric: "tabular-nums", color: "#111" }}>{val}</td>
    </tr>
  );

  return (
    <div id="print-doc" style={{ display: "none", fontFamily: "var(--font-display)", color: "#111", background: "#fff" }}>
      {/* PÁGINA 1 · Oferta */}
      <section style={{ pageBreakAfter: mtz ? "always" : "auto", padding: "4mm 2mm" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", borderBottom: "2px solid #A100FF", paddingBottom: 16 }}>
          <img src="assets/logo-robotia-black.png" alt="Robotia" style={{ height: 22 }} />
          <div style={{ textAlign: "right", fontSize: 11, color: "#666" }}>
            <div style={{ textTransform: "uppercase", letterSpacing: "0.16em", fontSize: 10, color: "#A100FF", fontWeight: 600 }}>Propuesta de servicio</div>
            <div style={{ marginTop: 4 }}>{new Date(cot.fecha).toLocaleDateString("es-CL")}</div>
          </div>
        </div>

        <div style={{ marginTop: 26 }}>
          <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.16em", color: "#888" }}>Preparada para</div>
          <div style={{ fontSize: 28, fontWeight: 300, letterSpacing: "-0.02em", marginTop: 4 }}>{cot.cliente.nombre || "Cliente"}</div>
          <div style={{ fontSize: 13, color: "#555", marginTop: 4 }}>{[cot.cliente.contacto, cot.cliente.sector].filter(Boolean).join(" · ")}</div>
        </div>

        <div style={{ marginTop: 26, border: "1px solid #ddd", borderTop: "3px solid #A100FF", padding: "22px 24px", background: "#faf7ff" }}>
          <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.16em", color: "#888" }}>Servicio de monitoreo visual — {m.label}</div>
          <div style={{ fontSize: 52, fontWeight: 300, letterSpacing: "-0.03em", fontVariantNumeric: "tabular-nums", marginTop: 6 }}>
            {Eg.fmtMiles(vb.pvTotal)} <span style={{ fontSize: 18, color: "#888" }}>M$ / año</span>
          </div>
          <div style={{ fontSize: 13, color: "#555", marginTop: 6 }}>{Eg.fmtMiles(vb.pvTotal / cot.inputs.nPuntos)} M$ por punto · {cot.inputs.nPuntos} puntos de monitoreo</div>
        </div>

        <table style={{ width: "100%", borderCollapse: "collapse", marginTop: 26, fontSize: 14 }}>
          <tbody>
            {vb.items.map((it) => row(it.label, Eg.fmtMS(it.precio * vb.factor)))}
          </tbody>
          <tfoot>
            <tr>
              <td style={{ padding: "14px 0", borderTop: "2px solid #A100FF", fontWeight: 600, fontSize: 16 }}>Total anual</td>
              <td style={{ padding: "14px 0", borderTop: "2px solid #A100FF", textAlign: "right", fontWeight: 600, fontSize: 16, fontVariantNumeric: "tabular-nums" }}>{Eg.fmtMS(vb.pvTotal)}</td>
            </tr>
          </tfoot>
        </table>

        <div style={{ marginTop: 26, fontSize: 13, color: "#555", lineHeight: 1.6 }}>
          <b style={{ color: "#111" }}>Modalidad {m.label}.</b> {m.desc}
        </div>
      </section>

      {/* PÁGINA 2 · Escalabilidad */}
      {mtz ? (
        <section style={{ padding: "4mm 2mm" }}>
          <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.16em", color: "#A100FF", fontWeight: 600, borderBottom: "1px solid #ddd", paddingBottom: 10 }}>Plan de escalabilidad · el beneficio de crecer con nosotros</div>
          <p style={{ fontSize: 13, color: "#555", lineHeight: 1.6, marginTop: 14 }}>
            Comprometer más puntos de monitoreo y más años reduce el valor por punto. Cada tramo se cobra a la tarifa del escalón que lo cierra.
          </p>

          <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em", color: "#888", marginTop: 20 }}>Valor por punto / año (M$)</div>
          <table style={{ width: "100%", borderCollapse: "collapse", marginTop: 8, fontSize: 13 }}>
            <thead>
              <tr>
                <th style={{ textAlign: "left", padding: "8px 10px", borderBottom: "1px solid #ccc", color: "#888", fontWeight: 600, fontSize: 11 }}>Años \ Puntos</th>
                {mtz.steps.map((P, k) => <th key={k} style={{ textAlign: "right", padding: "8px 10px", borderBottom: "1px solid #ccc", color: "#888", fontWeight: 600, fontSize: 11 }}>{P} pts</th>)}
              </tr>
            </thead>
            <tbody>
              {mtz.rows.map((rowr, rti) => (
                <tr key={rti}>
                  <td style={{ textAlign: "left", padding: "8px 10px", borderTop: "1px solid #eee", color: "#555" }}>{rti + 1} {rti === 0 ? "año" : "años"}</td>
                  {rowr.map((c, k) => {
                    const best = rti === mtz.Tmax - 1 && k === mtz.K && mtz.K > 0;
                    return <td key={k} style={{ textAlign: "right", padding: "8px 10px", borderTop: "1px solid #eee", fontVariantNumeric: "tabular-nums", background: best ? "#f0e0ff" : "transparent", fontWeight: best ? 700 : 400, color: "#111" }}>{Eg.fmtMiles(c.ratePP)}</td>;
                  })}
                </tr>
              ))}
            </tbody>
          </table>

          {escData ? (
            <div style={{ marginTop: 24 }}>
              <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: "0.16em", color: "#888", marginBottom: 6 }}>Tarifa escalonada — {mtz.Tmax} años comprometidos</div>
              {window.StepChart ? <window.StepChart escData={escData} fmt={(v) => Eg.fmtMiles(v)} /> : null}
            </div>
          ) : null}

          <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid #ddd", paddingTop: 12, fontSize: 11, color: "#999" }}>
            <span>Robotia · El mundo de la minería potenciado por la visión artificial_</span>
            <img src="assets/logo-robotia-black.png" alt="Robotia" style={{ height: 14, opacity: 0.7 }} />
          </div>
        </section>
      ) : null}
    </div>
  );
}
window.PrintDocVenta = PrintDocVenta;