// ============ AcademIA8 · Consola — Calculadora de costos (C2, client-side) ============
// Sin backend, sin API, sin persistencia: todo el cálculo vive en el navegador.
// Las tarifas de referencia se guardan acá arriba para poder actualizarlas sin
// tocar la lógica de cálculo más abajo.
const COSTOS_CONFIG = {
  utility: 0.0260,        // USD por mensaje de servicio (WhatsApp, tarifa Meta)
  marketing: 0.0618,      // USD por mensaje de marketing/proactivo (recordatorio)
  kapsoMensual: 25,       // USD/mes de referencia del plan Pro de Kapso (hoy: plan Free = 0, editable abajo)
};

const COSTOS_DEFAULTS = {
  alumnos: 50,
  mensajes: 80,
  recordatorios: 4,
  meses: 2,
  costoLLM: 0.10,
  impositivo: 35,     // %
  factorSeguridad: 3,
  margen: 8,
  postOctubre: false, // recargo de utility de WhatsApp entra en vigencia en octubre 2026
  kapsoMensual: COSTOS_CONFIG.kapsoMensual,
};

function fmtUSD(n){
  return '$' + n.toLocaleString('en-US', { minimumFractionDigits:2, maximumFractionDigits:2 });
}

function CostosSlider({ label, value, onChange, min, max, step, suffix, help, tip }){
  return (
    <div className="field">
      <label>{label}{help && <span className="opt-tag">{help}</span>}{tip && <HelpTip title={label}>{tip}</HelpTip>}</label>
      <div className="flex center gap12">
        <input type="range" min={min} max={max} step={step} value={value}
          onChange={e=>onChange(Number(e.target.value))}
          style={{flex:1, accentColor:'var(--magenta)'}} />
        <div className="flex center gap8" style={{flex:'0 0 auto'}}>
          <input type="text" inputMode="decimal" value={value}
            onChange={e=>{ const v=Number(e.target.value); if(!Number.isNaN(v)) onChange(v); }}
            style={{width:74, border:'1px solid var(--linea)', borderRadius:9, padding:'8px 9px', fontSize:13.5, fontWeight:700, color:'var(--tinta)', textAlign:'right'}} />
          {suffix && <span className="muted mono" style={{fontSize:11.5}}>{suffix}</span>}
        </div>
      </div>
    </div>
  );
}

function fmtFechaCorte(iso){
  try{ return new Date(iso).toLocaleDateString('es-AR', { day:'2-digit', month:'2-digit', year:'numeric' }); }
  catch(e){ return iso; }
}

// Línea "Medido: $X.XX promedio por alumno (al [fecha], N alumnos)" + botón "Usar medido".
// Si no hay dato para ese campo (JSON inexistente o valor null), no renderiza nada.
function MedidoLine({ medido, campo, fmt, onUse }){
  if (!medido || medido[campo] == null) return null;
  return (
    <div className="hint" style={{display:'flex', alignItems:'center', gap:8, flexWrap:'wrap'}}>
      <span>Medido: <b className="mono">{fmt(medido[campo])}</b> promedio por alumno (al {fmtFechaCorte(medido.fecha_corte)}, {medido.alumnos_con_actividad} alumnos)</span>
      <button className="chip" onClick={onUse}>Usar medido</button>
    </div>
  );
}

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

