/* global React */
// §5.6 PeerReviewWorkflow — P18b editor de review (modo hostil M04.E08)

const { useState, useMemo } = React;

const RUBRIC_DIMENSIONS = [
  {
    id: "precision_tecnica",
    label: "Precisión técnica",
    max: 30,
    attackVectors: [
      "¿β apalancada vs desapalancada justificada?",
      "¿La fórmula FF5 incluye los 5 factores o solo 3?",
      "¿Las primas factoriales son consistentes con el período de estimación?",
    ],
  },
  {
    id: "uso_evidencia",
    label: "Uso de evidencia y fuentes",
    max: 25,
    attackVectors: [
      "¿Está citando el dataset por celda específica?",
      "¿Hay growth assumption sin análisis de sensibilidad?",
      "¿Menciona limitación temporal de FF3 en períodos cortos?",
    ],
  },
  {
    id: "lenguaje_prudente",
    label: "Lenguaje prudente",
    max: 25,
    attackVectors: [
      "¿Hay frases tipo \"el modelo predice/garantiza\"?",
      "¿Pasa el linter de prohibited_language?",
      "¿Atribuye certeza a R² alto sin caveat de sub-período?",
    ],
  },
  {
    id: "transferencia",
    label: "Transferencia",
    max: 10,
    attackVectors: [
      "¿Aplica la conclusión a la decisión de inversión real?",
      "¿Hace explícita la incertidumbre residual?",
      "¿Conecta divergencia inter-método con riesgo de modelo?",
    ],
  },
  {
    id: "claridad",
    label: "Claridad",
    max: 10,
    attackVectors: [
      "¿Las tablas tienen unidades y fuente?",
      "¿El diagnóstico de divergencia se entiende sin contexto extra?",
      "¿La recomendación final es accionable?",
    ],
  },
];

const RUBBER_STAMP_PATTERNS = [
  /todo bien/i,
  /buen trabajo/i,
  /sin problemas/i,
  /perfecto/i,
  /muy bien/i,
];

function dimensionRubberStamp(text) {
  if (text.trim().length < 30) return true;
  for (const re of RUBBER_STAMP_PATTERNS) {
    if (re.test(text) && text.trim().length < 80) return true;
  }
  return false;
}

function ScoreBar({ value, max, color }) {
  const pct = (value / max) * 100;
  return (
    <div style={{ height: 5, background: "var(--surface-3)", borderRadius: 999, overflow: "hidden" }}>
      <div style={{ height: "100%", width: `${pct}%`, background: color, transition: "width 200ms" }}></div>
    </div>
  );
}

