// ============ AcademIA8 · Consola — Costos y precio (COSTOS-1) ============
// P1 (parámetros globales, versionados) + P2/P3 (cálculo y resultado por
// curso) + P5 (confirmación con candado, escribe CURSO#{id}/COMERCIAL) +
// camino de curso gratuito (decisión 11, nunca pasa por el candado).
// Reemplaza el prototipo client-side anterior (sin backend, sin persistencia,
// modelo de costo distinto): ahora el precio confirmado viaja al ítem real
// que lee el funnel de pago (sección 6 del documento de diseño).
// P4 (pisar el precio a mano) queda diferido a COSTOS-1B — el backend ya
// acepta el override (`precio_usd_override`), pero esta pantalla todavía no
// expone el campo.

function fmtUSD(n) {
  return n == null ? "—" : "$" + Number(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function fmtARS(n) {
  return n == null ? "—" : "$" + Math.round(Number(n)).toLocaleString("es-AR");
}
function fmtPct(n) {
  return n == null ? "—" : (Number(n) * 100).toFixed(1) + "%";
}

function CostosResult({ label, value, accent }) {
  return (
    <div className="pub-stat">
      <div className="n" style={accent ? { color: accent } : undefined}>{value}</div>
      <div className="l">{label}</div>
    </div>
  );
}

// ---------------- Editores de listas dinámicas ----------------

function ImpuestosEditor({ lineas, onChange }) {
  const total = lineas.reduce((s, l) => s + (Number(l.alicuota) || 0), 0);
  function set(i, campo, valor) {
    const next = lineas.slice();
    next[i] = { ...next[i], [campo]: valor };
    onChange(next);
  }
  function add() {
    onChange([...lineas, { concepto: "", alicuota: 0 }]);
  }
  function del(i) {
    onChange(lineas.filter((_, idx) => idx !== i));
  }
  return (
    <Field
      label="Tabla de impuestos (concepto + alícuota)"
      hint={`Carga total: ${(total * 100).toFixed(2)}%. Cada alícuota es una fracción (0.1736 = 17,36%), no un entero. El 38% del documento sigue sin composición verificada por un contador — cargá acá lo que confirme.`}
    >
      {lineas.map((l, i) => (
        <div key={i} className="flex center gap8" style={{ marginBottom: 6 }}>
          <input type="text" value={l.concepto} onChange={(e) => set(i, "concepto", e.target.value)} placeholder="Concepto (ej. IVA)" style={{ flex: 1 }} />
          <input type="number" step="0.0001" value={l.alicuota} onChange={(e) => set(i, "alicuota", Number(e.target.value))} style={{ width: 90 }} />
          <button className="btn-icon danger" title="Quitar línea" disabled={lineas.length <= 1} onClick={() => del(i)}><Icon name="x" /></button>
        </div>
      ))}
      <button className="add-row" onClick={add}><Icon name="plus" /> Agregar línea</button>
    </Field>
  );
}

function FijosEditor({ fijos, onChange }) {
  function set(i, campo, valor) {
    const next = fijos.slice();
    next[i] = { ...next[i], [campo]: valor };
    onChange(next);
  }
  function add() {
    onChange([...fijos, { concepto: "", monto_usd: 0 }]);
  }
  function del(i) {
    onChange(fijos.filter((_, idx) => idx !== i));
  }
  return (
    <Field label="Costos fijos de esta edición (USD)" hint="Marketing, autoría externa si la hubo — ya convertidos a USD con el TC de referencia.">
      {fijos.map((f, i) => (
        <div key={i} className="flex center gap8" style={{ marginBottom: 6 }}>
          <input type="text" value={f.concepto} onChange={(e) => set(i, "concepto", e.target.value)} placeholder="Concepto (ej. marketing)" style={{ flex: 1 }} />
          <input type="number" step="0.01" value={f.monto_usd} onChange={(e) => set(i, "monto_usd", Number(e.target.value))} style={{ width: 110 }} />
          <button className="btn-icon danger" title="Quitar línea" disabled={fijos.length <= 1} onClick={() => del(i)}><Icon name="x" /></button>
        </div>
      ))}
      <button className="add-row" onClick={add}><Icon name="plus" /> Agregar línea</button>
    </Field>
  );
}

// ---------------- P1: Parámetros globales ----------------

function ParametrosGlobalesTab() {
  const [actual, setActual] = useState(undefined); // undefined = cargando
  const [form, setForm] = useState(null);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);

  async function cargar() {
    try {
      const p = await A8Api.getParametrosCostos();
      setActual(p || null);
      setForm(
        p
          ? {
              masa_salarial_usd: p.masa_salarial_usd,
              porcentaje_academia8: p.porcentaje_academia8 * 100,
              plataforma_usd: p.plataforma_usd,
              base_alumnos: p.base_alumnos,
              tc_referencia: p.tc_referencia,
              impuestos: p.impuestos,
            }
          : {
              masa_salarial_usd: 0,
              porcentaje_academia8: 35,
              plataforma_usd: 0,
              base_alumnos: 200,
              tc_referencia: 1000,
              impuestos: [{ concepto: "carga total (ajustar con el contador)", alicuota: 0.38 }],
            }
      );
    } catch (e) {
      setErr(e.message);
    }
  }
  useEffect(() => { cargar(); }, []);

  if (!form) return <div className="hint">Cargando parámetros…</div>;

  async function guardar() {
    setBusy(true);
    setErr(null);
    try {
      await A8Api.setParametrosCostos({
        masa_salarial_usd: Number(form.masa_salarial_usd),
        porcentaje_academia8: Number(form.porcentaje_academia8) / 100,
        plataforma_usd: Number(form.plataforma_usd),
        base_alumnos: Number(form.base_alumnos),
        tc_referencia: Number(form.tc_referencia),
        impuestos: form.impuestos,
      });
      await cargar();
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  }

  const baseAlumnos = Number(form.base_alumnos) || 0;
  const tasaPlataforma = baseAlumnos > 0 ? Number(form.plataforma_usd) / baseAlumnos : 0;
  const tasaSueldos = baseAlumnos > 0 ? (Number(form.masa_salarial_usd) * Number(form.porcentaje_academia8)) / 100 / baseAlumnos : 0;

  return (
    <div className="org-grid">
      <div className="card card-pad">
        <div className="col-title" style={{ marginBottom: 16 }}><span className="ct">Parámetros globales</span></div>
        {actual && (
          <div className="hint" style={{ marginBottom: 12 }}>
            Versión vigente: <b className="mono">{actual.version}</b> · cargada por {actual.creado_por} el {new Date(actual.creado_en).toLocaleString("es-AR")}
          </div>
        )}
        <Field label="Masa salarial de MAJUL del período (USD)"><input type="number" value={form.masa_salarial_usd} onChange={(e) => setForm({ ...form, masa_salarial_usd: e.target.value })} /></Field>
        <Field label="% asignado a Academia 8" hint="Fracción de la masa salarial que corresponde a este producto, no la masa completa.">
          <div className="flex center gap8"><input type="number" step="0.5" value={form.porcentaje_academia8} onChange={(e) => setForm({ ...form, porcentaje_academia8: e.target.value })} /><span className="muted mono" style={{ fontSize: 11.5 }}>%</span></div>
        </Field>
        <Field label="Plataforma del período (USD)" hint="AWS, Kapso, licencias, dominio, backups."><input type="number" value={form.plataforma_usd} onChange={(e) => setForm({ ...form, plataforma_usd: e.target.value })} /></Field>
        <Field label="Base de alumnos del período" hint="Fijada por Nahir, recalibrada contra alumnos reales del período anterior."><input type="number" value={form.base_alumnos} onChange={(e) => setForm({ ...form, base_alumnos: e.target.value })} /></Field>
        <Field label="Tipo de cambio de referencia (ARS/USD)"><input type="number" value={form.tc_referencia} onChange={(e) => setForm({ ...form, tc_referencia: e.target.value })} /></Field>
        <ImpuestosEditor lineas={form.impuestos} onChange={(impuestos) => setForm({ ...form, impuestos })} />
        {err && <div className="hint" style={{ color: "var(--magenta)" }}>{err}</div>}
        <Btn variant="primary" icon="check" disabled={busy} onClick={guardar}>{busy ? "Guardando…" : "Guardar nueva versión"}</Btn>
      </div>
      <div className="card card-pad">
        <div className="col-title" style={{ marginBottom: 16 }}><span className="ct">Tasas resultantes por alumno / mes</span></div>
        <div className="meta-grid">
          <div className="meta-field"><div className="mf-k">Plataforma</div><div className="mf-v mono">{fmtUSD(tasaPlataforma)}</div></div>
          <div className="meta-field"><div className="mf-k">Sueldos</div><div className="mf-v mono">{fmtUSD(tasaSueldos)}</div></div>
          <div className="meta-field"><div className="mf-k">Total por alumno / mes</div><div className="mf-v mono">{fmtUSD(tasaPlataforma + tasaSueldos)}</div></div>
        </div>
        <div className="hint" style={{ marginTop: 10 }}>Esto es lo que consume cada curso, multiplicado por su duración en meses (pestaña Curso).</div>
      </div>
    </div>
  );
}

// ---------------- P2/P3/P5: Curso ----------------

function MedidoLine({ medido, onUse }) {
  if (!medido) return null;
  const esP90 = medido.costo_llm_p90_por_alumno != null;
  const valor = esP90 ? medido.costo_llm_p90_por_alumno : medido.costo_llm_promedio_por_alumno;
  if (valor == null) return null;
  return (
    <div className="hint" style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
      <span>
        Medido{esP90 ? " (p90)" : ""}: <b className="mono">{fmtUSD(valor)}</b> por alumno (al {new Date(medido.fecha_corte).toLocaleDateString("es-AR")}, {medido.alumnos_con_actividad} alumnos)
      </span>
      {!esP90 && <span className="chip" style={{ color: "var(--magenta)" }}>medición sin p90 — regenerá el reporte</span>}
      <button className="chip" onClick={() => onUse(valor)}>Usar medido</button>
    </div>
  );
}

function EstadoComercial({ estado }) {
  if (!estado || !estado.categoria) {
    return <div className="hint">Este curso todavía no tiene un precio confirmado ni está marcado como gratuito.</div>;
  }
  if (estado.categoria === "gratuito") {
    return <div className="pill pill-draft"><span className="dt"></span>Curso gratuito — no genera venta{estado.motivo_gratuito ? `: ${estado.motivo_gratuito}` : ""}</div>;
  }
  return (
    <div className="meta-grid">
      <div className="meta-field"><div className="mf-k">Precio vigente</div><div className="mf-v mono">{fmtARS(estado.precio_ars)} ({fmtUSD(estado.precio_usd)})</div></div>
      <div className="meta-field"><div className="mf-k">Versión</div><div className="mf-v mono">{estado.version}</div></div>
      <div className="meta-field"><div className="mf-k">Vigencia</div><div className="mf-v mono">{estado.vigente_desde} → {estado.vigente_hasta}</div></div>
      <div className="meta-field">
        <div className="mf-k">Venta habilitada</div>
        <div className="mf-v" style={{ color: estado.venta_habilitada ? "var(--verde-prof)" : "var(--magenta)" }}>
          {estado.venta_habilitada ? "Sí" : `No — ${estado.motivo_no_habilitada}`}
        </div>
      </div>
    </div>
  );
}

function GratuitoModal({ onClose, onConfirm, busy }) {
  const [motivo, setMotivo] = useState("");
  return (
    <Modal
      title="Marcar curso como gratuito"
      subtitle="Categoría propia (decisión 11): se publica como contenido y jamás pasa por el candado de precio."
      onClose={onClose}
      foot={
        <>
          <div className="spacer"></div>
          <Btn variant="subtle" onClick={onClose}>Cancelar</Btn>
          <Btn variant="primary" icon="check" disabled={busy} onClick={() => onConfirm(motivo)}>{busy ? "Guardando…" : "Confirmar"}</Btn>
        </>
      }
    >
      <Field label="Motivo" optional><input type="text" value={motivo} onChange={(e) => setMotivo(e.target.value)} placeholder="Ej. curso de captación" /></Field>
    </Modal>
  );
}

function CursoCostosTab() {
  const [cursos, setCursos] = useState([]);
  const [cursoId, setCursoId] = useState("");
  const [estado, setEstado] = useState(null);
  const [medido, setMedido] = useState(null);
  const [form, setForm] = useState({
    nombre_comercial: "",
    duracion_meses: 2,
    n_estimado: 60,
    margen: 40,
    fijos: [{ concepto: "marketing", monto_usd: 0 }],
    c2_valor: 0,
    c2_es_override: false,
    motivo_override_c2: "",
  });
  const [resultado, setResultado] = useState(null);
  const [motivoOverride, setMotivoOverride] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const [gratuitoModal, setGratuitoModal] = useState(false);

  useEffect(() => {
    A8Api.listCourses().then(setCursos).catch(() => {});
    fetch("costos-medidos.json", { cache: "no-store" }).then((r) => (r.ok ? r.json() : null)).then(setMedido).catch(() => {});
  }, []);

  useEffect(() => {
    setResultado(null);
    setErr(null);
    if (!cursoId) { setEstado(null); return; }
    A8Api.getComercialCurso(cursoId).then(setEstado).catch(() => setEstado(null));
  }, [cursoId]);

  function setF(k, v) { setForm((f) => ({ ...f, [k]: v })); }

  function calculoInput() {
    return {
      duracion_meses: Number(form.duracion_meses),
      n_estimado: Number(form.n_estimado),
      fijos: form.fijos.map((f) => ({ concepto: f.concepto, monto_usd: Number(f.monto_usd) })),
      c2_valor: Number(form.c2_valor),
      c2_es_override: form.c2_es_override,
      motivo_override_c2: form.motivo_override_c2 || null,
      margen: Number(form.margen) / 100,
    };
  }

  async function calcular() {
    setBusy(true);
    setErr(null);
    setResultado(null);
    try {
      setResultado(await A8Api.calcularCostos(cursoId, calculoInput()));
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  }

  async function confirmar() {
    setBusy(true);
    setErr(null);
    try {
      const r = await A8Api.confirmarPrecioCurso(cursoId, {
        ...calculoInput(),
        nombre_comercial: form.nombre_comercial,
        motivo_override: motivoOverride || null,
      });
      setEstado(r);
      setResultado(null);
      setMotivoOverride("");
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  }

  async function marcarGratuito(motivo) {
    setBusy(true);
    setErr(null);
    try {
      const r = await A8Api.marcarCursoGratuito(cursoId, motivo || null);
      setEstado(r);
      setGratuitoModal(false);
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  }

  const esGratuito = estado && estado.categoria === "gratuito";

  return (
    <div className="org-grid">
      <div className="card card-pad">
        <div className="col-title" style={{ marginBottom: 16 }}><span className="ct">Curso</span></div>
        <Field label="Curso">
          <select value={cursoId} onChange={(e) => setCursoId(e.target.value)}>
            <option value="">Elegí un curso…</option>
            {cursos.map((c) => (<option key={c.curso_id} value={c.curso_id}>{c.titulo || c.curso_id}</option>))}
          </select>
        </Field>
        {cursoId && <EstadoComercial estado={estado} />}
        {cursoId && !esGratuito && (
          <Btn variant="ghost" size="sm" onClick={() => setGratuitoModal(true)} style={{ marginTop: 10 }}>
            Marcar como gratuito (captación / interno)
          </Btn>
        )}
        {err && <div className="hint" style={{ color: "var(--magenta)", marginTop: 10 }}>{err}</div>}
      </div>

      {cursoId && !esGratuito && (
        <>
          <div className="card card-pad">
            <div className="col-title" style={{ marginBottom: 16 }}><span className="ct">Cálculo</span></div>
            <Field label="Nombre comercial"><input type="text" value={form.nombre_comercial} onChange={(e) => setF("nombre_comercial", e.target.value)} /></Field>
            <Field label="Duración" hint="En meses."><input type="number" value={form.duracion_meses} onChange={(e) => setF("duracion_meses", e.target.value)} /></Field>
            <Field label="N estimado"><input type="number" value={form.n_estimado} onChange={(e) => setF("n_estimado", e.target.value)} /></Field>
            <FijosEditor fijos={form.fijos} onChange={(fijos) => setF("fijos", fijos)} />
            <Field label="C2 medido (USD por alumno)">
              <input type="number" step="0.01" value={form.c2_valor} onChange={(e) => setF("c2_valor", e.target.value)} />
            </Field>
            <MedidoLine medido={medido} onUse={(v) => setF("c2_valor", v)} />
            <Field label="Override de C2" hint="Solo válido si el curso todavía no tiene historia de medición propia.">
              <label className="flex center gap8">
                <input type="checkbox" checked={form.c2_es_override} onChange={(e) => setF("c2_es_override", e.target.checked)} /> Es override
              </label>
              {form.c2_es_override && (
                <input type="text" placeholder="Motivo del override" value={form.motivo_override_c2} onChange={(e) => setF("motivo_override_c2", e.target.value)} style={{ marginTop: 6 }} />
              )}
            </Field>
            <Field label="Margen" hint="Default 40%, editable por curso.">
              <div className="flex center gap8"><input type="number" step="0.5" value={form.margen} onChange={(e) => setF("margen", e.target.value)} /><span className="muted mono" style={{ fontSize: 11.5 }}>%</span></div>
            </Field>
            <Btn variant="primary" icon="check" disabled={busy || !form.nombre_comercial} onClick={calcular}>{busy ? "Calculando…" : "Calcular"}</Btn>
          </div>

          <div className="card card-pad">
            <div className="col-title" style={{ marginBottom: 16 }}><span className="ct">Resultado</span></div>
            {!resultado && <div className="hint">Calculá para ver el precio sugerido y el punto de equilibrio.</div>}
            {resultado && (
              <>
                <div className="pub-summary" style={{ gap: 18, flexWrap: "wrap" }}>
                  <CostosResult label="Precio USD" value={fmtUSD(resultado.precio_usd)} />
                  <CostosResult label="Precio ARS (redondeado)" value={fmtARS(resultado.precio_ars)} accent="var(--verde-prof)" />
                </div>
                <div className="hr"></div>
                <div className="meta-grid">
                  <div className="meta-field"><div className="mf-k">Margen efectivo</div><div className="mf-v mono">{fmtPct(resultado.margen_efectivo)}</div></div>
                  <div className="meta-field"><div className="mf-k">Punto de equilibrio</div><div className="mf-v mono">{resultado.n_equilibrio == null ? "∞" : resultado.n_equilibrio} alumnos</div></div>
                </div>
                <div className="hr"></div>
                <div style={{ fontSize: 12.8, lineHeight: 1.8, color: "var(--grafito)" }}>
                  <div>Precio = <b className="mono">{fmtUSD(resultado.verificacion.precio)}</b></div>
                  <div>Impuestos = <b className="mono">{fmtUSD(resultado.verificacion.impuestos)}</b></div>
                  <div>Neto = <b className="mono">{fmtUSD(resultado.verificacion.neto)}</b></div>
                  <div>Costo = <b className="mono">{fmtUSD(resultado.verificacion.costo)}</b></div>
                  <div>Utilidad = <b className="mono">{fmtUSD(resultado.verificacion.utilidad)}</b></div>
                </div>
                <div className="hr"></div>
                <div className="col-title" style={{ marginBottom: 8 }}><span className="ct">Sensibilidad</span></div>
                {resultado.tabla_sensibilidad.map((p) => (
                  <div key={p.n} className="flex between" style={{ fontSize: 12.8, padding: "2px 0" }}>
                    <span>{p.n} alumnos</span><span className="mono">{fmtUSD(p.resultado_usd)}</span>
                  </div>
                ))}
                {resultado.candado_activado && (
                  <>
                    <div className="hr"></div>
                    <Field label="Motivo (candado activado: el N estimado queda por debajo del punto de equilibrio)">
                      <textarea value={motivoOverride} onChange={(e) => setMotivoOverride(e.target.value)} placeholder="Por qué se confirma este precio de todos modos…" />
                    </Field>
                  </>
                )}
                {err && <div className="hint" style={{ color: "var(--magenta)" }}>{err}</div>}
                <Btn
                  variant="primary"
                  icon="check"
                  disabled={busy || (resultado.candado_activado && !motivoOverride.trim())}
                  onClick={confirmar}
                  style={{ marginTop: 10 }}
                >
                  {busy ? "Confirmando…" : "Confirmar precio"}
                </Btn>
              </>
            )}
          </div>
        </>
      )}

      {gratuitoModal && <GratuitoModal onClose={() => setGratuitoModal(false)} onConfirm={marcarGratuito} busy={busy} />}
    </div>
  );
}

// ---------------- Módulo raíz ----------------

function CostosModule() {
  const [tab, setTab] = useState("curso");
  return (
    <div className="wrap">
      <div className="flex between center">
        <div>
          <div className="page-kick">Consumo y precio</div>
          <h1 className="page-title" style={{ marginTop: "8px" }}>Costos y precio</h1>
        </div>
      </div>
      <div className="muted" style={{ marginTop: "10px", fontSize: 13, lineHeight: 1.5, maxWidth: 640 }}>
        Calculadora por curso (COSTOS-1). El precio confirmado nunca se recalcula solo: cada confirmación queda versionada, y es el mismo dato que el funnel de pago va a leer.
      </div>
      <div className="section-gap"></div>
      <div className="flex gap8" style={{ marginBottom: 16 }}>
        <button className={`chip${tab === "curso" ? " on" : ""}`} onClick={() => setTab("curso")}>Curso</button>
        <button className={`chip${tab === "parametros" ? " on" : ""}`} onClick={() => setTab("parametros")}>Parámetros globales</button>
      </div>
      {tab === "curso" ? <CursoCostosTab /> : <ParametrosGlobalesTab />}
    </div>
  );
}

Object.assign(window, { CostosModule });