/* eslint-disable */
// ============================================================
// Screen 2 — Module Map / Skill Map
// ============================================================

function ModuleMap() {
  const modules = window.FZ_MODULES;
  const totalEpisodes = modules.reduce((s, m) => s + m.episodes, 0);
  const totalMinutes = modules.reduce((s, m) => s + m.minutes, 0);

  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: 24, fontSize: 12, color: "var(--ink-3)" }}>
        <FinazMark size={16} />
        <span>›</span>
        <a style={{ color: "var(--ink-2)" }}>Curso C04-A</a>
        <span>›</span>
        <span style={{ color: "var(--ink)" }}>Mapa de módulos</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 48, alignItems: "start" }}>
        <div>
          {/* title block */}
          <div style={{ marginBottom: 32 }}>
            <span className="t-label">Ruta de dominio</span>
            <h1 className="t-display" style={{ fontSize: 44, margin: "8px 0 12px" }}>
              De la fórmula al criterio.
            </h1>
            <p style={{ fontFamily: "var(--serif)", fontSize: 17, fontStyle: "italic", color: "var(--ink-2)", maxWidth: 620, margin: 0, lineHeight: 1.45 }}>
              Cinco módulos. Cada uno termina con un entregable que defiendes ante un comité simulado.
            </p>
          </div>

          {/* timeline */}
          <div style={{ position: "relative", paddingLeft: 0 }}>
            {/* vertical rule */}
            <div style={{
              position: "absolute", left: 22, top: 32, bottom: 32,
              width: 1, background: "var(--rule)"
            }} />

            {modules.map((m, i) => {
              const locked = m.status === "locked";
              const inProgress = m.status === "in-progress";
              return (
                <div key={m.id} style={{
                  display: "grid", gridTemplateColumns: "44px 1fr", gap: 20,
                  marginBottom: 18, alignItems: "stretch"
                }}>
                  {/* node */}
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 18 }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: "50%",
                      background: inProgress ? "var(--accent)" : locked ? "var(--paper-2)" : "var(--card-elev)",
                      border: `1.5px solid ${inProgress ? "var(--accent)" : "var(--rule)"}`,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "var(--mono)", fontSize: 12, fontWeight: 600,
                      color: inProgress ? "var(--paper)" : locked ? "var(--ink-4)" : "var(--ink)"
                    }}>{m.code}</div>
                  </div>

                  <div className="card" style={{
                    padding: 24, position: "relative",
                    background: inProgress ? "var(--card-elev)" : "var(--card)",
                    opacity: locked ? 0.78 : 1
                  }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
                      <div>
                        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
                          <span className="t-label">Módulo {m.code.replace("M", "")}</span>
                          {inProgress && <span className="chip accent">en curso</span>}
                          {locked && <span className="chip" style={{ background: "transparent" }}>🔒 bloqueado</span>}
                          {m.gate && !locked && <span className="chip gold">gate</span>}
                          {m.id === "M04" && !locked && <span className="chip gold">+ capstone</span>}
                        </div>
                        <div className="t-display" style={{ fontSize: 26, lineHeight: 1.15, fontWeight: 500 }}>
                          {m.title}
                        </div>
                        <div style={{
                          fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 14,
                          color: "var(--ink-3)", marginTop: 6
                        }}>“{m.kicker}”</div>
                      </div>
                      <div style={{ textAlign: "right" }}>
                        <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>
                          {m.episodes} episodios · {m.minutes} min
                        </div>
                      </div>
                    </div>

                    <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 20, marginTop: 14 }}>
                      <div>
                        <div className="t-label" style={{ marginBottom: 6 }}>Sabrás hacer</div>
                        <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>{m.skill}</div>
                      </div>
                      <div>
                        <div className="t-label" style={{ marginBottom: 6 }}>Entregable</div>
                        <div style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>{m.deliverable}</div>
                      </div>
                    </div>

                    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 16, alignItems: "center" }}>
                      {m.badges.map((b) => (
                        <span key={b} className="chip" style={{ fontSize: 10 }}>{b}</span>
                      ))}
                      <div style={{ flex: 1 }} />
                      {!locked && (
                        <button className={inProgress ? "btn primary small" : "btn small"} style={{ marginLeft: 8 }}>
                          {inProgress ? "Continuar" : "Ver episodios"} →
                        </button>
                      )}
                    </div>

                    {inProgress && (
                      <div style={{ marginTop: 16 }}>
                        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                          <span className="t-label">Progreso</span>
                          <span className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>
                            {Math.round(m.progress * 100)}%
                          </span>
                        </div>
                        <Bar value={m.progress} />
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* sidebar */}
        <aside style={{ position: "sticky", top: 32, display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="card" style={{ padding: 22 }}>
            <div className="t-label" style={{ marginBottom: 14 }}>Mastery global</div>
            <div className="t-mono" style={{
              fontSize: 40, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.03em", lineHeight: 1
            }}>
              12<span style={{ fontSize: 22, color: "var(--ink-3)" }}>/{totalEpisodes}</span>
            </div>
            <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 14 }}>episodios completados</div>
            <Bar value={12 / totalEpisodes} />
            <div style={{
              marginTop: 16, padding: "10px 12px", background: "var(--paper-2)", borderRadius: 8,
              fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--mono)"
            }}>
              Dominio requerido: 75%<br />Tiempo total estimado: {totalMinutes} min
            </div>
          </div>

          <div className="card" style={{ padding: 22 }}>
            <div className="t-label" style={{ marginBottom: 12 }}>Próximos pasos</div>
            <ol style={{ margin: 0, paddingLeft: 18, color: "var(--ink-2)", fontSize: 13, lineHeight: 1.6 }}>
              <li>Terminar M00.E00 (CASE-X)</li>
              <li>Empezar M01 con Q-Map de ajustes</li>
              <li>Defender Gate M01</li>
            </ol>
          </div>

          <div className="card" style={{ padding: 22 }}>
            <div className="t-label" style={{ marginBottom: 12 }}>Leyenda</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "var(--ink-2)" }}>
              <div><span className="chip">CASE</span> caso bifurcado</div>
              <div><span className="chip">CALC</span> laboratorio de cálculo</div>
              <div><span className="chip">MAP</span> panel de comparables</div>
              <div><span className="chip gold">GATE</span> evaluación de dominio</div>
            </div>
          </div>

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

window.ModuleMap = ModuleMap;