/* ============================================================
   Robotia Cotizador · Pantallas CONJUNTO (Streaming + Imagen)
   Reusa Config / Venta / VentaResumen vía sub-vistas. No duplica lógica.
   ============================================================ */
const J = window.RBJoint;
const Ej = window.RBEngine;

/* sub-vista cot-like de una modalidad + setter que escribe en el joint */
function useSub(joint, setJoint) {
  const view = (modal) => J.subCot(joint, modal);
  const setView = (modal) => (nextCot) => {
    setJoint({
      ...joint,
      anioCotizacion: nextCot.anioCotizacion != null ? nextCot.anioCotizacion : joint.anioCotizacion,
      inflacion: nextCot.inflacion != null ? nextCot.inflacion : joint.inflacion,
      sub: {
        ...joint.sub,
        [modal]: {
          ...joint.sub[modal],
          inputs: nextCot.inputs || joint.sub[modal].inputs,
          venta: nextCot.venta || joint.sub[modal].venta,
        },
      },
    });
  };
  return { view, setView };
}

function ModTabs({ active, onPick }) {
  return (
    <div className="modtabs">
      <button className={"streaming" + (active === "streaming" ? " on" : "")} onClick={() => onPick("streaming")}>
        <span className="dot"></span>Streaming
      </button>
      <button className={"imagen" + (active === "imagen" ? " on" : "")} onClick={() => onPick("imagen")}>
        <span className="dot"></span>Imagen
      </button>
    </div>
  );
}

/* ============================================================
   Conjunto · Configuración (tabs)
   ============================================================ */
