/* eslint-disable */
// ============================================================
// Screen 8 — Feedback & Remediation
// ============================================================

const FZ_RUBRIC = [
  { dim: "Precisión técnica", score: 78, ok: true, note: "Gordon correcto. Pequeño error de tolerancia en Ke (±2%)." },
  { dim: "Evidencia / fuentes", score: 82, ok: true, note: "Citaste P/E y g. Falta fuente para ROE 5y." },
  { dim: "Interpretación prudente", score: 64, ok: false, note: "Una afirmación de premium sin matiz; refórmula como hipótesis." },
  { dim: "Transferencia profesional", score: 70, ok: true, note: "Memo plausible ante comité. Te falta anti-tesis." },
  { dim: "Claridad del memo", score: 86, ok: true, note: "Estructura limpia. Conciso." }
];

const FZ_ERRORS = [
  {
    type: "overclaim",
    title: "Afirmación sin matiz",
    where: "Memo · línea 2",
    excerpt: "“Tessari es claramente superior a Lormac.”",
    why: "‘Claramente superior’ presupone evidencia cerrada. Tu cálculo es una señal, no una prueba.",
    fix: "“Los drivers de Tessari sugieren un premium razonable; queda pendiente verificar sostenibilidad del ROE.”",
    severity: "warn"
  },
  {
    type: "glossary",
    title: "Término no consultado",
    where: "Paso S2",
    excerpt: "Avanzaste sin abrir el término <strong>Ke</strong>.",
    why: "Ke es el denominador de Gordon. Usarlo sin definirlo expone el memo a una crítica del comité.",
    fix: "Revisa la entrada de glosario y añádelo a flashcards.",
    severity: "hint"
  },
  {
    type: "calc",
    title: "Tolerancia ligeramente fuera",
    where: "Cálculo P/E* · Lormac",
    excerpt: "Resultado 8.0x · esperado 7.6x (±5%)",
    why: "Probablemente usaste g del último año en lugar de g sostenible (ROE · (1 − payout)).",
    fix: "Recalcula con g_sostenible = 9.5% · 0.4 = 3.8%.",
    severity: "warn"
  }
];

