/* ============================================================
   Robotia Cotizador · Pantallas (§2.1)
   ============================================================ */
const E2 = window.RBEngine;

function buildInputs(cot) {
  return {
    modalidad: cot.modalidad,
    nPuntos: cot.inputs.nPuntos,
    visibilidad: cot.inputs.visibilidad,
    equipos: cot.inputs.equipos,
    nCalibraciones: cot.inputs.nCalibraciones,
    calibracionesAdicionales: cot.inputs.calibracionesAdicionales,
    nCalibracionesPrincipal: cot.inputs.nCalibracionesPrincipal,
    proyectosMedia: cot.inputs.proyectosMedia,
    proyectosAlta: cot.inputs.proyectosAlta,
    anioCotizacion: cot.anioCotizacion,
    inflacion: cot.inflacion,
  };
}

/* ============================================================
   Pantalla 1 — Bienvenida
   ============================================================ */
function Welcome({ saved, onNew, onOpen, onDelete, onDuplicate }) {
  return (
    <div className="wrap wide app-screen">
      <div className="hero">
        <div>
          <PageHead
            eyebrow="Cotizador de monitoreo visual"
            title={'Cotice un servicio Sentinel<span class="u">_</span>'}
            lede="Estime el costo anual de un servicio de monitoreo visual —Streaming o Imagen— a partir de variables operativas que se conversan en una reunión comercial. Resultado auditable, defendible ante directorio y calibrado con la operación real."
          />
          <p className="hero-anchor anchor" style={{ marginTop: 28, fontSize: 22, color: "var(--ink-3)", fontWeight: 300 }}>
            El mundo de la minería potenciado por la visión artificial<span className="u" style={{ color: "var(--acc)" }}>_</span>
          </p>
          <div className="btnrow" style={{ marginTop: 32 }}>
            <button className="btn primary lg" onClick={onNew}>Nueva cotización <span className="arw">→</span></button>
          </div>
        </div>
        <div className="hero-art">
          <div className="grid-lines"></div>
          <div className="scan"></div>
          <div className="glyph">R<span style={{ color: "var(--acc)" }}>_</span></div>
        </div>
      </div>

      <div className="saved">
        <div className="saved-head">
          <h2>Cotizaciones guardadas</h2>
          <span className="count">{saved.length} / 50 · almacenadas localmente</span>
        </div>
        {saved.length === 0 ? (
          <div className="empty">Aún no hay cotizaciones guardadas. Cree una nueva para comenzar.</div>
        ) : (
          <div className="cot-list">
            {saved.map((c) => {
              const isJoint = c.modalidad === "conjunto";
              const total = isJoint ? window.RBJoint.combinarCostos(c).combinado.totalFinal : E2.calcular(buildInputs(c)).desglose.totalFinal;
              const nPts = isJoint ? (c.sub.streaming.inputs.nPuntos + c.sub.imagen.inputs.nPuntos) : c.inputs.nPuntos;
              return (
                <div className="cot" key={c.id}>
                  <div className="ct">
                    <div>
                      <div className="cname">{c.cliente.nombre || "Cliente sin nombre"}</div>
                      <div className="cmeta">{new Date(c.fecha).toLocaleDateString("es-CL")} · {nPts} puntos · año {c.anioCotizacion}</div>
                    </div>
                    <span className={"cmod " + c.modalidad}>{MODALIDADES[c.modalidad].label}</span>
                  </div>
                  <div className="cbig">{E2.fmtMiles(total)}<span className="u">M$/año</span></div>
                  <div className="cact">
                    <button onClick={() => onOpen(c)}>Abrir</button>
                    <button onClick={() => onDuplicate(c.id)}>Duplicar</button>
                    <button className="del" onClick={() => onDelete(c.id)}>Eliminar</button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      <div className="footnote">
        Cotización referencial basada en un modelo calibrado con clientes activos del sector minero. Valores en M$ (millones de pesos chilenos). Año base del modelo: 2025<span className="u">_</span>
      </div>
    </div>
  );
}

/* ============================================================
   Pantalla 2 — Datos del cliente
   ============================================================ */
function ClienteForm({ cot, setCot, onNext, onBack }) {
  const c = cot.cliente;
  const upd = (k, v) => setCot({ ...cot, cliente: { ...cot.cliente, [k]: v } });
  const valid = (c.nombre || "").trim().length > 0;
  return (
    <div className="wrap narrow app-screen">
      <PageHead eyebrow="Paso 01 · Datos del cliente" title="¿Para quién cotizamos?" lede="Estos datos encabezan la cotización que entregará al cliente. El año de inicio define el factor de inflación aplicado." />
      <div className="formgrid">
        <Field label="Nombre del cliente" full>
          <input className="input" value={c.nombre} placeholder="Ej. Codelco Andina" onChange={(e) => upd("nombre", e.target.value)} />
        </Field>
        <Field label="Contacto comercial" hint="Persona de referencia en la faena.">
          <input className="input" value={c.contacto} placeholder="Nombre y cargo" onChange={(e) => upd("contacto", e.target.value)} />
        </Field>
        <Field label="Sector / faena" hint="Opcional.">
          <input className="input" value={c.sector} placeholder="Ej. Chancado primario" onChange={(e) => upd("sector", e.target.value)} />
        </Field>
        <Field label="Año de inicio de servicio" hint="Año en que arranca el contrato. Default: año actual.">
          <NumStepper value={cot.anioCotizacion} min={2020} max={2040} onChange={(v) => setCot({ ...cot, anioCotizacion: v })} />
        </Field>
        <Field label="Fecha de la cotización">
          <input className="input" value={new Date(cot.fecha).toLocaleDateString("es-CL")} readOnly style={{ color: "var(--ink-3)" }} />
        </Field>
      </div>
      <div className="btnrow" style={{ marginTop: 40 }}>
        <button className="btn ghost" onClick={onBack}>← Volver</button>
        <div className="spacer"></div>
        <button className="btn primary" disabled={!valid} onClick={onNext}>Siguiente <span className="arw">→</span></button>
      </div>
    </div>
  );
}

/* ============================================================
   Pantalla 3 — Selección de modalidad
   ============================================================ */
function ModalitySelect({ cot, setCot, onNext, onBack }) {
  const pick = (m) => setCot({ ...cot, modalidad: m });
  return (
    <div className="wrap app-screen">
      <PageHead eyebrow="Paso 02 · Modalidad" title="¿Streaming, Imagen o ambas?" lede="Elija la modalidad de monitoreo según la criticidad del activo y la urgencia de detección. Cada una usa un modelo de costos calibrado por separado; la propuesta conjunta combina ambas." />
      <div className="modality">
        {["streaming", "imagen"].map((k) => {
          const m = MODALIDADES[k];
          return (
            <div key={k} className={"modcard " + k + (cot.modalidad === k ? " sel" : "")} onClick={() => pick(k)}>
              <div className="check">✓</div>
              <span className="tag">{m.label}</span>
              <h3>{m.label}</h3>
              <p>{m.desc}</p>
              <div className="meta">
                <div className="m"><span>Activo típico</span><b>{m.activos}</b></div>
                <div className="m"><span>Calibrado con</span><b>{m.calib}</b></div>
                <div className="m"><span>Historia</span><b>{m.historia}</b></div>
                <div className="m"><span>Costo relativo</span><b>{m.costo}</b></div>
              </div>
            </div>
          );
        })}
      </div>
      <div className={"modcard conjunto" + (cot.modalidad === "conjunto" ? " sel" : "")} onClick={() => pick("conjunto")}
        style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
        <div className="check">✓</div>
        <div style={{ flex: "1 1 320px", minWidth: 0 }}>
          <span className="tag" style={{ background: "linear-gradient(90deg,rgba(161,0,255,0.16),rgba(59,175,218,0.16))", color: "var(--acc-bright)" }}>Conjunto · Streaming + Imagen</span>
          <h3 style={{ marginTop: 14 }}>Propuesta conjunta</h3>
          <p style={{ maxWidth: "60ch" }}>Cotiza ambos servicios en una sola propuesta. Cada modalidad conserva su modelo calibrado; se suman y, si lo defines, se aplica una sinergia de plataforma compartida.</p>
        </div>
        <div className="meta" style={{ borderTop: 0, borderLeft: "1px solid var(--line)", paddingTop: 0, paddingLeft: 24, minWidth: 220 }}>
          <div className="m"><span>Incluye</span><b>Streaming + Imagen</b></div>
          <div className="m"><span>Cliente / año</span><b>Compartidos</b></div>
          <div className="m"><span>Sinergia</span><b>Plataforma compartida (0–5)</b></div>
        </div>
      </div>
      <div className="btnrow" style={{ marginTop: 40 }}>
        <button className="btn ghost" onClick={onBack}>← Volver</button>
        <div className="spacer"></div>
        <button className="btn primary" disabled={!cot.modalidad} onClick={onNext}>Configurar servicio <span className="arw">→</span></button>
      </div>
    </div>
  );
}

window.ScreensA = { Welcome, ClienteForm, ModalitySelect, buildInputs };
Object.assign(window, { Welcome, ClienteForm, ModalitySelect, buildInputs });