function PeerReviewWorkflow() {
  const [hostile] = useState(true); // M04.E08
  const [scores, setScores] = useState({
    precision_tecnica: 5,
    uso_evidencia: 4,
    lenguaje_prudente: 6,
    transferencia: 6,
    claridad: 7,
  });
  const [comments, setComments] = useState({
    precision_tecnica: "El reviewee aplica β apalancada (1.20) pero no justifica por qué ignora el smoothing Blume — la sensibilidad reportada al final de §1 muestra que Blume mueve Ke en 0,4pp, lo cual NO es marginal cuando luego declara divergencia de 2.9pp como \"informativa\". Hay inconsistencia metodológica.",
    uso_evidencia: "",
    lenguaje_prudente: "",
    transferencia: "",
    claridad: "",
  });
  const [expandedDimension, setExpandedDimension] = useState("uso_evidencia");
  const [showVectors, setShowVectors] = useState(true);

  const totalScore = Object.values(scores).reduce((a, b) => a + b, 0);
  const totalMax = RUBRIC_DIMENSIONS.reduce((a, d) => a + d.max, 0);
  const totalChars = Object.values(comments).reduce((a, b) => a + b.length, 0);

  const allDimensionsCommented = RUBRIC_DIMENSIONS.every(d => !dimensionRubberStamp(comments[d.id]));
  const totalAboveMin = totalChars >= 300;
  const canSend = allDimensionsCommented && totalAboveMin;

  return (
    <div className="fz-slot">
      <div className="fz-slot-header">
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="fz-eyebrow">P18b · peer review editor</span>
          <span style={{ color: "var(--border-strong)" }}>·</span>
          <h2>Peer Review · hostile mode</h2>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span className="fz-chip-peer fz-chip">
            <span style={{ width: 5, height: 5, borderRadius: 999, background: "var(--peer-color)" }}></span>
            M04 · E08
          </span>
          <span className="fz-chip">reviewer pseudo: <span className="fz-mono" style={{ color: "var(--peer-color)" }}>aleph_07</span></span>
          <span className="fz-chip-amber fz-chip">deadline: 36h</span>
        </div>
      </div>

      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "hidden" }}>
        {/* LEFT — reviewee report (read only) */}
        <div className="fz-scroll" style={{ overflow: "auto", borderRight: "1px solid var(--border)" }}>
          <div style={{
            position: "sticky", top: 0,
            padding: "12px 20px",
            background: "var(--surface-1)",
            borderBottom: "1px solid var(--border)",
            display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 1,
          }}>
            <div>
              <div className="fz-label">Informe del reviewee · read only</div>
              <div style={{ fontSize: 12, color: "var(--fg-muted)", marginTop: 2 }}>
                pseudo: <span className="fz-mono" style={{ color: "var(--peer-color)" }}>orion_23</span> · empresa: <span className="fz-mono">META</span> · 1487 palabras
              </div>
            </div>
            <select style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 6, color: "var(--fg)", padding: "5px 8px", fontSize: 11 }}>
              <option>§ 4 · Comparación cuantitativa</option>
            </select>
          </div>

          <div style={{ padding: "28px 36px", fontFamily: "var(--font-serif)", fontSize: 14, lineHeight: 1.7, color: "var(--fg)" }}>
            <div style={{ fontSize: 11, color: "var(--fg-faint)", fontFamily: "var(--font-mono)", marginBottom: 6 }}>§ 04</div>
            <h3 style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 18, margin: "0 0 14px", color: "var(--fg)" }}>
              Comparación cuantitativa de los 3 enfoques
            </h3>

            <p>
              Los tres métodos producen resultados distintos. <mark style={{ background: "rgba(229,184,115,0.18)", color: "var(--fg)", padding: "1px 3px", borderRadius: 2 }}>CAPM arroja 8,2%, FF5 arroja 11,1% e ICC arroja 9,3%</mark>. La diferencia entre el más alto y el más bajo es de 2,9pp.
            </p>

            <p>
              La metodología FF5 incorpora factores adicionales que el CAPM ignora, especialmente el tilt growth de la empresa elegida (β_HML = −0,40). Esto explica buena parte de la divergencia entre CAPM y FF5, ya que la prima value-growth tiene signo y CAPM la deja fuera del modelo.
            </p>

            <p>
              <mark style={{ background: "rgba(224,122,95,0.20)", color: "var(--fg)", padding: "1px 3px", borderRadius: 2 }}>Promediando los tres métodos obtenemos un Ke robusto de 9,5%</mark>, que utilizo como input central para la valoración DCF.
            </p>

            <div style={{ display: "inline-block", marginTop: 12, padding: 10, background: "var(--surface-2)", borderRadius: 4, fontFamily: "var(--font-mono)", fontSize: 11 }}>
              Tabla 4 · Ke (%)<br />
              <span style={{ color: "var(--fg-faint)" }}>CAPM</span> <span style={{ color: "var(--signal-loading)" }}>8.2</span> ·{" "}
              <span style={{ color: "var(--fg-faint)" }}>FF5</span> <span style={{ color: "var(--signal-loading)" }}>11.1</span> ·{" "}
              <span style={{ color: "var(--fg-faint)" }}>ICC</span> <span style={{ color: "var(--signal-loading)" }}>9.3</span>
            </div>

            <p style={{ marginTop: 18 }}>
              R² del FF5 es 0,90 vs 0,70 de CAPM, lo que <mark style={{ background: "rgba(224,122,95,0.20)", color: "var(--fg)", padding: "1px 3px", borderRadius: 2 }}>demuestra que FF5 es el modelo correcto</mark> para esta empresa.
            </p>
          </div>
        </div>

        {/* RIGHT — review editor */}
        <div className="fz-scroll" style={{ overflow: "auto" }}>
          {hostile && (
            <div style={{
              padding: "12px 20px",
              background: "linear-gradient(180deg, rgba(139,127,224,0.12), rgba(139,127,224,0.03))",
              borderBottom: "1px solid var(--border)",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontSize: 13, color: "var(--peer-color)", fontWeight: 500 }}>
                    Modo hostil · M04.E08
                  </div>
                  <div style={{ fontSize: 11, color: "var(--fg-muted)", marginTop: 2 }}>
                    Crítica a la metodología, no a la persona. Lista negra anti-personalismos activa.
                  </div>
                </div>
                <label style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--fg-muted)", cursor: "pointer" }}>
                  <input type="checkbox" checked={showVectors} onChange={e => setShowVectors(e.target.checked)} style={{ accentColor: "var(--peer-color)" }} />
                  vectores de ataque sugeridos
                </label>
              </div>
            </div>
          )}

          <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10 }}>
            {RUBRIC_DIMENSIONS.map(d => {
              const isExpanded = expandedDimension === d.id;
              const rubberStamp = comments[d.id].length > 0 && dimensionRubberStamp(comments[d.id]);
              const filled = comments[d.id].length >= 30 && !rubberStamp;
              const score = scores[d.id];

              return (
                <div key={d.id} style={{
                  background: "var(--surface-1)",
                  border: `1px solid ${rubberStamp ? "rgba(224,122,95,0.4)" : isExpanded ? "var(--border-strong)" : "var(--border)"}`,
                  borderRadius: 8,
                  overflow: "hidden",
                }}>
                  <button
                    onClick={() => setExpandedDimension(isExpanded ? null : d.id)}
                    style={{
                      width: "100%", padding: "10px 14px", background: "transparent", border: "none",
                      cursor: "pointer", textAlign: "left",
                      display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
                    }}
                  >
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <span style={{
                          width: 8, height: 8, borderRadius: 999,
                          background: filled ? "var(--signal-mastery)" : rubberStamp ? "var(--signal-underclaim)" : "var(--border-strong)",
                          flexShrink: 0,
                        }}></span>
                        <span style={{ fontSize: 13, color: "var(--fg)", fontWeight: 500 }}>{d.label}</span>
                        <span style={{ fontSize: 10, color: "var(--fg-faint)", fontFamily: "var(--font-mono)" }}>/{d.max}</span>
                      </div>
                      <div style={{ marginTop: 6, display: "flex", gap: 8, alignItems: "center" }}>
                        <div style={{ flex: 1 }}>
                          <ScoreBar value={score} max={d.max} color="var(--peer-color)" />
                        </div>
                        <span className="fz-mono" style={{ fontSize: 11, color: "var(--peer-color)" }}>
                          {score}/{d.max}
                        </span>
                      </div>
                    </div>
                    <span style={{ color: "var(--fg-faint)", fontSize: 14, flexShrink: 0 }}>
                      {isExpanded ? "−" : "+"}
                    </span>
                  </button>

                  {isExpanded && (
                    <div style={{ padding: "0 14px 14px" }}>
                      {/* Score slider */}
                      <div style={{ marginTop: 4, marginBottom: 12 }}>
                        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                          <span style={{ fontSize: 10, color: "var(--fg-faint)", textTransform: "uppercase", letterSpacing: "0.05em" }}>score</span>
                          <span className="fz-mono" style={{ fontSize: 11, color: "var(--peer-color)" }}>{score}/{d.max}</span>
                        </div>
                        <input
                          type="range" min={0} max={d.max} value={score}
                          onChange={e => setScores({ ...scores, [d.id]: parseInt(e.target.value, 10) })}
                          style={{ width: "100%", accentColor: "var(--peer-color)" }}
                        />
                      </div>

                      {/* Attack vectors */}
                      {hostile && showVectors && (
                        <div style={{ marginBottom: 12, padding: 10, background: "rgba(139,127,224,0.06)", borderRadius: 6, border: "1px dashed rgba(139,127,224,0.3)" }}>
                          <div style={{ fontSize: 10, color: "var(--peer-color)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6 }}>
                            vectores de ataque · click para citar
                          </div>
                          <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                            {d.attackVectors.map((v, i) => (
                              <button
                                key={i}
                                onClick={() => setComments({ ...comments, [d.id]: comments[d.id] + (comments[d.id] ? "\n\n" : "") + "▸ " + v + " " })}
                                style={{
                                  textAlign: "left",
                                  background: "transparent",
                                  border: "none",
                                  color: "var(--fg-muted)",
                                  cursor: "pointer",
                                  fontSize: 12,
                                  padding: 4,
                                  borderRadius: 4,
                                  transition: "background 120ms, color 120ms",
                                }}
                                onMouseEnter={e => { e.currentTarget.style.background = "rgba(139,127,224,0.1)"; e.currentTarget.style.color = "var(--fg)"; }}
                                onMouseLeave={e => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--fg-muted)"; }}
                              >
                                {v}
                              </button>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* Comment textarea */}
                      <textarea
                        value={comments[d.id]}
                        onChange={e => setComments({ ...comments, [d.id]: e.target.value })}
                        placeholder={`Cita pasajes específicos. Mínimo 30 caracteres. Si no encuentras problemas, escribe "no encontré problemas + qué busqué"...`}
                        style={{
                          width: "100%", minHeight: 90,
                          padding: 10,
                          background: "var(--surface-2)",
                          border: `1px solid ${rubberStamp ? "var(--signal-underclaim)" : "var(--border)"}`,
                          borderRadius: 6,
                          color: "var(--fg)",
                          fontSize: 12,
                          fontFamily: "var(--font-sans)",
                          lineHeight: 1.5,
                          resize: "vertical",
                        }}
                      />
                      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 4 }}>
                        <span style={{ fontSize: 10, color: rubberStamp ? "var(--signal-underclaim)" : "var(--fg-faint)", fontFamily: "var(--font-mono)" }}>
                          {comments[d.id].length} chars {rubberStamp && "· rubber-stamp detectado"}
                        </span>
                        <span style={{ fontSize: 10, color: "var(--fg-faint)" }}>
                          min 30 · crítica obligatoria
                        </span>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Footer */}
      <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: 18, alignItems: "center" }}>
          <div>
            <span className="fz-mono" style={{ fontSize: 18, color: "var(--peer-color)", fontWeight: 500 }}>
              {totalScore}<span style={{ fontSize: 11, color: "var(--fg-faint)" }}>/{totalMax}</span>
            </span>
            <div style={{ fontSize: 10, color: "var(--fg-faint)", textTransform: "uppercase", letterSpacing: "0.05em", marginTop: 2 }}>
              total review
            </div>
          </div>
          <div style={{ height: 30, width: 1, background: "var(--border)" }}></div>
          <div style={{ fontSize: 11, color: "var(--fg-muted)", lineHeight: 1.5 }}>
            <div style={{ fontFamily: "var(--font-mono)", color: totalAboveMin ? "var(--signal-mastery)" : "var(--signal-underclaim)" }}>
              {totalChars}/300 chars totales {totalAboveMin ? "✓" : "○"}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", color: allDimensionsCommented ? "var(--signal-mastery)" : "var(--signal-underclaim)" }}>
              5/5 dimensiones {allDimensionsCommented ? "comentadas ✓" : "incompletas ○"}
            </div>
          </div>
          <div style={{ height: 30, width: 1, background: "var(--border)" }}></div>
          <div style={{ fontSize: 10, color: "var(--fg-faint)", maxWidth: 220, lineHeight: 1.4 }}>
            <em>"Este peer review es ejercicio educativo. No constituye evaluación oficial."</em>
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="fz-btn fz-btn-ghost">guardar borrador</button>
          <button
            className={canSend ? "fz-btn fz-btn-mastery" : "fz-btn"}
            disabled={!canSend}
            style={{ height: 36, padding: "0 20px" }}
          >
            {canSend ? "enviar review" : "criterios insuficientes"}
          </button>
        </div>
      </div>
    </div>
  );
}

window.PeerReviewWorkflow = PeerReviewWorkflow;
