// MissionControl scene: scenario tabs + graph + rails + telemetry strip.
import { useApp, scenarioById } from "../state/store";
import ProcessGraph from "../components/ProcessGraph";
import LeftRail from "../components/LeftRail";
import Inspector from "../components/Inspector";
import Telemetry from "../components/Telemetry";

export default function MissionControl() {
  const scenarioId = useApp((s) => s.scenarioId);
  const setScenarioId = useApp((s) => s.setScenarioId);
  const scenarios = useApp((s) => s.scenarios);
  const liveLoading = useApp((s) => s.liveLoading);
  const liveError = useApp((s) => s.liveError);
  const sc = scenarioById(scenarioId);

  return (
    <div className="mc">
      {liveLoading && (
        <div className="mc-banner mc-banner-info">
          <span className="spin" /> Fetching live scenarios from demo.flow-master.ai…
        </div>
      )}
      {liveError && (
        <div className="mc-banner mc-banner-err">
          Live mode failed: <span className="mono">{liveError}</span> · showing snapshot
        </div>
      )}
      <div className="mc-strip" role="tablist" aria-label="Scenarios">
        {scenarios.map((s) => (
          <button
            key={s.id}
            role="tab"
            aria-selected={s.id === scenarioId}
            className={`mc-tab${s.id === scenarioId ? " mc-tab-sel" : ""}`}
            style={{ ["--accent" as string]: s.family.accent }}
            onClick={() => setScenarioId(s.id)}
          >
            <span className="mc-tab-dot" />
            <span className="mc-tab-label">{s.family.label}</span>
            <span className={`mc-tab-mark ${s.live ? "is-live" : "is-syn"}`}>{s.live ? "live" : "bp"}</span>
          </button>
        ))}
      </div>

      <div className="mc-hero">
        <div>
          <div className="mc-hero-eyebrow">{sc?.family.subtitle}</div>
          <h2 className="mc-hero-title">{sc?.defName}</h2>
          <div className="mc-hero-sub">{sc?.tagline}</div>
        </div>
        <div className="mc-hero-kpis">
          {sc?.kpis.slice(0, 4).map((k) => (
            <div className="mc-kpi" key={k.label}>
              <div className="mc-kpi-v">{k.value}</div>
              <div className="mc-kpi-l">{k.label}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="mc-body">
        <LeftRail />
        <main className="mc-main">
          <ProcessGraph />
        </main>
        <Inspector />
      </div>

      <Telemetry />
    </div>
  );
}