/* ============================================================
   Robotia Cotizador · Pantalla 04' — Precio de venta (cliente)
   Márgenes por ítem + parámetros del plan de escalabilidad.
   ============================================================ */
const S = window.RBSales;

function pct(n) { return window.RBEngine.fmtDec(n * 100, 0) + "%"; }

function MarginSlider({ value, onChange }) {
  return (
    <div className="margin-slider">
      <input type="range" min="0" max="0.8" step="0.01" value={value} onChange={(e) => onChange(parseFloat(e.target.value))} />
      <span className="mval">{pct(value)}</span>
    </div>
  );
}

function Venta({ cot, setCot, onNext, onBack, embedded }) {
  const Eg = window.RBEngine;
  const venta = cot.venta;
  const esc = venta.escalabilidad;

  // ---- init defaults once (necesita los puntos base) ----
  useEffect(() => {
    const base = cot.inputs.nPuntos;
    const patch = {};
    if (!esc.pasosPuntos || esc.pasosPuntos.length === 0 || esc.pasosPuntos[0] !== base) {
      const extras = (esc.pasosPuntos && esc.pasosPuntos.length > 1)
        ? esc.pasosPuntos.slice(1).filter((p) => p > base)
        : [base * 2, base * 3];
      patch.pasosPuntos = [base].concat(extras);
    }
    if (esc.margenInicial == null) {
      patch.margenInicial = +S.ventaBase(cot, venta).margenProyecto.toFixed(3);
    }
    if (Object.keys(patch).length) {
      setCot({ ...cot, venta: { ...venta, escalabilidad: { ...esc, ...patch } } });
    }
  }, [cot.modalidad]); // re-init al cambiar de modalidad (tabs del conjunto)

  const vb = S.ventaBase(cot, venta);

  const setMargen = (key, v) => setCot({ ...cot, venta: { ...venta, margenes: { ...venta.margenes, [key]: v } } });
  const setEsc = (patch) => setCot({ ...cot, venta: { ...venta, escalabilidad: { ...esc, ...patch } } });

  // pasos de puntos
  const pasos = esc.pasosPuntos || [cot.inputs.nPuntos];
  const setPaso = (idx, v) => { const next = pasos.slice(); next[idx] = v; setEsc({ pasosPuntos: next }); };
  const addPaso = () => { const last = pasos[pasos.length - 1] || cot.inputs.nPuntos; setEsc({ pasosPuntos: pasos.concat([last + cot.inputs.nPuntos]) }); };
  const rmPaso = (idx) => setEsc({ pasosPuntos: pasos.filter((_, x) => x !== idx) });

  const m0 = esc.margenInicial != null ? esc.margenInicial : vb.margenProyecto;
  const mf = esc.margenFinal;

  // ---- margen global: rellena todos los ítems de un click ----
  const [globalM, setGlobalM] = useState(null);
  const gmVal = globalM != null ? globalM : (venta.margenes.default != null ? venta.margenes.default : 0.35);
  const aplicarGlobal = () => {
    const keys = ["datos", "operaciones", "etiquetado", "desarrollo", "calibraciones", "proyectos"];
    const m = Object.assign({}, venta.margenes, { default: gmVal });
    keys.forEach((k) => { m[k] = gmVal; });
    setCot({ ...cot, venta: { ...venta, margenes: m } });
  };

  const Root = embedded ? "div" : "div";
  return (
    <Root className={embedded ? "" : "wrap app-screen"} style={embedded ? {} : { paddingBottom: 120 }}>
      {embedded ? null : (
        <PageHead
          eyebrow="Paso 04 · Precio de venta"
          title={"Margen y plan de escalabilidad<span class=\"u\">_</span>"}
          lede="Defina el margen objetivo por ítem; el precio de venta es Costo ÷ (1 − margen). Luego configure el plan de escalabilidad que mostrará al cliente el beneficio de comprometer más puntos y más años."
        />
      )}

      {/* ---------- Margen global ---------- */}
      <div className="globalmargin">
        <div className="gm-text">
          <div className="gm-label">Margen global · {MODALIDADES[cot.modalidad].label}</div>
          <div className="gm-hint">Aplica un mismo margen a <b>todos</b> los ítems de un click. Después puedes ajustar cualquiera a mano.</div>
        </div>
        <input type="range" min="0" max="0.8" step="0.01" value={gmVal} onChange={(e) => setGlobalM(parseFloat(e.target.value))} />
        <span className="gm-val">{pct(gmVal)}</span>
        <button className="btn" onClick={aplicarGlobal}>Aplicar a todos</button>
      </div>

      {/* ---------- Márgenes por ítem ---------- */}
      <div className="subhead">— Margen objetivo por ítem</div>
      <div className="margins">
        <div className="mrow head">
          <span>#</span><span>Ítem</span><span>Margen objetivo</span>
          <span style={{ textAlign: "right" }}>Costo M$/año</span><span style={{ textAlign: "right" }}>Precio M$/año</span>
        </div>
        {vb.items.map((it) => (
          <div className="mrow" key={it.key}>
            <span className="mnum">{String(it.n).padStart(2, "0")}</span>
            <span className="mname">{it.label}</span>
            <MarginSlider value={it.margen} onChange={(v) => setMargen(it.key, v)} />
            <span className="mcost">{Eg.fmtMiles(it.costo * vb.factor)}</span>
            <span className="mprice">{Eg.fmtMiles(it.precio * vb.factor)}</span>
          </div>
        ))}
        <div className="mrow foot">
          <span></span><span className="mname">Total proyecto · año {cot.anioCotizacion}</span>
          <span style={{ fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.04em" }}>margen {pct(vb.margenProyecto)}</span>
          <span className="mcost">{Eg.fmtMiles(vb.coTotal)}</span>
          <span className="mprice">{Eg.fmtMiles(vb.pvTotal)}</span>
        </div>
      </div>

      <div className="projmargin">
        <div className="pm"><div className="l">— Venta anual</div><div className="v">{Eg.fmtMiles(vb.pvTotal)}<small>M$</small></div></div>
        <div className="pm"><div className="l">— Utilidad anual</div><div className="v">{Eg.fmtMiles(vb.utilidadTotal)}<small>M$</small></div></div>
        <div className="pm accent"><div className="l">— Margen total del proyecto</div><div className="v">{pct(vb.margenProyecto)}</div></div>
      </div>

      {/* ---------- Plan de escalabilidad ---------- */}
      <div className="subhead" style={{ marginTop: 40 }}>— Plan de escalabilidad</div>
      <label className={"chk" + (esc.activo ? " on" : "")} onClick={() => setEsc({ activo: !esc.activo })}>
        <span className="box">✓</span>
        <span className="ct"><b>Incluir plan de escalabilidad en la propuesta al cliente.</b> Muestra una matriz y un gráfico escalonado donde comprometer más puntos y más años baja el valor por punto —sacrificando margen desde el inicial hacia el final.</span>
      </label>

      {esc.activo ? (
        <React.Fragment>
          <div className="formgrid" style={{ marginTop: 26, gridTemplateColumns: "1fr 1fr" }}>
            <Field label="Escalones de puntos de monitoreo" full
              hint="El tramo (escalón anterior, escalón] se cobra a la tarifa por punto calculada EN ese escalón. El primer escalón es la cantidad cotizada.">
              <div className="stepchips">
                {pasos.map((p, idx) => (
                  <div className={"stepchip" + (idx === 0 ? " base" : "")} key={idx}>
                    <span className="sp-lbl">{idx === 0 ? "Base" : "Esc " + idx}</span>
                    {idx === 0 ? (
                      <input value={p} readOnly style={{ color: "var(--ink-3)" }} />
                    ) : (
                      <input type="number" value={p} min={pasos[idx - 1] + 1}
                        onChange={(e) => setPaso(idx, Math.max(1, parseInt(e.target.value, 10) || 0))} />
                    )}
                    {idx > 0 ? <button className="rm" onClick={() => rmPaso(idx)}>×</button> : null}
                  </div>
                ))}
                <button className="stepadd" onClick={addPaso}>+ Escalón</button>
              </div>
            </Field>

            <Field label="Años máximos del plan" hint="Eje de la matriz. Más años comprometidos = mayor descuento.">
              <NumStepper value={esc.maxAnios} min={1} max={10} onChange={(v) => setEsc({ maxAnios: v })} />
            </Field>

            <Field label="Peso del eje puntos vs. años" hint={"Reparto del sacrificio de margen. Puntos " + pct(esc.pesoPuntos) + " · Años " + pct(1 - esc.pesoPuntos) + "."}>
              <input type="range" min="0.2" max="0.8" step="0.05" value={esc.pesoPuntos}
                onChange={(e) => setEsc({ pesoPuntos: parseFloat(e.target.value) })} style={{ width: "100%", accentColor: "var(--acc)" }} />
            </Field>
          </div>

          <div className="mrange">
            <Field label={"Margen inicial del proyecto · " + pct(m0)}
              hint="Margen en la configuración cotizada (base). Por defecto, el margen total del proyecto.">
              <input type="range" min="0" max="0.8" step="0.01" value={m0}
                onChange={(e) => setEsc({ margenInicial: parseFloat(e.target.value) })} style={{ width: "100%", accentColor: "var(--acc)" }} />
              <button className="addcal" style={{ marginTop: 8 }} onClick={() => setEsc({ margenInicial: +vb.margenProyecto.toFixed(3) })}>
                ↺ Sincronizar con margen base ({pct(vb.margenProyecto)})
              </button>
            </Field>
            <Field label={"Margen final (mínimo aceptable) · " + pct(mf)}
              hint="Margen en el escalón máximo y máximos años. Es el mínimo que está dispuesto a aceptar.">
              <input type="range" min="0" max="0.8" step="0.01" value={mf}
                onChange={(e) => setEsc({ margenFinal: parseFloat(e.target.value) })} style={{ width: "100%", accentColor: "var(--acc)" }} />
              {mf > m0 ? <span className="hint" style={{ color: "var(--warn)" }}>El margen final no puede superar al inicial. Se invertirán automáticamente.</span> : null}
            </Field>
          </div>
        </React.Fragment>
      ) : null}

      {embedded ? null : (
        <div className="btnrow" style={{ marginTop: 40 }}>
          <button className="btn ghost" onClick={onBack}>← Configuración de costos</button>
          <div className="spacer"></div>
          <button className="btn primary lg" onClick={onNext}>Ver resumen <span className="arw">→</span></button>
        </div>
      )}
    </Root>
  );
}

window.Venta = Venta;
window.pctFmt = pct;