/* ============================================================
   Robotia Cotizador · Pantalla 4 (Configuración) + 5 (Resumen)
   ============================================================ */
const E3 = window.RBEngine;

/* Bloque de colores para visualización de desglose */
const SEG_COLORS = {
  recurrente: "var(--rb-violet)",
  calibraciones: "var(--rb-cyan-digital)",
  proyectos: "var(--rb-violet-bright)",
};

/* ============================================================
   Pantalla 4 — Configuración del servicio
   ============================================================ */
function Config({ cot, setCot, onCalc, onBack, embedded }) {
  const i = cot.inputs;
  const upd = (k, v) => setCot({ ...cot, inputs: { ...cot.inputs, [k]: v } });
  const isStream = cot.modalidad === "streaming";
  const m = MODALIDADES[cot.modalidad];

  // live preview
  const res = E3.calcular(buildInputs(cot));

  // calibraciones adicionales (streaming)
  const cals = i.calibracionesAdicionales || [];
  const addCal = () => upd("calibracionesAdicionales", [...cals, { desc: "", nivel: 3 }]);
  const updCal = (idx, k, v) => {
    const next = cals.slice(); next[idx] = { ...next[idx], [k]: v }; upd("calibracionesAdicionales", next);
  };
  const rmCal = (idx) => upd("calibracionesAdicionales", cals.filter((_, x) => x !== idx));

  return (
    <div className={embedded ? "" : "wrap app-screen"} style={embedded ? {} : { paddingBottom: 140 }}>
      {embedded ? null : (
        <PageHead
          eyebrow={"Paso 03 · Configuración " + m.label}
          title={"Variables del servicio<span class=\"u\">_</span>"}
          lede="Ajuste cada variable según lo que conversó con el cliente. El total se recalcula en tiempo real."
        />
      )}

      <div className="formgrid" style={{ gridTemplateColumns: "1fr 1fr" }}>
        <Field label="N° puntos de monitoreo" full
          hint={isStream ? "Puntos de streaming del tipo base (apron feeder)." : "Puntos de captura por imagen."}>
          <NumStepper value={i.nPuntos} min={1} onChange={(v) => upd("nPuntos", v)} />
          {i.nPuntos > 50 ? <span className="hint" style={{ color: "var(--warn)" }}>Extrapolación arriesgada — el modelo se calibró hasta 20 puntos.</span> : null}
        </Field>

        <Field label="Visibilidad" hint="Calidad y cantidad de datos por punto. Afecta Datos y Etiquetado." full>
          <LevelSlider value={i.visibilidad} onChange={(v) => upd("visibilidad", v)} levels={VIS_LEVELS} />
        </Field>

        <Field label="Equipos" hint="Complejidad operativa del cliente. Afecta Operaciones." full>
          <LevelSlider value={i.equipos} onChange={(v) => upd("equipos", v)} levels={EQ_LEVELS} />
        </Field>
      </div>

      {/* Calibraciones — modelo unificado: contador × costo unitario en ambas modalidades */}
      <div className="subhead">— Bloque (2) · Calibraciones</div>
      {isStream ? (
        <div style={{ marginTop: 4 }}>
          <div className="formgrid" style={{ marginTop: 0, gridTemplateColumns: "1fr 1fr" }}>
            <Field label="N° calibraciones del activo principal / año"
              hint={"Cada calibración entrena/recalibra el modelo del activo principal, valorizada por catálogo según Visibilidad (nivel " + i.visibilidad + " ≈ " + E3.fmtMS(res.desglose.costoCalibracionPrincipalUnit) + ")."}>
              <NumStepper value={i.nCalibracionesPrincipal != null ? i.nCalibracionesPrincipal : 1} min={0} onChange={(v) => upd("nCalibracionesPrincipal", v)} />
              <span className="hint">
                <b style={{ color: "var(--ink-2)" }}>1</b> = puesta a punto inicial (lo habitual) · <b style={{ color: "var(--ink-2)" }}>0</b> = el cliente ya la tiene / migración · <b style={{ color: "var(--ink-2)" }}>2+</b> = recalibraciones más frecuentes.
              </span>
              {(i.nCalibracionesPrincipal || 0) > 4 ? <span className="hint" style={{ color: "var(--warn)" }}>4+ calibraciones/año del mismo activo es inusual en Streaming. Verifíquelo.</span> : null}
            </Field>
          </div>
          <div style={{ marginTop: 18 }}>
            <span className="field" style={{ display: "block" }}>
              <label style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-2)", fontWeight: 500 }}>Calibraciones adicionales · otros tipos de activo</label>
              <span className="hint" style={{ display: "block", marginTop: 6 }}>Otro activo (palas, chancador…) con su propio nivel de Visibilidad. Se suma como calibración aparte del principal.</span>
            </span>
            <div className="callist">
              {cals.map((cal, idx) => (
                <div className="calrow" key={idx}>
                  <input className="input" placeholder="Descripción del activo" value={cal.desc} onChange={(e) => updCal(idx, "desc", e.target.value)} style={{ padding: "9px 11px", fontSize: 14 }} />
                  <div className="mini-slider">
                    {[1, 2, 3, 4, 5].map((n) => (
                      <div key={n} className={"s" + (cal.nivel === n ? " on" : "")} onClick={() => updCal(idx, "nivel", n)}>{n}</div>
                    ))}
                  </div>
                  <button className="rm" onClick={() => rmCal(idx)}>×</button>
                </div>
              ))}
            </div>
            <button className="addcal" onClick={addCal}>+ Agregar calibración adicional</button>
          </div>
          <div className="method-note">
            <b>Cómo se considera.</b> El costo recurrente de Datos y Etiquetado usa solo el <b>piso</b>, excluyendo los ciclos de calibración. Por eso contar calibraciones aquí <b>no duplica costo</b>: cada una es un ciclo real adicional. El total del bloque es <b>(N° principal + adicionales) × costo de calibración por nivel</b>.
          </div>
        </div>
      ) : (
        <div style={{ marginTop: 4 }}>
          <div className="formgrid" style={{ marginTop: 0, gridTemplateColumns: "1fr 1fr" }}>
            <Field label="N° calibraciones esperadas / año"
              hint={"Cada calibración recalibra el modelo en el año, valorizada por Visibilidad (nivel " + i.visibilidad + " ≈ " + E3.fmtMS(res.desglose.costoCalibracionUnitario) + ")."}>
              <NumStepper value={i.nCalibraciones} min={0} onChange={(v) => upd("nCalibraciones", v)} />
              <span className="hint">
                <b style={{ color: "var(--ink-2)" }}>0</b> = pre-operación (tipo Spence) · <b style={{ color: "var(--ink-2)" }}>1</b> = operación inicial · <b style={{ color: "var(--ink-2)" }}>2-3</b> = operación madura (tipo Escondida).
              </span>
              {i.nCalibraciones > 5 ? <span className="hint" style={{ color: "var(--warn)" }}>¿Seguro? Escondida en operación madura usa 2/año.</span> : null}
            </Field>
          </div>
          <div className="method-note">
            <b>Cómo se considera.</b> Igual que en Streaming, el recurrente excluye los ciclos de calibración, así que contarlas aquí <b>no duplica costo</b>. La diferencia con Streaming es solo el <b>costo unitario</b> (Imagen es más económico) y que aquí <b>0 es un valor normal</b>: hay clientes que operan sin recalibrar.
          </div>
        </div>
      )}

      {/* Proyectos */}
      <div className="subhead">— Bloque (3) · Proyectos puntuales</div>
      <div className="formgrid" style={{ marginTop: 4, gridTemplateColumns: "1fr 1fr" }}>
        <Field label="Proyectos Demanda Media" hint="Funcionalidad acotada, integración estándar. 5.000 M$ c/u.">
          <NumStepper value={i.proyectosMedia} min={0} onChange={(v) => upd("proyectosMedia", v)} />
        </Field>
        <Field label="Proyectos Demanda Alta" hint="Scope grande: enclavamiento, módulo nuevo. 10.000 M$ c/u.">
          <NumStepper value={i.proyectosAlta} min={0} onChange={(v) => upd("proyectosAlta", v)} />
        </Field>
      </div>

      {/* Inflación + año (compartidos en conjunto → ocultos en embedded) */}
      {embedded ? null : (
      <React.Fragment>
      <div className="subhead">— Bloque (4) · Inflación y año</div>
      <div className="formgrid" style={{ marginTop: 4, gridTemplateColumns: "1fr 1fr" }}>
        <Field label="Año de cotización" hint="Año base del modelo: 2025.">
          <NumStepper value={cot.anioCotizacion} min={2020} max={2040} onChange={(v) => setCot({ ...cot, anioCotizacion: v })} />
        </Field>
        <Field label={"Inflación anual · " + E3.fmtDec(cot.inflacion * 100, 1) + "%"} hint="Aplicada como (1 + inflación)^(año − 2025). Rango 0% a 20%.">
          <input type="range" min="0" max="0.20" step="0.005" value={cot.inflacion}
            onChange={(e) => setCot({ ...cot, inflacion: parseFloat(e.target.value) })}
            style={{ width: "100%", accentColor: "var(--acc)" }} />
        </Field>
      </div>
      </React.Fragment>
      )}

      {/* sticky live total (solo modo completo) */}
      {embedded ? null : (
      <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: "16px 32px", display: "flex", alignItems: "center", gap: 24 }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 500 }}>Total estimado</div>
            <div style={{ fontWeight: 300, fontSize: 34, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums", lineHeight: 1, marginTop: 4 }}>
              {E3.fmtMiles(res.desglose.totalFinal)}<span style={{ fontSize: "0.4em", color: "var(--ink-3)", marginLeft: 8 }}>M$/año</span>
            </div>
          </div>
          <div className="spacer"></div>
          <button className="btn ghost" onClick={onBack}>← Modalidad</button>
          <button className="btn primary lg" onClick={onCalc}>Precio de venta <span className="arw">→</span></button>
        </div>
      </div>
      )}
    </div>
  );
}

