/* eslint-disable */
// ============================================================
// Screen 9 — Gate Assessment (Comité simulado)
// M01.E06 — defender premium en panel sectorial
// ============================================================

function GateAssessment() {
  const deliverables = [
    { id: "d1", label: "Calcular P/E* Gordon para 5 empresas", done: true },
    { id: "d2", label: "Identificar mediana sectorial y outliers justificados", done: true },
    { id: "d3", label: "Asignar veredicto premium/descuento/insuficiente", done: false },
    { id: "d4", label: "Redactar memo de comité (250 palabras)", done: false },
    { id: "d5", label: "Declarar al menos 2 evidencias pendientes", done: false }
  ];

  const dimensions = [
    { dim: "Precisión técnica", target: "≥ 80%", weight: "25%" },
    { dim: "Evidencia y fuentes", target: "≥ 75%", weight: "20%" },
    { dim: "Interpretación prudente", target: "≥ 75%", weight: "25%" },
    { dim: "Transferencia profesional", target: "≥ 70%", weight: "15%" },
    { dim: "Claridad del memo", target: "≥ 70%", weight: "15%" }
  ];

  return (
    <div style={{
      width: "100%", minHeight: 1100, background: "var(--paper)",
      padding: "32px 56px 56px", fontFamily: "var(--sans)"
    }}>
      {/* breadcrumb */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 22, fontSize: 12, color: "var(--ink-3)" }}>
        <FinazMark size={16} />
        <span>›</span>
        <a style={{ color: "var(--ink-3)" }}>C04-A</a>
        <span>›</span>
        <a style={{ color: "var(--ink-3)" }}>M01</a>
        <span>›</span>
        <span style={{ color: "var(--ink)" }}>Gate M01 · Comité simulado</span>
      </div>

      {/* Top header — frame as a committee */}
      <div style={{
        background: "var(--ink)", color: "var(--paper)",
        padding: "36px 36px", borderRadius: 14, marginBottom: 24,
        display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center",
        position: "relative", overflow: "hidden"
      }}>
        {/* subtle stripes */}
        <div style={{
          position: "absolute", inset: 0, opacity: 0.05,
          backgroundImage: "repeating-linear-gradient(-45deg, var(--paper) 0, var(--paper) 1px, transparent 1px, transparent 12px)"
        }} />
        <div style={{ position: "relative" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
            <span className="chip gold" style={{ background: "var(--gold-tint)", color: "var(--gold)" }}>GATE M01</span>
            <span className="t-label" style={{ color: "rgba(243,239,229,0.5)" }}>evaluación de dominio</span>
          </div>
          <h1 className="t-display" style={{
            fontSize: 40, lineHeight: 1.1, margin: "0 0 12px", color: "var(--paper)", fontWeight: 500
          }}>
            Defiende un panel sectorial ante el comité.
          </h1>
          <p style={{
            fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 17, lineHeight: 1.5,
            color: "rgba(243,239,229,0.8)", maxWidth: 620, margin: 0
          }}>
            Cinco empresas de bienes de consumo. Mediana sectorial 14.8x. ¿Cuál merece premium,
            cuál descuento, y qué evidencia te falta? Esto no es examen — es un comité simulado.
          </p>
        </div>
        <div style={{
          background: "rgba(243,239,229,0.06)", border: "1px solid rgba(243,239,229,0.12)",
          borderRadius: 12, padding: 20, minWidth: 220, position: "relative"
        }}>
          <div className="t-label" style={{ color: "rgba(243,239,229,0.5)", marginBottom: 10 }}>Reglas</div>
          <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8, fontSize: 12 }}>
            <li>Mastery requerido: <strong>75%</strong></li>
            <li>Tiempo sugerido: <strong>45 min</strong></li>
            <li>Reintentos antes de Tutor Clinic: <strong>2</strong></li>
            <li>Validar consistencia antes de enviar</li>
          </ul>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 28, alignItems: "start" }}>
        <div>
          {/* Deliverables checklist */}
          <div className="card" style={{ padding: 24, marginBottom: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
              <h2 className="t-display" style={{ fontSize: 22, margin: 0, fontWeight: 500 }}>Entregables del comité</h2>
              <span className="t-mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>
                {deliverables.filter((d) => d.done).length}/{deliverables.length} completados
              </span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {deliverables.map((d) => (
                <div key={d.id} style={{
                  display: "flex", alignItems: "center", gap: 12,
                  padding: "12px 14px", borderRadius: 8,
                  background: d.done ? "var(--green-tint)" : "var(--paper-2)",
                  border: `1px solid ${d.done ? "transparent" : "var(--rule-soft)"}`
                }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: "50%",
                    background: d.done ? "var(--green)" : "transparent",
                    border: `1.5px solid ${d.done ? "var(--green)" : "var(--ink-4)"}`,
                    color: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 11, flexShrink: 0
                  }}>{d.done && "✓"}</div>
                  <span style={{ fontSize: 14, color: d.done ? "var(--ink)" : "var(--ink-2)",
                    textDecoration: d.done ? "line-through" : "none",
                    textDecorationColor: "var(--ink-4)" }}>{d.label}</span>
                  <div style={{ flex: 1 }} />
                  {!d.done && <button className="btn small">Abrir</button>}
                </div>
              ))}
            </div>
          </div>

          {/* Panel preview */}
          <div className="card" style={{ padding: 24, marginBottom: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
              <h2 className="t-display" style={{ fontSize: 22, margin: 0, fontWeight: 500 }}>Panel · Consumer Premium</h2>
              <span className="chip">datos sintéticos · 5 empresas</span>
            </div>

            <div style={{
              display: "grid",
              gridTemplateColumns: "1.5fr repeat(6, 1fr)",
              gap: 12, fontSize: 12, alignItems: "center",
              paddingBottom: 10, marginBottom: 10, borderBottom: "1px solid var(--rule)"
            }}>
              <div className="t-label">Empresa</div>
              <div className="t-label" style={{ textAlign: "right" }}>P/E</div>
              <div className="t-label" style={{ textAlign: "right" }}>P/E*</div>
              <div className="t-label" style={{ textAlign: "right" }}>g</div>
              <div className="t-label" style={{ textAlign: "right" }}>ROE</div>
              <div className="t-label" style={{ textAlign: "right" }}>Ke</div>
              <div className="t-label">Veredicto</div>

              {[
                ["🇮🇹 Arteca Brands", 18.2, 22.4, 12, 24, 8.4, "premium"],
                ["🇪🇸 Norvel Retail", 14.0, 13.6, 6, 14, 9.0, "neutral"],
                ["🇫🇷 Boucher Group", 13.6, 8.1, 3, 9, 10.5, "descuento"],
                ["🇩🇪 Kessler Mode", 15.2, 16.0, 8, 18, 8.8, "neutral"],
                ["🇮🇹 Voltarelli", 19.8, 14.2, 7, 16, 9.5, "—"]
              ].map((row, i) => {
                const verdict = row[6];
                return (
                  <React.Fragment key={i}>
                    <div style={{ fontSize: 14, color: "var(--ink)", paddingTop: 10, borderTop: i > 0 ? "1px solid var(--rule-soft)" : "none" }}>{row[0]}</div>
                    {row.slice(1, 6).map((v, k) => (
                      <div key={k} className="t-mono" style={{
                        textAlign: "right", fontSize: 14, color: "var(--ink-2)",
                        paddingTop: 10, borderTop: i > 0 ? "1px solid var(--rule-soft)" : "none"
                      }}>{typeof v === "number" ? v.toFixed(1) + (k === 0 || k === 1 ? "x" : "%") : v}</div>
                    ))}
                    <div style={{ paddingTop: 10, borderTop: i > 0 ? "1px solid var(--rule-soft)" : "none" }}>
                      {verdict === "premium" && <span className="chip green">premium</span>}
                      {verdict === "neutral" && <span className="chip">neutral</span>}
                      {verdict === "descuento" && <span className="chip red">descuento</span>}
                      {verdict === "—" && <button className="btn small ghost" style={{ padding: "2px 8px", fontSize: 10 }}>asignar</button>}
                    </div>
                  </React.Fragment>
                );
              })}
            </div>

            <div style={{
              marginTop: 16, padding: "10px 14px", background: "var(--paper-2)", borderRadius: 8,
              fontSize: 12, color: "var(--ink-2)"
            }}>
              <strong>Mediana sectorial:</strong> 15.2x · <strong>Dispersión IQR:</strong> 4.6x · <strong>Outliers:</strong> 0 declarados
            </div>
          </div>

          {/* Memo summary */}
          <div className="card" style={{ padding: 24, background: "var(--card-elev)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
              <h2 className="t-display" style={{ fontSize: 22, margin: 0, fontWeight: 500 }}>Memo de comité</h2>
              <span className="t-mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>0/250 palabras</span>
            </div>
            <div style={{
              background: "var(--paper)", border: "1px dashed var(--rule)",
              borderRadius: 10, padding: 32, textAlign: "center", color: "var(--ink-3)"
            }}>
              <div style={{ fontFamily: "var(--serif)", fontSize: 16, fontStyle: "italic", marginBottom: 12 }}>
                Aún sin redactar.
              </div>
              <button className="btn primary">Abrir editor de memo →</button>
            </div>
          </div>
        </div>

        {/* Sidebar — rubric & validation */}
        <aside style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 24 }}>
          <div className="card" style={{ padding: 22 }}>
            <div className="t-label" style={{ marginBottom: 14 }}>Rúbrica visible · antes de enviar</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {dimensions.map((r) => (
                <div key={r.dim} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 8, borderBottom: "1px solid var(--rule-soft)" }}>
                  <div>
                    <div style={{ fontSize: 13, color: "var(--ink)", fontWeight: 500 }}>{r.dim}</div>
                    <div style={{ fontSize: 11, color: "var(--ink-3)" }}>peso {r.weight}</div>
                  </div>
                  <div className="t-mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{r.target}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card" style={{ padding: 22 }}>
            <div className="t-label" style={{ marginBottom: 12 }}>Validar consistencia</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
              <ValidationRow ok={true} label="Cálculos en tolerancia" />
              <ValidationRow ok={true} label="Fuentes citadas" />
              <ValidationRow ok={false} label="Veredicto en todas las filas" warn />
              <ValidationRow ok={false} label="Lenguaje prudente · pendiente memo" warn />
              <ValidationRow ok={false} label="Al menos 2 evidencias pendientes" warn />
            </div>
            <button className="btn small" style={{ width: "100%", justifyContent: "center", marginTop: 14 }}>
              Re-validar
            </button>
          </div>

          <button className="btn primary" style={{
            justifyContent: "center", padding: "16px", fontSize: 14, opacity: 0.5, cursor: "not-allowed"
          }}>
            Enviar al comité
            <span style={{ marginLeft: 4 }}>→</span>
          </button>

          <div style={{ fontSize: 11, color: "var(--ink-3)", textAlign: "center", lineHeight: 1.5 }}>
            Falta completar 3 entregables.<br />
            Si fallas 2 intentos, abrirás <a style={{ color: "var(--accent)" }}>Tutor Clinic</a>.
          </div>

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

function ValidationRow({ ok, label, warn }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{
        width: 14, height: 14, borderRadius: 3, flexShrink: 0,
        background: ok ? "var(--green)" : warn ? "var(--amber-tint)" : "var(--paper-2)",
        color: ok ? "var(--paper)" : "var(--amber)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 10, fontWeight: 600,
        border: ok ? "none" : "1px solid var(--rule)"
      }}>{ok ? "✓" : warn ? "!" : ""}</span>
      <span style={{ color: ok ? "var(--ink-2)" : "var(--ink)" }}>{label}</span>
    </div>
  );
}

window.GateAssessment = GateAssessment;