/* global React */
// §5.4 TechnicalReportEditor + §5.5 MethodologyComparisonCard
// P14 — entregable de M03.E01 (preliminar) y M04.E08 (final con peer review hostil)

const { useState, useMemo } = React;

const SECTIONS = [
  { id: 1, title: "Cálculo Ke con CAPM", subtitle: "decisiones metodológicas", target: 300 },
  { id: 2, title: "Cálculo Ke con FF5",  subtitle: "cargas factoriales",      target: 300 },
  { id: 3, title: "Cálculo Ke con ICC",  subtitle: "growth assumptions",      target: 300 },
  { id: 4, title: "Comparación cuantitativa", subtitle: "3 enfoques · dispersión", target: 300 },
  { id: 5, title: "Recomendación final", subtitle: "justificada",             target: 300 },
];

const SECTION_BODIES = {
  1: `La estimación con CAPM utiliza R_f = 4,0% (yield 10y bund alemán a fecha 2025-03), ERP = 5,5% (Damodaran implied 2024) y β = 1,20 (β apalancada 5y mensual frente al S&P 500, dataset C001).

Decisión metodológica relevante: empleamos β apalancada en lugar de la desapalancada porque la estructura de capital de la empresa elegida ha sido estable los últimos 5 años (D/E entre 0,18 y 0,22). El smoothing Blume (β_ajustada = 0,67·β_raw + 0,33) modifica la lectura solo marginalmente (β_aj = 1,13) y se reporta como sensibilidad.

Resultado: Ke_CAPM = 4,0% + 1,20 · 5,5% = 10,6%. La principal limitación es la dependencia de una única dimensión (riesgo de mercado); el modelo no recoge prima por tamaño, value/growth ni quality, lo que en sectores tech con tilt growth puede subestimar el coste.`,

  2: `Cargas factoriales FF5 extraídas del dataset_multifactor_500.csv (fila 12, empresa C001, 60 meses): β_mkt = 1,20; β_SMB = −0,30 (tilt large cap); β_HML = −0,40 (tilt growth claro); β_RMW = 0,50 (robusta en rentabilidad operativa); β_CMA = −0,20 (no conservative en inversión).

Las primas factoriales esperadas (Fama-French data library, 1995-2024): E[SMB] = 2,3%, E[HML] = 3,1%, E[RMW] = 2,5%, E[CMA] = 1,8%. Aplicando la regresión:

Ke_FF5 = 4,0 + 1,20·5,5 + (−0,30)·2,3 + (−0,40)·3,1 + 0,50·2,5 + (−0,20)·1,8 = 11,1%

R² in-sample = 0,90 (vs 0,70 CAPM). El sub-período 1995-2007 muestra R² = 0,86 y last-5y = 0,78; la dispersión sub-período supera 10pp, por lo que las cargas se interpretan con cautela y el resultado se reporta como banda 10,5%–11,7%.`,

  3: `Aplicamos el ICC inverso (PEG-Ohlson) a la cotización corriente. Precio = 142,3; EPS_t+1 = 6,80; g_short = 12% (consensus IBES 2y); g_long = 5% (terminal).

Iterando sobre el residual income model con ROE_t+1 = 18% y book value = 38, resolvemos Ke tal que el PV de los residuals iguale (Precio − Book) = 104,3. Convergencia en Ke_ICC = 9,3%.

Asunción crítica: el growth de largo plazo. Sensibilidad ±100bp en g_long mueve Ke en ±0,5pp. Asunción secundaria: payout ratio constante 30%. El método es endógeno al precio (asume mercado eficiente en agregado), lo cual es virtud (sin necesidad de β) y limitación (no detecta mispricing si el precio ya lo refleja).`,

  4: `Los tres enfoques producen estimaciones diferentes: CAPM 8,2%, FF5 11,1%, ICC 9,3%. El rango max−min = 2,9pp supera el umbral de 2pp del marco metodológico, lo que obliga a un diagnóstico explícito antes de recomendar.

[Aquí debe ir el campo "Diagnóstico de divergencia" obligatorio antes de envío.]`,

  5: "",
};

function CitationStatus({ label, detected }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "7px 0", borderBottom: "1px solid var(--border)" }}>
      <span style={{ fontSize: 12, color: "var(--fg-muted)" }}>{label}</span>
      <span style={{
        display: "inline-flex", alignItems: "center", gap: 5,
        fontSize: 11, fontFamily: "var(--font-mono)",
        color: detected ? "var(--signal-mastery)" : "var(--fg-faint)",
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: detected ? "var(--signal-mastery)" : "var(--surface-3)" }}></span>
        {detected ? "detectada" : "pendiente"}
      </span>
    </div>
  );
}