function JointConfig({ joint, setJoint, onNext, onBack }) {
  const [tab, setTab] = useState("streaming");
  const { view, setView } = useSub(joint, setJoint);
  const cc = J.combinarCostos(joint);

  return (
    <div className="wrap app-screen" style={{ paddingBottom: 150 }}>
      <PageHead eyebrow="Paso 03 · Configuración conjunta"
        title={"Dos servicios, una propuesta<span class=\"u\">_</span>"}
        lede="Configure cada modalidad por separado —Streaming e Imagen mantienen su propio modelo de costos. Año e inflación son compartidos por ser un mismo contrato." />

      {/* Año + inflación compartidos */}
      <div className="formgrid" style={{ marginTop: 30, gridTemplateColumns: "1fr 1fr" }}>
        <Field label="Año de inicio del servicio" hint="Compartido por ambas modalidades. Año base del modelo: 2025.">
          <NumStepper value={joint.anioCotizacion} min={2020} max={2040} onChange={(v) => setJoint({ ...joint, anioCotizacion: v })} />
        </Field>
        <Field label={"Inflación anual · " + Ej.fmtDec(joint.inflacion * 100, 1) + "%"} hint="Compartida. Aplicada como (1 + inflación)^(año − 2025).">
          <input type="range" min="0" max="0.20" step="0.005" value={joint.inflacion}
            onChange={(e) => setJoint({ ...joint, inflacion: parseFloat(e.target.value) })} style={{ width: "100%", accentColor: "var(--acc)" }} />
        </Field>
      </div>

      <div style={{ marginTop: 32, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
        <ModTabs active={tab} onPick={setTab} />
        <span className="hint" style={{ margin: 0 }}>Configurando: <b style={{ color: tab === "streaming" ? "var(--acc-soft)" : "var(--cyan)" }}>{MODALIDADES[tab].label}</b></span>
      </div>

      <div style={{ marginTop: 22, borderTop: "1px solid var(--line)", paddingTop: 22 }}>
        <Config embedded cot={view(tab)} setCot={setView(tab)} />
      </div>

      {/* sticky combined total */}
      <div className="no-print" style={{ position: "fixed", left: 0, right: 0, bottom: 0, background: "var(--bg-2)", borderTop: "1px solid var(--line-2)", zIndex: 15 }}>
        <div className="wrap" style={{ padding: "14px 32px", display: "flex", alignItems: "center", gap: 22, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 500 }}>Costo combinado · {cc.nPuntosTotal} puntos</div>
            <div style={{ fontWeight: 300, fontSize: 30, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums", lineHeight: 1, marginTop: 4 }}>
              {Ej.fmtMiles(cc.combinado.totalFinal)}<span style={{ fontSize: "0.42em", color: "var(--ink-3)", marginLeft: 8 }}>M$/año</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 18, fontSize: 12, color: "var(--ink-3)" }}>
            <span>Streaming <b style={{ color: "var(--acc-soft)", fontWeight: 600 }}>{Ej.fmtMiles(cc.streaming.desglose.totalFinal)}</b></span>
            <span>Imagen <b style={{ color: "var(--cyan)", fontWeight: 600 }}>{Ej.fmtMiles(cc.imagen.desglose.totalFinal)}</b></span>
          </div>
          <div className="spacer"></div>
          <button className="btn ghost" onClick={onBack}>← Modalidad</button>
          <button className="btn primary lg" onClick={onNext}>Precio de venta <span className="arw">→</span></button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Conjunto · Precio de venta (tabs · margen global por modalidad)
   ============================================================ */
function JointVenta({ joint, setJoint, onNext, onBack }) {
  const [tab, setTab] = useState("streaming");
  const { view, setView } = useSub(joint, setJoint);
  const cv = J.combinarVenta(joint);

  return (
    <div className="wrap app-screen" style={{ paddingBottom: 150 }}>
      <PageHead eyebrow="Paso 04 · Precio de venta conjunto"
        title={"Margen por servicio<span class=\"u\">_</span>"}
        lede="Cada modalidad mantiene su margen por ítem y su propio plan de escalabilidad. Use el margen global para fijar un mismo % a todos los ítems de una modalidad de un solo paso." />

      <div style={{ marginTop: 30, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
        <ModTabs active={tab} onPick={setTab} />
        <span className="hint" style={{ margin: 0 }}>Editando venta de: <b style={{ color: tab === "streaming" ? "var(--acc-soft)" : "var(--cyan)" }}>{MODALIDADES[tab].label}</b></span>
      </div>

      <div style={{ marginTop: 22, borderTop: "1px solid var(--line)", paddingTop: 22 }}>
        <Venta embedded cot={view(tab)} setCot={setView(tab)} />
      </div>

      {/* sticky combined sale */}
      <div className="no-print" style={{ position: "fixed", left: 0, right: 0, bottom: 0, background: "var(--bg-2)", borderTop: "1px solid var(--line-2)", zIndex: 15 }}>
        <div className="wrap" style={{ padding: "14px 32px", display: "flex", alignItems: "center", gap: 22, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 500 }}>Venta combinada</div>
            <div style={{ fontWeight: 300, fontSize: 30, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums", lineHeight: 1, marginTop: 4 }}>
              {Ej.fmtMiles(cv.pvTotal)}<span style={{ fontSize: "0.42em", color: "var(--ink-3)", marginLeft: 8 }}>M$/año</span>
            </div>
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-3)" }}>margen combinado <b style={{ color: "var(--acc-soft)", fontWeight: 600 }}>{Ej.fmtDec(cv.margenProyecto * 100, 0)}%</b></div>
          <div className="spacer"></div>
          <button className="btn ghost" onClick={onBack}>← Configuración</button>
          <button className="btn primary lg" onClick={onNext}>Ver resumen <span className="arw">→</span></button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Slider de sinergia 0–5 ---------- */
function SynergySlider({ joint, setJoint }) {
  const cc = J.combinarCostos(joint);
  const nivel = joint.sinergia == null ? 0 : joint.sinergia;
  const info = J.SINERGIA_NIVELES[nivel];
  return (
    <div className="synergy">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
        <h3 className="ph" style={{ margin: 0 }}>Sinergia · <em style={{ fontStyle: "normal", color: "var(--cyan)" }}>plataforma compartida</em></h3>
        <span className="hint" style={{ margin: 0 }}>Reduce el Desarrollo fijo duplicado (máx. {Ej.fmtMS(cc.combinado.desarrolloDuplicado * cc.factor)})</span>
      </div>
      <div className="track">
        {[0, 1, 2, 3, 4, 5].map((n) => (
          <div key={n} className={"seg" + (n <= nivel ? " on" : "")} onClick={() => setJoint({ ...joint, sinergia: n })}></div>
        ))}
      </div>
      <div className="scale">
        {[0, 1, 2, 3, 4, 5].map((n) => (
          <span key={n} className={n === nivel ? "on" : ""} onClick={() => setJoint({ ...joint, sinergia: n })}>{n}</span>
        ))}
      </div>
      <div className="desc">
        <span><b>{info.n} · {info.t}.</b> {info.d}</span>
        <span className="save">{nivel === 0 ? "—" : "−" + Ej.fmtMiles(cc.combinado.ahorroSinergiaFinal) + " M$"}</span>
      </div>
      <div className="method-note" style={{ marginTop: 12 }}>
        <b>Cómo se considera.</b> La sinergia solo descuenta el costo de Desarrollo fijo que está duplicado entre ambos productos (nunca más que el menor de los dos). Reduce tu <b>costo</b>, por lo que mejora tu margen; el precio al cliente se mantiene aditivo. Si quieres trasladar el ahorro al cliente, baja los márgenes.
      </div>
    </div>
  );
}

/* ---------- Detalle TOTAL combinado (oferta por ítem, ambas modalidades) ---------- */
function JointTotalDetail({ joint }) {
  const Eg = window.RBEngine;
  const cv = J.combinarVenta(joint);
  const cc = J.combinarCostos(joint);
  const C = cc.combinado;
  const LABELS = { datos: "Datos", operaciones: "Operaciones", etiquetado: "Etiquetado", desarrollo: "Desarrollo", calibraciones: "Calibraciones", proyectos: "Proyectos puntuales" };
  const ORDER = ["datos", "operaciones", "etiquetado", "desarrollo", "calibraciones", "proyectos"];
  const sMap = {}, iMap = {};
  cv.ventaS.items.forEach((it) => { sMap[it.key] = it.precio * cv.ventaS.factor; });
  cv.ventaI.items.forEach((it) => { iMap[it.key] = it.precio * cv.ventaI.factor; });
  const rows = ORDER.filter((k) => sMap[k] || iMap[k]).map((k) => ({ key: k, label: LABELS[k], s: sMap[k] || 0, i: iMap[k] || 0, t: (sMap[k] || 0) + (iMap[k] || 0) }));

  return (
    <React.Fragment>
      <div className="panel">
        <h3 className="ph">Desglose combinado de la <em>oferta</em> · por ítem</h3>
        <div className="matwrap">
          <table className="matrix">
            <thead>
              <tr><th>Ítem (valor de venta M$/año)</th><th>Streaming</th><th>Imagen</th><th>Total</th></tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.key}>
                  <th>{r.label}</th>
                  <td>{r.s > 0 ? Eg.fmtMiles(r.s) : "—"}</td>
                  <td>{r.i > 0 ? Eg.fmtMiles(r.i) : "—"}</td>
                  <td style={{ color: "#fff", fontWeight: 500 }}>{Eg.fmtMiles(r.t)}</td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <th style={{ color: "var(--ink)" }}>Total anual</th>
                <td style={{ color: "var(--acc-soft)", fontWeight: 600 }}>{Eg.fmtMiles(cv.ventaS.pvTotal)}</td>
                <td style={{ color: "var(--cyan)", fontWeight: 600 }}>{Eg.fmtMiles(cv.ventaI.pvTotal)}</td>
                <td style={{ color: "#fff", fontWeight: 700, fontSize: 16 }}>{Eg.fmtMiles(cv.pvTotal)}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div className="matlabel">Valores de venta en M$/año, año {joint.anioCotizacion}. Cada modalidad usa el margen por ítem configurado en su pestaña.</div>
      </div>

      <div className="panel">
        <h3 className="ph">Resultado <em>consolidado</em></h3>
        <table className="recap">
          <tbody>
            <tr><td>Venta anual combinada</td><td>{Eg.fmtMS(cv.pvTotal)}</td></tr>
            <tr><td>Costo combinado (con sinergia nivel {cc.nivel})</td><td>{Eg.fmtMS(cv.coTotal)}</td></tr>
            <tr><td>Ahorro por sinergia · plataforma compartida</td><td style={{ color: "var(--cyan)" }}>{cv.ahorroSinergia > 0 ? "−" + Eg.fmtMS(cv.ahorroSinergia) : "—"}</td></tr>
            <tr><td>Utilidad anual</td><td>{Eg.fmtMS(cv.utilidadTotal)}</td></tr>
            <tr style={{ fontWeight: 600 }}><td style={{ color: "var(--ink)" }}>Margen total del proyecto</td><td style={{ color: "var(--acc-soft)", fontSize: 16 }}>{Eg.fmtDec(cv.margenProyecto * 100, 1)}%</td></tr>
          </tbody>
        </table>
        <div className="method-note">
          <b>Lectura.</b> La columna Total es la suma de ambos servicios tal como los configuraste. El cliente ve solo el valor de venta; el costo, el ahorro por sinergia y el margen son internos.
        </div>
      </div>
    </React.Fragment>
  );
}

/* ============================================================
   Conjunto · Resumen (Costos interna / Venta cliente)
   ============================================================ */
function JointResumen({ joint, setJoint, view, setView, onSave, onPdfCliente, onExcelCliente, onPdfCostos, onExcelCostos, onEditConfig, onEditVenta, justSaved }) {
  const [tab, setTab] = useState("total");
  const cc = J.combinarCostos(joint);
  const cv = J.combinarVenta(joint);
  const C = cc.combinado;
  const sub = J;

  return (
    <div className="wrap wide app-screen">
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
        <div style={{ flex: "1 1 320px", minWidth: 0 }}>
          <PageHead eyebrow="Propuesta conjunta · Streaming + Imagen" title={(joint.cliente.nombre || "Cliente") + "<span class=\"u\">_</span>"} />
        </div>
        <div className="viewtoggle no-print" style={{ flex: "0 0 auto" }}>
          <button className={view === "costos" ? "on" : ""} onClick={() => setView("costos")}>Costos · interna</button>
          <button className={view === "venta" ? "on" : ""} onClick={() => setView("venta")}>Venta · cliente</button>
        </div>
      </div>

      {view === "costos" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 24, marginTop: 28 }}>
          <div className="totalcard">
            <div className="lbl">— Costo combinado · año {joint.anioCotizacion}</div>
            <div className="big">{Ej.fmtMiles(C.totalFinal)}<span className="unit">M$ / año</span></div>
            <div className="sub">Streaming + Imagen · {cc.nPuntosTotal} puntos · {C.ahorroSinergiaFinal > 0 ? <b>−{Ej.fmtMiles(C.ahorroSinergiaFinal)} M$ por sinergia</b> : "sin sinergia aplicada"}</div>
            <div className="metricrow">
              <div className="metric"><div className="l">— Streaming</div><div className="v">{Ej.fmtMiles(cc.streaming.desglose.totalFinal)}</div></div>
              <div className="metric"><div className="l">— Imagen</div><div className="v">{Ej.fmtMiles(cc.imagen.desglose.totalFinal)}</div></div>
              <div className="metric"><div className="l">— Suma sin sinergia</div><div className="v">{Ej.fmtMiles(C.totalSinSinergia)}</div></div>
            </div>
          </div>

          <SynergySlider joint={joint} setJoint={setJoint} />

          <div>
            <div className="subhead" style={{ marginTop: 0, marginBottom: 12 }}>— Desglose combinado por bloques</div>
            <div className="bd">
              <div className="blk"><div className="bhead" style={{ cursor: "default" }}><span className="bnum">(1)</span><span className="bname">Recurrente puro</span><span className="bval">{Ej.fmtMS(C.recurrente * cc.factor)}</span><span className="bcar"></span></div></div>
              <div className="blk"><div className="bhead" style={{ cursor: "default" }}><span className="bnum">(2)</span><span className="bname">Calibraciones</span><span className="bval">{Ej.fmtMS(C.calibraciones * cc.factor)}</span><span className="bcar"></span></div></div>
              <div className="blk"><div className="bhead" style={{ cursor: "default" }}><span className="bnum">(3)</span><span className="bname">Proyectos puntuales</span><span className="bval">{Ej.fmtMS(C.proyectos * cc.factor)}</span><span className="bcar"></span></div></div>
              {C.ahorroSinergiaFinal > 0 ? (
                <div className="blk"><div className="bhead" style={{ cursor: "default" }}><span className="bnum" style={{ color: "var(--cyan)" }}>(–)</span><span className="bname" style={{ color: "var(--cyan)" }}>Sinergia · plataforma compartida</span><span className="bval" style={{ color: "var(--cyan)" }}>−{Ej.fmtMS(C.ahorroSinergiaFinal)}</span><span className="bcar"></span></div></div>
              ) : null}
              <div className="blk"><div className="bhead" style={{ cursor: "default" }}><span className="bnum">(4)</span><span className="bname">Inflación · factor {Ej.fmtDec(cc.factor, 3)}</span><span className="bval">{joint.anioCotizacion - Ej.ANIO_BASE} año(s)</span><span className="bcar"></span></div></div>
              <div className="total"><span className="tl">Gran total combinado</span><span className="tv">{Ej.fmtMS(C.totalFinal)}</span></div>
            </div>
          </div>

          <div className="panel">
            <h3 className="ph">Aporte por <em>modalidad</em></h3>
            <table className="recap">
              <tbody>
                <tr><td>Streaming · {joint.sub.streaming.inputs.nPuntos} puntos</td><td>{Ej.fmtMS(cc.streaming.desglose.totalFinal)}</td></tr>
                <tr><td>Imagen · {joint.sub.imagen.inputs.nPuntos} puntos</td><td>{Ej.fmtMS(cc.imagen.desglose.totalFinal)}</td></tr>
                <tr><td>Ahorro por sinergia (nivel {cc.nivel})</td><td style={{ color: "var(--cyan)" }}>{C.ahorroSinergiaFinal > 0 ? "−" + Ej.fmtMS(C.ahorroSinergiaFinal) : "—"}</td></tr>
                <tr style={{ fontWeight: 600 }}><td style={{ color: "var(--ink)" }}>Total combinado</td><td style={{ color: "var(--ink)", fontSize: 16 }}>{Ej.fmtMS(C.totalFinal)}</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 24, marginTop: 28 }}>
          <div className="totalcard">
            <div className="lbl">— Propuesta combinada · valor anual</div>
            <div className="big">{Ej.fmtMiles(cv.pvTotal)}<span className="unit">M$ / año</span></div>
            <div className="sub">Para <b>{joint.cliente.nombre || "el cliente"}</b> · Streaming + Imagen · {cc.nPuntosTotal} puntos</div>
            <div className="metricrow">
              <div className="metric"><div className="l">— Venta Streaming</div><div className="v">{Ej.fmtMiles(cv.ventaS.pvTotal)}</div></div>
              <div className="metric"><div className="l">— Venta Imagen</div><div className="v">{Ej.fmtMiles(cv.ventaI.pvTotal)}</div></div>
              <div className="metric"><div className="l">— Margen combinado</div><div className="v">{Ej.fmtDec(cv.margenProyecto * 100, 0)}<small>%</small></div></div>
            </div>
          </div>

          <div className="panel">
            <h3 className="ph">Detalle de la <em>oferta combinada</em></h3>
            <table className="recap">
              <tbody>
                <tr><td>Servicio Streaming · {joint.sub.streaming.inputs.nPuntos} puntos</td><td>{Ej.fmtMS(cv.ventaS.pvTotal)}</td></tr>
                <tr><td>Servicio Imagen · {joint.sub.imagen.inputs.nPuntos} puntos</td><td>{Ej.fmtMS(cv.ventaI.pvTotal)}</td></tr>
                <tr style={{ fontWeight: 600 }}><td style={{ color: "var(--ink)" }}>Total anual</td><td style={{ color: "var(--acc-soft)", fontSize: 16 }}>{Ej.fmtMS(cv.pvTotal)}</td></tr>
              </tbody>
            </table>
            <div className="method-note">
              <b>Margen.</b> Combinado {Ej.fmtDec(cv.margenProyecto * 100, 1)}% {cv.ahorroSinergia > 0 ? <React.Fragment>(la sinergia de plataforma sube el margen desde {Ej.fmtDec(cv.margenSinSinergia * 100, 1)}%, al reducir tu costo en {Ej.fmtMS(cv.ahorroSinergia)})</React.Fragment> : "(sin sinergia aplicada)"}. El cliente ve solo el valor de venta; costos y sinergia no se exponen.
            </div>
          </div>

          {/* detalle: Total combinado / por modalidad */}
          <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
            <div className="modtabs">
              <button className={"total" + (tab === "total" ? " on" : "")} onClick={() => setTab("total")}><span className="dot"></span>Total</button>
              <button className={"streaming" + (tab === "streaming" ? " on" : "")} onClick={() => setTab("streaming")}><span className="dot"></span>Streaming</button>
              <button className={"imagen" + (tab === "imagen" ? " on" : "")} onClick={() => setTab("imagen")}><span className="dot"></span>Imagen</button>
            </div>
            <span className="hint" style={{ margin: 0 }}>
              {tab === "total"
                ? <React.Fragment>Desglose <b style={{ color: "var(--acc-soft)" }}>combinado</b> de la propuesta</React.Fragment>
                : <React.Fragment>Detalle y escalabilidad de: <b style={{ color: tab === "streaming" ? "var(--acc-soft)" : "var(--cyan)" }}>{MODALIDADES[tab].label}</b></React.Fragment>}
            </span>
          </div>
          {tab === "total"
            ? <JointTotalDetail joint={joint} />
            : <VentaResumen cot={J.subCot(joint, tab)} />}
        </div>
      )}

      {/* Acciones */}
      <div className="btnrow no-print" style={{ marginTop: 32 }}>
        <button className="btn primary lg" onClick={onSave}>{justSaved ? "✓ Guardada" : "Guardar cotización"}</button>
        {view === "venta" ? (
          <React.Fragment>
            <button className="btn lg" onClick={onPdfCliente}>PDF cliente</button>
            <button className="btn lg" onClick={onExcelCliente}>Excel cliente</button>
            <div className="spacer"></div>
            <button className="btn ghost" onClick={onEditVenta}>Editar precio de venta</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <button className="btn lg" onClick={onPdfCostos}>PDF costos</button>
            <button className="btn lg" onClick={onExcelCostos}>Excel costos</button>
            <div className="spacer"></div>
            <button className="btn ghost" onClick={onEditConfig}>Editar configuración</button>
          </React.Fragment>
        )}
      </div>

      <div className="footnote">
        Propuesta conjunta referencial en M$ (millones de pesos chilenos). Cada modalidad usa su propio modelo calibrado; la sinergia es un ajuste comercial transparente sobre el costo de plataforma compartida, no una recalibración del modelo<span className="u">_</span>
      </div>
    </div>
  );
}

Object.assign(window, { JointConfig, JointVenta, JointResumen, ModTabs, SynergySlider });