function CostosModule(){
  const [alumnos, setAlumnos] = useState(COSTOS_DEFAULTS.alumnos);
  const [mensajes, setMensajes] = useState(COSTOS_DEFAULTS.mensajes);
  const [recordatorios, setRecordatorios] = useState(COSTOS_DEFAULTS.recordatorios);
  const [meses, setMeses] = useState(COSTOS_DEFAULTS.meses);
  const [costoLLM, setCostoLLM] = useState(COSTOS_DEFAULTS.costoLLM);
  const [impositivo, setImpositivo] = useState(COSTOS_DEFAULTS.impositivo);
  const [factorSeguridad, setFactorSeguridad] = useState(COSTOS_DEFAULTS.factorSeguridad);
  const [margen, setMargen] = useState(COSTOS_DEFAULTS.margen);
  const [postOctubre, setPostOctubre] = useState(COSTOS_DEFAULTS.postOctubre);
  const [kapsoMensual, setKapsoMensual] = useState(COSTOS_DEFAULTS.kapsoMensual);
  const [medido, setMedido] = useState(null);

  useEffect(()=>{
    let cancel = false;
    fetch('costos-medidos.json', { cache:'no-store' })
      .then(r => r.ok ? r.json() : null)
      .then(data => { if (!cancel) setMedido(data); })
      .catch(()=>{ /* sin archivo publicado todavía: comportamiento actual intacto */ });
    return ()=>{ cancel = true; };
  }, []);

  const alumnosSeguro = Math.max(1, alumnos);
  const costoWhatsapp = (postOctubre ? mensajes * COSTOS_CONFIG.utility : 0) + recordatorios * COSTOS_CONFIG.marketing;
  const variable = (costoWhatsapp + costoLLM) * factorSeguridad;
  const kapsoProrrateado = (kapsoMensual * meses / alumnosSeguro) * (1 + impositivo/100);
  const costoTotal = variable + kapsoProrrateado;
  const precioSugerido = Math.ceil(costoTotal * margen);

  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'}}>Calculadora de costos</h1>
        </div>
      </div>
      <div className="muted" style={{marginTop:'10px', fontSize:13, lineHeight:1.5, maxWidth:640}}>
        Estimación de costo y precio sugerido por alumno enrolado. Cálculo client-side, no se guarda ni se envía a ningún lado: al recargar la página vuelve a los valores por defecto.
      </div>

      <div className="section-gap"></div>

      <div className="org-grid">
        <div>
          <div className="card card-pad">
            <div className="col-title" style={{marginBottom:16}}>
              <span className="ct">Parámetros</span>
            </div>

            <CostosSlider label="Alumnos por cohorte" value={alumnos} onChange={setAlumnos} min={1} max={500} step={1}
              tip="Cantidad de inscriptos que el laboratorio paga. El costo fijo de plataforma se reparte entre ellos." />
            <CostosSlider label="Mensajes del tutor por alumno" value={mensajes} onChange={setMensajes} min={0} max={300} step={1}
              tip="Total de mensajes de WhatsApp que el tutor envía a UN alumno durante todo el curso (pasos del guion + respuestas). Gratis hasta el 30/9/2026; desde octubre se cobran (activar el toggle)." />
            <MedidoLine medido={medido} campo="mensajes_promedio_por_alumno" fmt={v=>v.toFixed(1)} onUse={()=>setMensajes(Math.round(medido.mensajes_promedio_por_alumno))} />
            <CostosSlider label="Recordatorios proactivos" value={recordatorios} onChange={setRecordatorios} min={0} max={30} step={1}
              tip="Mensajes a alumnos inactivos, fuera de la ventana de 24hs. Requieren plantilla aprobada por Meta y se cobran a tarifa marketing, la más cara." />
            <CostosSlider label="Duración" value={meses} onChange={setMeses} min={1} max={12} step={1} suffix="meses"
              tip="Cuántos meses corre la cohorte. Prorratea el costo mensual de la plataforma de envío (Kapso)." />
            <CostosSlider label="Costo LLM por alumno" value={costoLLM} onChange={setCostoLLM} min={0} max={5} step={0.01} suffix="USD"
              tip="Lo que gasta en IA (Bedrock/Claude) un alumno que completa el curso. Estimado; usar el valor medido cuando esté disponible." />
            <MedidoLine medido={medido} campo="costo_llm_promedio_por_alumno" fmt={fmtUSD} onUse={()=>setCostoLLM(medido.costo_llm_promedio_por_alumno)} />
            <CostosSlider label="Recargo impositivo" value={impositivo} onChange={setImpositivo} min={0} max={100} step={1} suffix="%"
              tip="Percepciones e impuestos por pagar servicios del exterior en USD desde Argentina. Aplica al fee de Kapso." />
            <CostosSlider label="Factor de seguridad" value={factorSeguridad} onChange={setFactorSeguridad} min={1} max={10} step={0.5} suffix="x"
              tip="Multiplica el costo variable para cubrir la incertidumbre de la estimación. Bajar a 1.5x cuando haya datos de cohorte real." />
            <CostosSlider label="Margen" value={margen} onChange={setMargen} min={1} max={20} step={0.5} suffix="x"
              tip="Múltiplo sobre el costo total para llegar al precio de venta. El precio final lo define el valor para el cliente; esto marca el piso." />

            <div className="field" style={{marginBottom:0}}>
              <label>Post-octubre 2026<span className="opt-tag">recargo utility WhatsApp</span>
                <HelpTip title="Post-octubre 2026">Desde el 1/10/2026 Meta cobra los mensajes de servicio (hoy gratis) a tarifa utility. Activar para simular el escenario real de cualquier cohorte que arranque en octubre o después.</HelpTip>
              </label>
              <button className={`chip${postOctubre?' on':''}`} onClick={()=>setPostOctubre(v=>!v)}>
                {postOctubre ? 'Activado' : 'Desactivado'}
              </button>
            </div>
          </div>

          <div className="section-gap"></div>

          <div className="card card-pad">
            <div className="col-title" style={{marginBottom:14}}>
              <span className="ct">Tarifas</span>
              <span className="cc">avanzado</span>
              <HelpTip title="Tarifas">Precios por mensaje de Meta para Argentina (julio 2026) y plan Pro de Kapso. Actualizar acá si Meta los cambia.</HelpTip>
            </div>
            <div className="meta-grid">
              <div className="meta-field">
                <div className="mf-k">Utility (WhatsApp servicio)</div>
                <div className="mf-v mono">{COSTOS_CONFIG.utility.toFixed(4)} USD/msj</div>
              </div>
              <div className="meta-field">
                <div className="mf-k">Marketing (WhatsApp proactivo)</div>
                <div className="mf-v mono">{COSTOS_CONFIG.marketing.toFixed(4)} USD/msj</div>
              </div>
            </div>
            <div className="hr"></div>
            <CostosSlider label="Kapso mensual" value={kapsoMensual} onChange={setKapsoMensual} min={0} max={200} step={1} suffix="USD/mes" help="hoy: plan Free = 0" />
            <div className="hint">Utility y marketing se editan en el bloque de config al tope de <span className="mono">costos.jsx</span>, sin tocar la lógica del cálculo.</div>
          </div>
        </div>

        <div>
          <div className="card card-pad">
            <div className="col-title" style={{marginBottom:16}}>
              <span className="ct">Resultado</span>
            </div>
            <div className="pub-summary" style={{gap:'18px', flexWrap:'wrap'}}>
              <CostosResult label="Costo WhatsApp / alumno" value={costoWhatsapp} accent="var(--petroleo)" />
              <CostosResult label="Costo total con colchón / alumno" value={costoTotal} accent="var(--draft)" />
            </div>
            <div className="hr"></div>
            <div className="meta-field">
              <div className="mf-k">Precio sugerido / alumno</div>
              <div className="mf-v" style={{fontSize:26, fontFamily:'var(--serif)', fontWeight:700, color:'var(--verde-prof)'}}>${precioSugerido}</div>
            </div>
          </div>

          <div className="section-gap"></div>

          <div className="card card-pad">
            <div className="col-title" style={{marginBottom:14}}>
              <span className="ct">Desglose</span>
            </div>
            <div style={{fontSize:12.8, lineHeight:1.8, color:'var(--grafito)'}}>
              <div>WhatsApp = {postOctubre ? `(${mensajes} × ${COSTOS_CONFIG.utility})` : '(0, pre-octubre)'} + ({recordatorios} × {COSTOS_CONFIG.marketing}) = <b className="mono">{fmtUSD(costoWhatsapp)}</b></div>
              <div>Variable = (WhatsApp {fmtUSD(costoWhatsapp)} + LLM {fmtUSD(costoLLM)}) × {factorSeguridad} = <b className="mono">{fmtUSD(variable)}</b></div>
              <div>Kapso prorrateado = ({kapsoMensual} × {meses} / {alumnosSeguro}) × (1 + {impositivo}%) = <b className="mono">{fmtUSD(kapsoProrrateado)}</b></div>
              <div>Costo total = Variable {fmtUSD(variable)} + Kapso {fmtUSD(kapsoProrrateado)} = <b className="mono">{fmtUSD(costoTotal)}</b></div>
              <div>Precio sugerido = ceil(Costo total × {margen}) = <b className="mono">${precioSugerido}</b></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CostosModule });