/* ============================================================
   Pantalla 5 — Resumen de la cotización
   ============================================================ */
function Block({ num, name, value, open, onToggle, children, hasBody }) {
  return (
    <div className={"blk" + (open ? " open" : "")}>
      <div className="bhead" onClick={hasBody ? onToggle : undefined} style={hasBody ? null : { cursor: "default" }}>
        <span className="bnum">{num}</span>
        <span className="bname">{name}</span>
        <span className="bval">{value}</span>
        {hasBody ? <span className="bcar">▸</span> : <span className="bcar"></span>}
      </div>
      {open && hasBody ? <div className="bbody">{children}</div> : null}
    </div>
  );
}

function Summary({ cot, onSave, onPdf, onExcel, onPdfCliente, onExcelCliente, onEdit, onEditVenta, view, setView, justSaved }) {
  const r = E3.calcular(buildInputs(cot));
  const d = r.desglose;
  const i = cot.inputs;
  const isStream = cot.modalidad === "streaming";
  const [open, setOpen] = useState({ 1: true, 2: false, 3: false });
  const tog = (k) => setOpen({ ...open, [k]: !open[k] });
  const [flash, setFlash] = useState(false);
  const prev = useRef(d.totalFinal);
  useEffect(() => {
    if (prev.current !== d.totalFinal) { setFlash(true); const t = setTimeout(() => setFlash(false), 500); prev.current = d.totalFinal; return () => clearTimeout(t); }
  }, [d.totalFinal]);

  // stacked bar proportions (sin inflación)
  const base = d.subtotalSinInflacion || 1;
  const segs = [
    { k: "recurrente", label: "Recurrente", val: d.subtotalRecurrente },
    { k: "calibraciones", label: "Calibraciones", val: d.subtotalCalibraciones },
    { k: "proyectos", label: "Proyectos", val: d.subtotalProyectos },
  ].filter((s) => s.val > 0);

  // referencias de comparación
  const refCases = isStream
    ? [
        { n: "El Teniente", in: { modalidad: "streaming", nPuntos: 4, visibilidad: 4, equipos: 2, proyectosMedia: 0, proyectosAlta: 0, anioCotizacion: 2025, inflacion: 0.05 } },
        { n: "Chuquicamata", in: { modalidad: "streaming", nPuntos: 3, visibilidad: 2, equipos: 5, proyectosMedia: 0, proyectosAlta: 0, anioCotizacion: 2025, inflacion: 0.05 } },
      ]
    : [
        { n: "Escondida", in: { modalidad: "imagen", nPuntos: 20, visibilidad: 4, equipos: 2, nCalibraciones: 2, proyectosMedia: 0, proyectosAlta: 0, anioCotizacion: 2025, inflacion: 0.05 } },
        { n: "Spence", in: { modalidad: "imagen", nPuntos: 5, visibilidad: 2, equipos: 5, nCalibraciones: 0, proyectosMedia: 0, proyectosAlta: 0, anioCotizacion: 2025, inflacion: 0.05 } },
      ];
  const refs = refCases.map((c) => ({ n: c.n, total: E3.calcular(c.in).desglose.totalFinal }));
  const cmpMax = Math.max(d.totalFinal, ...refs.map((x) => x.total)) * 1.05;

  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={(view === "venta" ? "Propuesta cliente · " : "Cotización · ") + MODALIDADES[cot.modalidad].label} title={(cot.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 === "venta" ? <VentaResumen cot={cot} /> : (
      <React.Fragment>
      <div className="summary-grid" style={{ marginTop: 28 }}>
        {/* Columna izquierda */}
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <div className="totalcard">
            <div className="lbl">— Gran total · costo anual estimado</div>
            <div className={"big" + (flash ? " flash" : "")}>{E3.fmtMiles(d.totalFinal)}<span className="unit">M$ / año</span></div>
            <div className="sub">Para <b>{cot.cliente.nombre || "el cliente"}</b> · modalidad {MODALIDADES[cot.modalidad].label} · año {cot.anioCotizacion}</div>
            <div className="metricrow">
              <div className="metric"><div className="l">— M$ / punto / año</div><div className="v">{E3.fmtMiles(r.metricas.costoPorPunto)}</div></div>
              <div className="metric"><div className="l">— Puntos</div><div className="v">{i.nPuntos}</div></div>
              <div className="metric"><div className="l">— Peso operaciones</div><div className="v">{E3.fmtDec(r.metricas.pesoOperaciones * 100, 0)}<small>%</small></div></div>
            </div>
          </div>

          {/* Desglose */}
          <div>
            <div className="subhead" style={{ marginTop: 0, marginBottom: 12 }}>— Desglose por bloques</div>
            <div className="bd">
              <Block num="(1)" name="Recurrente puro" value={E3.fmtMS(d.subtotalRecurrente)} open={open[1]} onToggle={() => tog(1)} hasBody>
                <div className="li"><span>Datos</span><span className="lv">{E3.fmtMS(d.datos)}</span></div>
                <div className="li"><span>Operaciones</span><span className="lv">{E3.fmtMS(d.operaciones)}</span></div>
                <div className="li"><span>Etiquetado</span><span className="lv">{E3.fmtMS(d.etiquetado)}</span></div>
                <div className="li"><span>Desarrollo recurrente <span className="desc">(fijo)</span></span><span className="lv">{E3.fmtMS(d.desarrollo)}</span></div>
              </Block>
              <Block num="(2)" name="Calibraciones" value={E3.fmtMS(d.subtotalCalibraciones)} open={open[2]} onToggle={() => tog(2)} hasBody={d.subtotalCalibraciones > 0}>
                {isStream ? (
                  <React.Fragment>
                    <div className="li"><span>Activo principal · {d.nCalibracionesPrincipal} × nivel {i.visibilidad}</span><span className="lv">{E3.fmtMS(d.calibracionesPrincipal)}</span></div>
                    {d.calibracionesExtra > 0 ? <div className="li"><span>Calibraciones adicionales ({(i.calibracionesAdicionales || []).length})</span><span className="lv">{E3.fmtMS(d.calibracionesExtra)}</span></div> : null}
                  </React.Fragment>
                ) : (
                  <div className="li"><span>{d.nCalibraciones} calibración(es) × {E3.fmtMS(d.costoCalibracionUnitario)}</span><span className="lv">{E3.fmtMS(d.subtotalCalibraciones)}</span></div>
                )}
              </Block>
              <Block num="(3)" name="Proyectos puntuales" value={E3.fmtMS(d.subtotalProyectos)} open={open[3]} onToggle={() => tog(3)} hasBody={d.subtotalProyectos > 0}>
                {i.proyectosMedia > 0 ? <div className="li"><span>Demanda media · {i.proyectosMedia} × 5.000</span><span className="lv">{E3.fmtMS(i.proyectosMedia * 5000)}</span></div> : null}
                {i.proyectosAlta > 0 ? <div className="li"><span>Demanda alta · {i.proyectosAlta} × 10.000</span><span className="lv">{E3.fmtMS(i.proyectosAlta * 10000)}</span></div> : null}
              </Block>
              <Block num="(4)" name={"Inflación aplicada · factor " + E3.fmtDec(d.factorInflacion, 3)} value={(cot.anioCotizacion - E3.ANIO_BASE) + " año(s)"} hasBody={false} />
              <div className="total"><span className="tl">Gran total</span><span className="tv">{E3.fmtMS(d.totalFinal)}</span></div>
            </div>
          </div>
        </div>

        {/* Columna derecha */}
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <div className="panel">
            <h3 className="ph">Composición del <em>subtotal</em></h3>
            <div className="stackbar">
              {segs.map((s) => (
                <div key={s.k} className="seg" style={{ width: (s.val / base * 100) + "%", background: SEG_COLORS[s.k] }} title={s.label}></div>
              ))}
            </div>
            <div className="stackleg">
              {segs.map((s) => (
                <div className="it" key={s.k}><i style={{ background: SEG_COLORS[s.k] }}></i>{s.label} <b>{E3.fmtDec(s.val / base * 100, 0)}%</b></div>
              ))}
            </div>
          </div>

          <div className="panel">
            <h3 className="ph">Comparativa con <em>casos calibrados</em></h3>
            <div className="compare">
              <div className="cmp you">
                <span className="cn">Esta cotización</span>
                <div className="cbar"><i style={{ width: (d.totalFinal / cmpMax * 100) + "%", background: "var(--acc)" }}></i></div>
                <span className="cv">{E3.fmtMiles(d.totalFinal)}</span>
              </div>
              {refs.map((x) => (
                <div className="cmp" key={x.n}>
                  <span className="cn">{x.n}</span>
                  <div className="cbar"><i style={{ width: (x.total / cmpMax * 100) + "%", background: "var(--ink-3)" }}></i></div>
                  <span className="cv">{E3.fmtMiles(x.total)}</span>
                </div>
              ))}
            </div>
            <div className="hint" style={{ marginTop: 14, fontSize: 11 }}>Valores de referencia anualizados a 2025, inflación 5%.</div>
          </div>

          {r.advertencias.length > 0 ? (
            <div className="panel">
              <h3 className="ph">— Advertencias</h3>
              <div className="warns">
                {r.advertencias.map((w, x) => (
                  <div className={"warn-card " + (w.sev || "media")} key={x}>
                    <span className="ic">{w.sev === "alta" ? "!" : "i"}</span>
                    <span className="wt"><b>{w.tipo}</b>{w.msg}</span>
                  </div>
                ))}
              </div>
            </div>
          ) : null}
        </div>
      </div>

      {/* Inputs registrados */}
      <div className="panel" style={{ marginTop: 24 }}>
        <h3 className="ph">Inputs <em>registrados</em></h3>
        <table className="recap">
          <tbody>
            <tr><td>Modalidad</td><td>{MODALIDADES[cot.modalidad].label}</td></tr>
            <tr><td>N° puntos de monitoreo</td><td>{i.nPuntos}</td></tr>
            <tr><td>Nivel de Visibilidad</td><td>{i.visibilidad} / 5 — {VIS_LEVELS.find((l) => l.n === i.visibilidad).t}</td></tr>
            <tr><td>Nivel de Equipos</td><td>{i.equipos} / 5 — {EQ_LEVELS.find((l) => l.n === i.equipos).t}</td></tr>
            {isStream
              ? <tr><td>Calibraciones activo principal</td><td>{d.nCalibracionesPrincipal} / año{d.nCalibracionesPrincipal === 0 ? " — el cliente ya la tiene" : ""}</td></tr>
              : <tr><td>Calibraciones esperadas / año</td><td>{i.nCalibraciones}</td></tr>}
            {isStream && (i.calibracionesAdicionales || []).length > 0
              ? <tr><td>Calibraciones adicionales</td><td>{(i.calibracionesAdicionales).map((c) => (c.desc || "activo") + " (niv " + c.nivel + ")").join(", ")}</td></tr> : null}
            <tr><td>Proyectos Demanda Media</td><td>{i.proyectosMedia} × 5.000 M$</td></tr>
            <tr><td>Proyectos Demanda Alta</td><td>{i.proyectosAlta} × 10.000 M$</td></tr>
            <tr><td>Año de cotización</td><td>{cot.anioCotizacion}</td></tr>
            <tr><td>Inflación anual</td><td>{E3.fmtDec(cot.inflacion * 100, 1)}%</td></tr>
          </tbody>
        </table>
      </div>
      </React.Fragment>
      )}

      {/* 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={onPdf}>PDF costos</button>
            <button className="btn lg" onClick={onExcel}>Excel costos</button>
            <div className="spacer"></div>
            <button className="btn ghost" onClick={onEdit}>Editar inputs</button>
          </React.Fragment>
        )}
      </div>

      <div className="footnote">
        {view === "venta"
          ? "Propuesta comercial referencial en M$ (millones de pesos chilenos). No expone costos ni márgenes internos. La oferta definitiva queda sujeta a visita técnica."
          : "Cotización referencial basada en un modelo calibrado con clientes activos del sector minero. Valores en M$ (millones de pesos chilenos). El detalle de constantes y niveles de calibración es información comercial sensible y no se incluye en el PDF entregable."}<span className="u">_</span>
      </div>
    </div>
  );
}

Object.assign(window, { Config, Summary });