function FeedbackScreen() {
  const total = Math.round(FZ_RUBRIC.reduce((s, r) => s + r.score, 0) / FZ_RUBRIC.length);
  const mastery = total >= 75;

  return (
    <div style={{
      width: "100%", minHeight: 1000, background: "var(--paper)",
      padding: "32px 56px 56px", fontFamily: "var(--sans)"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 24, fontSize: 12, color: "var(--ink-3)" }}>
        <FinazMark size={16} />
        <span>›</span>
        <a style={{ color: "var(--ink-3)" }}>M00.E00</a>
        <span>›</span>
        <span style={{ color: "var(--ink)" }}>Feedback y remediación</span>
      </div>

      {/* Header strip */}
      <div className="card" style={{
        padding: 28, background: "var(--card-elev)", marginBottom: 24,
        display: "grid", gridTemplateColumns: "auto 1px 1fr auto", gap: 32, alignItems: "center"
      }}>
        <div>
          <div className="t-label" style={{ marginBottom: 6 }}>Score global</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
            <div className="t-mono" style={{ fontSize: 56, fontWeight: 500, color: "var(--ink)", lineHeight: 1, letterSpacing: "-0.04em" }}>
              {total}
            </div>
            <div style={{ fontSize: 18, color: "var(--ink-3)" }}>/100</div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
            {mastery
              ? <span className="chip green">✓ mastery superado</span>
              : <span className="chip amber">por debajo de mastery (75)</span>}
            <span style={{ fontSize: 11, color: "var(--ink-3)" }}>1er intento</span>
          </div>
        </div>

        <div style={{ background: "var(--rule)", width: 1, alignSelf: "stretch" }} />

        <div>
          <div className="t-label" style={{ marginBottom: 10 }}>Lectura</div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.3, color: "var(--ink)", fontWeight: 500 }}>
            Buen criterio en formación. Tu cálculo está casi limpio; tu lenguaje todavía cierra conclusiones.
          </div>
          <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 10, lineHeight: 1.5 }}>
            Tres acciones concretas para subir mastery a 85%+ en el próximo intento.
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <button className="btn primary" style={{ justifyContent: "center" }}>Reintentar solo memo →</button>
          <button className="btn" style={{ justifyContent: "center" }}>Tutor Clinic</button>
          <button className="btn ghost small" style={{ justifyContent: "center" }}>Volver a S2 Concepto</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 28, alignItems: "start" }}>
        <div>
          {/* Rubric */}
          <h3 className="t-display" style={{ fontSize: 22, marginBottom: 14, fontWeight: 500 }}>
            Desglose por dimensión
          </h3>
          <div className="card" style={{ padding: 24, marginBottom: 28 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {FZ_RUBRIC.map((r) => (
                <div key={r.dim} style={{
                  display: "grid", gridTemplateColumns: "180px 1fr 60px", gap: 16, alignItems: "center"
                }}>
                  <div style={{ fontSize: 13, color: "var(--ink)", fontWeight: 500 }}>{r.dim}</div>
                  <div>
                    <Bar value={r.score / 100} color={r.score >= 75 ? "var(--green)" : "var(--amber)"} height={6} />
                    <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 6, lineHeight: 1.4 }}>{r.note}</div>
                  </div>
                  <div className="t-mono" style={{ fontSize: 18, fontWeight: 500, textAlign: "right",
                    color: r.score >= 75 ? "var(--green)" : "var(--amber)" }}>
                    {r.score}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Errors */}
          <h3 className="t-display" style={{ fontSize: 22, marginBottom: 14, fontWeight: 500 }}>
            Qué cambiar y cómo
          </h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {FZ_ERRORS.map((e, i) => <ErrorCard key={i} e={e} />)}
          </div>
        </div>

        {/* Sidebar */}
        <aside style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 24 }}>
          <div className="card" style={{ padding: 20 }}>
            <div className="t-label" style={{ marginBottom: 12 }}>Próxima acción recomendada</div>
            <div style={{
              padding: "12px 14px", background: "var(--accent-tint)", borderRadius: 8,
              fontSize: 13, color: "var(--accent)", lineHeight: 1.5, marginBottom: 10
            }}>
              <strong>Reformula la conclusión como hipótesis.</strong>
              <div style={{ fontSize: 11, color: "var(--accent-2)", marginTop: 4 }}>≈ 4 min</div>
            </div>
            <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 12 }}>
              Una sola reedición sube “interpretación prudente” a 80+ y completa mastery.
            </div>
            <button className="btn primary small" style={{ width: "100%", justifyContent: "center" }}>
              Abrir editor de memo →
            </button>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div className="t-label" style={{ marginBottom: 12 }}>Flashcards generadas</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {["Ke · coste del equity", "Hipótesis vs prueba", "g sostenible"].map((t) => (
                <div key={t} style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  padding: "8px 10px", background: "var(--paper-2)", borderRadius: 6,
                  fontSize: 12, color: "var(--ink-2)"
                }}>
                  <span>{t}</span>
                  <span className="chip" style={{ fontSize: 9 }}>día 1</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card" style={{ padding: 20, background: "var(--paper-2)", borderColor: "transparent" }}>
            <div className="t-label" style={{ marginBottom: 8 }}>Filosofía del feedback</div>
            <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
              No “fallaste”. Calibramos. Cada error es una pista sobre el próximo intento.
            </div>
          </div>

          <Disclaimer compact />
        </aside>
      </div>
    </div>
  );
}

function ErrorCard({ e }) {
  const tone = e.severity === "warn" ? "amber" : e.severity === "hint" ? "accent" : "red";
  const iconMap = { overclaim: "⚠", glossary: "i", calc: "≠" };
  return (
    <div className="card" style={{ padding: 20, background: "var(--card-elev)" }}>
      <div style={{ display: "flex", gap: 14, marginBottom: 10 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8, flexShrink: 0,
          background: `var(--${tone}-tint)`, color: `var(--${tone})`,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--serif)", fontWeight: 600, fontSize: 16
        }}>{iconMap[e.type]}</div>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
            <span className={`chip ${tone}`}>{e.type}</span>
            <span className="t-mono" style={{ fontSize: 10, color: "var(--ink-3)" }}>{e.where}</span>
          </div>
          <div style={{ fontSize: 15, fontWeight: 500, color: "var(--ink)" }}>{e.title}</div>
        </div>
      </div>

      <div style={{
        background: "var(--paper-2)", padding: "10px 14px", borderRadius: 6,
        fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 13, color: "var(--ink-2)",
        marginBottom: 10
      }} dangerouslySetInnerHTML={{ __html: e.excerpt }} />

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div>
          <div className="t-label" style={{ marginBottom: 4 }}>Por qué importa</div>
          <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>{e.why}</div>
        </div>
        <div>
          <div className="t-label" style={{ marginBottom: 4, color: "var(--green)" }}>Próximo paso</div>
          <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>{e.fix}</div>
        </div>
      </div>
    </div>
  );
}

window.FeedbackScreen = FeedbackScreen;