/* global React, ReactDOM, DesignCanvas, DCSection, DCArtboard, DCPostIt */
/* global MultifactorRegressionPanel, WACCPhaseTimeline, TechnicalReportEditor, PeerReviewWorkflow */
/* global TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle */

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfy",
  "showShellChrome": true,
  "divergenceBannerTone": "firm",
  "r2LayoutVertical": false
}/*EDITMODE-END*/;

// Mini wrapper to apply shell-chrome around an artboard so the lab visualizes
// inside the C04-A inherited episode shell (P03). Keeps the labs in context.
function EpisodeShell({ moduleLabel, episodeLabel, stepActive, density, children, showChrome }) {
  if (!showChrome) {
    return <div data-density={density} style={{ width: "100%", height: "100%", background: "var(--bg)" }}>{children}</div>;
  }
  const steps = [
    { id: "S1", label: "Activate" },
    { id: "S2", label: "Tutor" },
    { id: "S3", label: "Lab",       active: true },
    { id: "S4", label: "Memo" },
  ];
  return (
    <div data-density={density} style={{
      width: "100%", height: "100%",
      background: "var(--bg)",
      display: "grid",
      gridTemplateColumns: "240px 1fr",
      gridTemplateRows: "56px 1fr",
      color: "var(--fg)",
      fontFamily: "var(--font-sans)",
    }}>
      {/* Top bar */}
      <div style={{
        gridColumn: "1 / -1", gridRow: "1",
        display: "flex", alignItems: "center", padding: "0 20px",
        borderBottom: "1px solid var(--border)",
        background: "var(--surface-1)",
        gap: 16,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{
            width: 22, height: 22, borderRadius: 5,
            background: "linear-gradient(135deg, var(--signal-driver), var(--peer-color))",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 11, fontWeight: 700, color: "#0a1220",
          }}>F</div>
          <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: "-0.01em" }}>Finaz</span>
          <span style={{ color: "var(--fg-faint)", fontSize: 12 }}>/</span>
          <span style={{ fontSize: 12, color: "var(--fg-muted)" }}>C09-B Riesgo y WACC</span>
          <span className="fz-chip" style={{ background: "rgba(139,127,224,0.14)", color: "var(--peer-color)", borderColor: "rgba(139,127,224,0.4)", marginLeft: 6 }}>
            avanzado
          </span>
        </div>
        <div style={{ flex: 1 }}></div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ fontSize: 11, color: "var(--fg-faint)", fontFamily: "var(--font-mono)" }}>
            {moduleLabel} · {episodeLabel}
          </span>
          <div style={{ width: 28, height: 28, borderRadius: 999, background: "var(--surface-3)", border: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontFamily: "var(--font-mono)", color: "var(--fg-muted)" }}>
            ae
          </div>
        </div>
      </div>

      {/* Left rail (S1→S4) */}
      <div style={{
        gridColumn: "1", gridRow: "2",
        borderRight: "1px solid var(--border)",
        background: "var(--surface-1)",
        padding: "20px 0",
        overflow: "hidden",
      }}>
        <div style={{ padding: "0 20px 16px", fontSize: 11, color: "var(--fg-faint)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
          flujo del episodio
        </div>
        {steps.map((s, i) => {
          const isActive = s.id === stepActive;
          const isPast = steps.findIndex(x => x.id === stepActive) > i;
          return (
            <div key={s.id} style={{
              padding: "12px 20px",
              display: "flex", alignItems: "center", gap: 10,
              background: isActive ? "var(--surface-2)" : "transparent",
              borderLeft: `2px solid ${isActive ? "var(--signal-driver)" : "transparent"}`,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 999,
                border: `1.5px solid ${isActive ? "var(--signal-driver)" : isPast ? "var(--signal-mastery)" : "var(--border-strong)"}`,
                background: isPast ? "var(--signal-mastery)" : "transparent",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 10, fontFamily: "var(--font-mono)",
                color: isPast ? "var(--bg)" : isActive ? "var(--signal-driver)" : "var(--fg-faint)",
                flexShrink: 0,
              }}>
                {isPast ? "✓" : s.id}
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, color: isActive ? "var(--fg)" : isPast ? "var(--fg-muted)" : "var(--fg-faint)", fontWeight: isActive ? 500 : 400 }}>
                  {s.label}
                </div>
              </div>
            </div>
          );
        })}

        <div style={{ marginTop: 24, padding: "0 20px" }}>
          <div style={{ fontSize: 11, color: "var(--fg-faint)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>audio · 38:42</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <button style={{
              width: 28, height: 28, borderRadius: 999, border: "1px solid var(--border-strong)",
              background: "var(--surface-2)", color: "var(--fg)", cursor: "pointer",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
            }}>▸</button>
            <div style={{ flex: 1, height: 3, background: "var(--surface-3)", borderRadius: 999, overflow: "hidden" }}>
              <div style={{ width: "62%", height: "100%", background: "var(--signal-driver)" }}></div>
            </div>
            <span style={{ fontSize: 10, fontFamily: "var(--font-mono)", color: "var(--fg-faint)" }}>1.25×</span>
          </div>
          <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
            {[1, 2, 3, 4, 5].map(i => (
              <div key={i} style={{
                flex: 1, height: 2,
                background: i <= 3 ? "var(--signal-driver)" : "var(--surface-3)",
                borderRadius: 999,
              }}></div>
            ))}
          </div>
          <div style={{ fontSize: 10, color: "var(--fg-faint)", marginTop: 4, fontFamily: "var(--font-mono)" }}>
            cap 3/5 · "regla del Tutor"
          </div>
        </div>
      </div>

      {/* Slot content */}
      <div style={{ gridColumn: "2", gridRow: "2", overflow: "hidden", display: "flex", flexDirection: "column" }}>
        {children}
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply density to root
  useEffect(() => {
    document.documentElement.setAttribute("data-density", t.density);
  }, [t.density]);

  const ARTBOARD_W = 1440;
  const ARTBOARD_H = 880;

  return (
    <>
      <DesignCanvas>
        <DCSection
          id="labs"
          title="Laboratorios pedagógicos (S3)"
          subtitle="Componentes nuevos C09-B · slot S3 dentro del shell heredado del episodio"
        >
          <DCArtboard
            id="multifactor"
            label="§5.1 · Multifactor Regression Panel  ·  lab más frecuente (10/19 episodios)"
            width={ARTBOARD_W}
            height={ARTBOARD_H}
          >
            <EpisodeShell
              moduleLabel="M04 · Capstone final"
              episodeLabel="E02 · FF5 cargas factoriales"
              stepActive="S3"
              density={t.density}
              showChrome={t.showShellChrome}
            >
              <MultifactorRegressionPanel />
            </EpisodeShell>
          </DCArtboard>

          <DCArtboard
            id="wacc"
            label="§5.3 · WACC Phase Timeline  ·  WACC dinámico vs constante · 5 arquetipos"
            width={ARTBOARD_W}
            height={ARTBOARD_H}
          >
            <EpisodeShell
              moduleLabel="M02 · WACC dinámico"
              episodeLabel="E03 · 3 fases · sensibilidad β terminal"
              stepActive="S3"
              density={t.density}
              showChrome={t.showShellChrome}
            >
              <WACCPhaseTimeline />
            </EpisodeShell>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="capstone"
          title="Capstone (M03 · M04)"
          subtitle="Entregable de informe técnico 1500 palabras · MethodologyComparison embebida"
        >
          <DCArtboard
            id="report"
            label="§5.4 · Technical Report Editor + §5.5 Methodology Comparison Card"
            width={ARTBOARD_W}
            height={950}
          >
            <EpisodeShell
              moduleLabel="M03 · Capstone preliminar"
              episodeLabel="E01 · MAP+PROJ · informe Ke"
              stepActive="S3"
              density={t.density}
              showChrome={t.showShellChrome}
            >
              <TechnicalReportEditor />
            </EpisodeShell>
          </DCArtboard>

          <DCArtboard
            id="peer"
            label="§5.6 · Peer Review Workflow  ·  modo hostil M04.E08 · vectores de ataque sugeridos"
            width={ARTBOARD_W}
            height={ARTBOARD_H}
          >
            <EpisodeShell
              moduleLabel="M04 · Capstone final"
              episodeLabel="E08 · GATE+PEER · review hostil"
              stepActive="S3"
              density={t.density}
              showChrome={t.showShellChrome}
            >
              <PeerReviewWorkflow />
            </EpisodeShell>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks · C09-B">
        <TweakSection label="Layout">
          <TweakRadio
            label="Densidad"
            value={t.density}
            options={["compact", "comfy"]}
            onChange={v => setTweak("density", v)}
          />
          <TweakToggle
            label="Shell del episodio"
            value={t.showShellChrome}
            onChange={v => setTweak("showShellChrome", v)}
          />
        </TweakSection>

        <TweakSection label="R10 — Divergencia">
          <TweakRadio
            label="Tono banner"
            value={t.divergenceBannerTone}
            options={["firm", "subtle"]}
            onChange={v => setTweak("divergenceBannerTone", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);