/* ============================================================
   Robotia Cotizador · UI primitives + datos de niveles
   ============================================================ */
const { useState, useEffect, useRef } = React;
const E = window.RBEngine;

/* ---------- Datos de niveles (Especificación §3.2 / §5) ---------- */
const VIS_LEVELS = [
  { n: 1, t: "Muy limitada", d: "Pocos sensores, cobertura parcial, conectividad intermitente." },
  { n: 2, t: "Básica", d: "Cámara o sensor simple por punto, transmisión estable, sin redundancia.", ref: "Chuqui · Spence" },
  { n: 3, t: "Estándar", d: "Cobertura completa, calidad media, sin elementos avanzados." },
  { n: 4, t: "Alta", d: "Múltiples ángulos o sensores, alta calidad de captura.", ref: "Teniente · Escondida" },
  { n: 5, t: "Óptima", d: "Cobertura 360°, redundancia, alta resolución." },
];
const EQ_LEVELS = [
  { n: 1, t: "Simple", d: "Pocos equipos por punto, homogéneos, criticidad baja, turno único." },
  { n: 2, t: "Moderado", d: "Equipos similares entre puntos, criticidad media.", ref: "Teniente · Escondida" },
  { n: 3, t: "Estándar", d: "Mix de equipos, criticidad media." },
  { n: 4, t: "Complejo", d: "Múltiples equipos heterogéneos, criticidad alta, SLA estrictos." },
  { n: 5, t: "Muy complejo", d: "3+ equipos por punto, faena crítica, régimen 24/7.", ref: "Chuqui · Spence" },
];

const MODALIDADES = {
  streaming: {
    label: "Streaming",
    desc: "Video continuo con análisis frame por frame. Detección en tiempo real para activos críticos donde una falla detiene la faena.",
    activos: "Apron feeder, chancador, correa de alta criticidad",
    calib: "Codelco El Teniente · Chuquicamata",
    historia: "16 meses · error < 3%",
    costo: "~3-6× por punto vs. Imagen",
  },
  imagen: {
    label: "Imagen",
    desc: "Capturas discretas con análisis por lote. Monitoreo de estado y condición sin urgencia temporal, ideal con ancho de banda limitado.",
    activos: "Palas, correas de baja criticidad, inventarios",
    calib: "BHP Escondida · Spence",
    historia: "8 / 4 meses · error < 1,5%",
    costo: "Más económico · etiquetado 10× menor",
  },
  conjunto: {
    label: "Conjunto",
    desc: "Streaming e Imagen en una sola propuesta, bajo una misma plataforma y equipo.",
  },
};

/* ---------- Eyebrow + título ---------- */
function PageHead({ eyebrow, title, lede }) {
  return (
    <div>
      <span className="eyebrow">— {eyebrow}</span>
      <h1 className="title" dangerouslySetInnerHTML={{ __html: title }}></h1>
      {lede ? <p className="lede">{lede}</p> : null}
    </div>
  );
}

/* ---------- Number stepper ---------- */
function NumStepper({ value, onChange, min, max, step }) {
  min = min == null ? 0 : min; step = step || 1;
  const set = (v) => {
    if (isNaN(v)) v = min;
    if (v < min) v = min;
    if (max != null && v > max) v = max;
    onChange(v);
  };
  return (
    <div className="stepper-num">
      <button type="button" onClick={() => set(value - step)} aria-label="menos">−</button>
      <input type="number" value={value} min={min} onChange={(e) => set(parseInt(e.target.value, 10))} />
      <button type="button" onClick={() => set(value + step)} aria-label="más">+</button>
    </div>
  );
}

/* ---------- Slider 1-5 con descripción ---------- */
function LevelSlider({ value, onChange, levels }) {
  const cur = levels.find((l) => l.n === value) || levels[0];
  return (
    <div className="slider">
      <div className="track">
        {levels.map((l) => (
          <div key={l.n} className={"seg" + (l.n <= value ? " on" : "")} onClick={() => onChange(l.n)}></div>
        ))}
      </div>
      <div className="scale">
        {levels.map((l) => (
          <span key={l.n} className={l.n === value ? "on" : ""} onClick={() => onChange(l.n)}>{l.n}</span>
        ))}
      </div>
      <div className="desc">
        <b>{cur.n} · {cur.t}.</b> {cur.d}
        {cur.ref ? <span style={{ color: "var(--ink-4)" }}> &nbsp;Ref.: {cur.ref}</span> : null}
      </div>
    </div>
  );
}

/* ---------- Field wrapper ---------- */
function Field({ label, hint, children, full }) {
  return (
    <div className={"field" + (full ? " full" : "")}>
      <label>{label}</label>
      {children}
      {hint ? <span className="hint">{hint}</span> : null}
    </div>
  );
}

Object.assign(window, {
  VIS_LEVELS, EQ_LEVELS, MODALIDADES,
  PageHead, NumStepper, LevelSlider, Field,
});