// §5.5 MethodologyComparisonCard (embedded)
function MethodologyComparisonCard({ ke_capm, ke_ff5, ke_icc, divergenceDiagnosis, setDivergenceDiagnosis }) {
  const values = [
    { id: "capm", label: "CAPM", value: ke_capm, when: "estructura capital estable", inputs: "R_f=4.0 · ERP=5.5 · β=1.20", caveat: "ignora size/value/quality", sens: "β±0.1 → Ke ±0.55pp" },
    { id: "ff5",  label: "FF5",  value: ke_ff5,  when: "tilt sectorial claro",       inputs: "β_mkt 1.20 · β_SMB −0.30 · β_HML −0.40 · β_RMW 0.50", caveat: "cargas inestables sub-período", sens: "β_HML±0.1 → ±0.31pp" },
    { id: "icc",  label: "ICC",  value: ke_icc,  when: "alternativa endógena",       inputs: "P=142.3 · EPS=6.80 · g_short=12% · g_long=5%", caveat: "endógena al precio", sens: "g_long±100bp → ±0.5pp" },
  ];
  const max = Math.max(...values.map(v => v.value));
  const min = Math.min(...values.map(v => v.value));
  const dispersion = max - min;
  const isDivergent = dispersion >= 2.0;

  return (
    <div className="fz-card" style={{ padding: 0 }}>
      <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <div>
          <div className="fz-label">Methodology Comparison</div>
          <div style={{ fontSize: 11, color: "var(--fg-faint)", marginTop: 2 }}>3 métodos · sin media · siempre dispersión</div>
        </div>
        <span className="fz-chip" style={{
          background: isDivergent ? "rgba(229,184,115,0.14)" : "rgba(91,198,143,0.12)",
          color: isDivergent ? "var(--signal-hypothesis)" : "var(--signal-mastery)",
          borderColor: isDivergent ? "rgba(229,184,115,0.4)" : "rgba(91,198,143,0.35)",
        }}>
          Δ = {dispersion.toFixed(1)}pp
        </span>
      </div>

      {isDivergent && (
        <div className="fz-banner fz-banner-amber" style={{ margin: 12, marginBottom: 0 }}>
          <div>
            <div style={{ fontWeight: 500, color: "var(--fg)", marginBottom: 4 }}>
              Divergencia {dispersion.toFixed(1)}pp. <strong>NO promedies.</strong>
            </div>
            <div style={{ marginBottom: 8, fontSize: 12 }}>
              Explica qué supuesto causa la divergencia (campo obligatorio).
            </div>
            <textarea
              value={divergenceDiagnosis}
              onChange={e => setDivergenceDiagnosis(e.target.value)}
              placeholder="ej.: la divergencia CAPM↔FF5 nace de β_HML negativo (tilt growth); CAPM ignora la prima negativa de value, sub-estimando 2pp..."
              style={{
                width: "100%", minHeight: 56,
                padding: 10,
                background: "var(--surface-2)",
                border: "1px solid var(--border-strong)",
                borderRadius: 6,
                color: "var(--fg)",
                fontSize: 12,
                fontFamily: "var(--font-sans)",
                resize: "vertical",
              }}
            />
            <div style={{ fontSize: 10, color: "var(--fg-faint)", marginTop: 4, fontFamily: "var(--font-mono)" }}>
              {divergenceDiagnosis.length}/min 60 chars · bloqueante para envío
            </div>
          </div>
        </div>
      )}

      <div style={{ padding: 12, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
        {values.map(v => (
          <div key={v.id} style={{
            padding: 12,
            background: "var(--surface-2)",
            borderRadius: 6,
            border: "1px solid var(--border)",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
              <span style={{ fontSize: 12, color: "var(--fg)", fontWeight: 500 }}>{v.label}</span>
              <span style={{ fontSize: 10, color: "var(--fg-faint)", fontFamily: "var(--font-mono)" }}>Ke</span>
            </div>
            <div className="fz-num fz-num-loading" style={{ fontSize: 24, fontWeight: 500, lineHeight: 1 }}>
              {v.value.toFixed(1)}<span style={{ fontSize: 14 }}>%</span>
            </div>
            <div style={{ fontSize: 10, color: "var(--fg-faint)", marginTop: 8, lineHeight: 1.4 }}>
              {v.when}
            </div>
            <div style={{ marginTop: 8, paddingTop: 8, borderTop: "1px solid var(--border)", fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--fg-muted)", wordBreak: "break-word" }}>
              {v.inputs}
            </div>
            <div style={{ fontSize: 10, color: "var(--signal-loading)", marginTop: 6, fontFamily: "var(--font-mono)" }}>
              {v.sens}
            </div>
            <div style={{ fontSize: 10, color: "var(--fg-faint)", marginTop: 6, fontStyle: "italic" }}>
              ⚠ {v.caveat}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TechnicalReportEditor() {
  const [activeSection, setActiveSection] = useState(2);
  const [bodies, setBodies] = useState(SECTION_BODIES);
  const [divergenceDiagnosis, setDivergenceDiagnosis] = useState("");

  // Demo Ke values (matching prompt §8.3)
  const ke_capm = 8.2;
  const ke_ff5 = 11.1;
  const ke_icc = 9.3;

  const wordCount = (text) => text.trim().split(/\s+/).filter(Boolean).length;
  const sectionCounts = useMemo(() => {
    const out = {};
    SECTIONS.forEach(s => { out[s.id] = wordCount(bodies[s.id] || ""); });
    return out;
  }, [bodies]);
  const totalWords = Object.values(sectionCounts).reduce((a, b) => a + b, 0);

  const sectionStatus = (id) => {
    const c = sectionCounts[id];
    if (c >= 250) return "ok";
    if (c >= 100) return "progress";
    return "empty";
  };

  // Rubric (demo state)
  const rubric = [
    { id: "precision_tecnica", label: "Precisión técnica",  score: 22, max: 30 },
    { id: "uso_evidencia",     label: "Uso de evidencia",    score: 18, max: 25 },
    { id: "lenguaje_prudente", label: "Lenguaje prudente",   score: 23, max: 25 },
    { id: "transferencia",     label: "Transferencia",       score: 5,  max: 10 },
    { id: "claridad",          label: "Claridad",            score: 7,  max: 10 },
  ];
  const totalRubric = rubric.reduce((a, b) => a + b.score, 0);

  const citations = [
    { label: "Dataset multifactor fila X", detected: false },
    { label: "PEG-Ohlson en sección 3",    detected: false },
    { label: "Cargas factoriales FF5",     detected: true },
    { label: "Sensibilidad ±β terminal",   detected: false },
  ];

  // Send criteria
  const allSectionsLongEnough = SECTIONS.every(s => sectionCounts[s.id] >= 250);
  const wordRangeOk = totalWords >= 1350 && totalWords <= 1650;
  const divergenceOk = divergenceDiagnosis.trim().length >= 60;
  const tableTranscluded = false;
  const datasetCited = citations[0].detected;
  const linterOk = true;
  const canSend = allSectionsLongEnough && wordRangeOk && divergenceOk && tableTranscluded && datasetCited && linterOk;

  const activeBody = bodies[activeSection] || "";
  const activeMeta = SECTIONS.find(s => s.id === activeSection);

  return (
    <div className="fz-slot">
      <div className="fz-slot-header">
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="fz-eyebrow">S3 · LAB · MAP+PROJ</span>
          <span style={{ color: "var(--border-strong)" }}>·</span>
          <h2>Technical Report Editor</h2>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span className="fz-chip">M03 · E01</span>
          <span className="fz-chip">empresa: <span className="fz-mono" style={{ color: "var(--signal-driver)" }}>NVDA</span></span>
          <span className="fz-chip-amber fz-chip">
            <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--signal-hypothesis)" }}></span>
            preliminar · 1500 palabras
          </span>
        </div>
      </div>

      {/* 3 col layout: 200 / 1fr / 320 */}
      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "220px 1fr 340px", overflow: "hidden" }}>
        {/* LEFT — ToC */}
        <div className="fz-scroll" style={{ overflow: "auto", borderRight: "1px solid var(--border)", background: "var(--surface-1)", padding: "20px 0" }}>
          <div className="fz-label" style={{ padding: "0 20px 14px" }}>Estructura · 5 secciones fijas</div>
          {SECTIONS.map(s => {
            const status = sectionStatus(s.id);
            const isActive = activeSection === s.id;
            return (
              <button
                key={s.id}
                onClick={() => setActiveSection(s.id)}
                style={{
                  display: "block",
                  width: "100%",
                  padding: "10px 20px",
                  background: isActive ? "var(--surface-2)" : "transparent",
                  border: "none",
                  borderLeft: `2px solid ${isActive ? "var(--signal-driver)" : "transparent"}`,
                  textAlign: "left",
                  cursor: "pointer",
                  transition: "background 120ms",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{
                    width: 14, height: 14, borderRadius: 999,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    border: `1.5px solid ${
                      status === "ok" ? "var(--signal-mastery)" :
                      status === "progress" ? "var(--signal-hypothesis)" :
                      "var(--border-strong)"
                    }`,
                    background:
                      status === "ok" ? "var(--signal-mastery)" :
                      status === "progress" ? "transparent" :
                      "transparent",
                    flexShrink: 0,
                  }}>
                    {status === "ok" && <span style={{ color: "var(--bg)", fontSize: 9, fontWeight: 700 }}>✓</span>}
                    {status === "progress" && <span style={{ width: 5, height: 5, background: "var(--signal-hypothesis)", borderRadius: 999 }}></span>}
                  </span>
                  <span style={{ fontSize: 11, color: "var(--fg-faint)", fontFamily: "var(--font-mono)" }}>0{s.id}</span>
                </div>
                <div style={{ fontSize: 13, color: isActive ? "var(--fg)" : "var(--fg-muted)", marginTop: 6, marginLeft: 22, fontWeight: isActive ? 500 : 400 }}>
                  {s.title}
                </div>
                <div style={{ fontSize: 10, color: "var(--fg-faint)", marginTop: 2, marginLeft: 22, fontFamily: "var(--font-mono)" }}>
                  {sectionCounts[s.id]}/{s.target}
                </div>
              </button>
            );
          })}

          <div style={{ padding: "20px", marginTop: 12, borderTop: "1px solid var(--border)" }}>
            <div className="fz-label" style={{ marginBottom: 6 }}>Total</div>
            <div className="fz-mono" style={{ fontSize: 18, color: wordRangeOk ? "var(--signal-mastery)" : "var(--fg-muted)" }}>
              {totalWords}<span style={{ fontSize: 10, color: "var(--fg-faint)" }}>/1500 ±10%</span>
            </div>
          </div>
        </div>

        {/* CENTER — Editor */}
        <div className="fz-scroll" style={{ overflow: "auto", display: "flex", flexDirection: "column" }}>
          {/* Editor toolbar */}
          <div style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: "14px 28px",
            borderBottom: "1px solid var(--border)",
            background: "var(--surface-1)",
            position: "sticky", top: 0, zIndex: 1,
          }}>
            <div style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
              <span className="fz-mono" style={{ fontSize: 11, color: "var(--fg-faint)" }}>§ 0{activeMeta.id}</span>
              <span style={{ fontFamily: "var(--font-serif)", fontSize: 16, color: "var(--fg)" }}>{activeMeta.title}</span>
              <span style={{ fontSize: 11, color: "var(--fg-faint)", fontStyle: "italic" }}>· {activeMeta.subtitle}</span>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="fz-btn fz-btn-ghost" style={{ height: 28, fontSize: 12 }}>
                + Insertar evidencia
              </button>
              <button className="fz-btn fz-btn-ghost" style={{ height: 28, fontSize: 12 }}>
                ↹ formato
              </button>
            </div>
          </div>

          <div style={{ padding: "32px 56px", maxWidth: 720, width: "100%", margin: "0 auto" }}>
            <textarea
              value={activeBody}
              onChange={e => setBodies({ ...bodies, [activeSection]: e.target.value })}
              style={{
                width: "100%", minHeight: 360,
                background: "transparent",
                border: "none",
                outline: "none",
                color: "var(--fg)",
                fontFamily: "var(--font-serif)",
                fontSize: 16,
                lineHeight: 1.65,
                resize: "vertical",
              }}
            />

            {/* Inserted evidence card example */}
            {activeSection === 2 && (
              <div style={{
                marginTop: 18,
                padding: 16,
                background: "var(--surface-1)",
                border: "1px solid var(--border)",
                borderLeft: "3px solid var(--signal-loading)",
                borderRadius: 6,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                  <div className="fz-label">Tabla 2 · transcluida desde M04.E02 lab</div>
                  <span className="fz-mono" style={{ fontSize: 10, color: "var(--fg-faint)" }}>student_workspace</span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, fontFamily: "var(--font-mono)", fontSize: 11 }}>
                  {[["β_mkt", "+1.20"], ["β_SMB", "−0.30"], ["β_HML", "−0.40"], ["β_RMW", "+0.50"], ["β_CMA", "−0.20"], ["R²", "0.90"]].map(([k, v]) => (
                    <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "5px 8px", background: "var(--surface-2)", borderRadius: 4 }}>
                      <span style={{ color: "var(--fg-faint)" }}>{k}</span>
                      <span style={{ color: "var(--signal-loading)" }}>{v}</span>
                    </div>
                  ))}
                </div>
                <div style={{ fontSize: 11, color: "var(--fg-faint)", marginTop: 10, fontStyle: "italic" }}>
                  fuente: <span style={{ color: "var(--fg-muted)" }}>dataset_multifactor_500.csv fila 12 · M04.E02</span>
                </div>
              </div>
            )}

            {/* Watermark */}
            <div style={{
              marginTop: 64, paddingTop: 18, borderTop: "1px solid var(--border)",
              fontSize: 10, color: "var(--fg-faint)", fontFamily: "var(--font-mono)",
              textAlign: "right", letterSpacing: "0.05em",
            }}>
              EJERCICIO EDUCATIVO FINAZ · NO ES ASESORAMIENTO
            </div>
          </div>
        </div>

        {/* RIGHT — Rubric + Comparison + Citations */}
        <div className="fz-scroll" style={{
          overflow: "auto",
          borderLeft: "1px solid var(--border)",
          background: "var(--surface-1)",
          padding: 18,
          display: "flex", flexDirection: "column", gap: 16,
        }}>
          {/* Rubric */}
          <div className="fz-card fz-card-pad">
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
              <div className="fz-label">Rúbrica viva</div>
              <div className="fz-mono" style={{ fontSize: 14, color: "var(--fg)" }}>
                {totalRubric}<span style={{ fontSize: 10, color: "var(--fg-faint)" }}>/100</span>
              </div>
            </div>
            {rubric.map(r => {
              const pct = (r.score / r.max) * 100;
              const color = pct >= 80 ? "var(--signal-mastery)" : pct >= 60 ? "var(--signal-hypothesis)" : "var(--signal-underclaim)";
              return (
                <div key={r.id} style={{ marginBottom: 10 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                    <span style={{ fontSize: 11, color: "var(--fg-muted)" }}>{r.label}</span>
                    <span className="fz-mono" style={{ fontSize: 10, color: "var(--fg-faint)" }}>{r.score}/{r.max}</span>
                  </div>
                  <div style={{ height: 4, background: "var(--surface-3)", borderRadius: 2, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: `${pct}%`, background: color, transition: "width 200ms" }}></div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Methodology Comparison */}
          <MethodologyComparisonCard
            ke_capm={ke_capm} ke_ff5={ke_ff5} ke_icc={ke_icc}
            divergenceDiagnosis={divergenceDiagnosis}
            setDivergenceDiagnosis={setDivergenceDiagnosis}
          />

          {/* Citations */}
          <div className="fz-card fz-card-pad">
            <div className="fz-label" style={{ marginBottom: 8 }}>Citas obligatorias</div>
            {citations.map(c => <CitationStatus key={c.label} {...c} />)}
          </div>
        </div>
      </div>

      {/* Footer — send button */}
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "14px 24px",
        borderTop: "1px solid var(--border)",
        background: "var(--surface-1)",
      }}>
        <div style={{ display: "flex", gap: 16, fontSize: 11, color: "var(--fg-muted)", fontFamily: "var(--font-mono)" }}>
          <span style={{ color: wordRangeOk ? "var(--signal-mastery)" : "var(--fg-faint)" }}>
            {wordRangeOk ? "✓" : "○"} 1500±10%
          </span>
          <span style={{ color: allSectionsLongEnough ? "var(--signal-mastery)" : "var(--fg-faint)" }}>
            {allSectionsLongEnough ? "✓" : "○"} 5 secciones ≥250
          </span>
          <span style={{ color: divergenceOk ? "var(--signal-mastery)" : "var(--signal-hypothesis)" }}>
            {divergenceOk ? "✓" : "●"} diagnóstico divergencia
          </span>
          <span style={{ color: datasetCited ? "var(--signal-mastery)" : "var(--fg-faint)" }}>
            {datasetCited ? "✓" : "○"} cita dataset
          </span>
          <span style={{ color: tableTranscluded ? "var(--signal-mastery)" : "var(--fg-faint)" }}>
            {tableTranscluded ? "✓" : "○"} tabla transcluida
          </span>
          <span style={{ color: linterOk ? "var(--signal-mastery)" : "var(--signal-fail)" }}>
            ✓ linter 0
          </span>
        </div>
        <button
          className={canSend ? "fz-btn fz-btn-mastery" : "fz-btn"}
          disabled={!canSend}
          style={{ height: 36, padding: "0 20px" }}
        >
          {canSend ? "enviar informe" : "completa criterios para enviar"}
        </button>
      </div>
    </div>
  );
}

window.TechnicalReportEditor = TechnicalReportEditor;