/* SkyOps — Processing Page: top-level shell for three views */

const { useState: useStateP0 } = React;

function procJobsFor(mic) {
  if (!mic) return PROC_JOBS;
  const own = PROC_JOBS.filter(j => j.mic === mic.id);
  if (own.length) return own;
  const pr = mic.progress?.processing ?? 0;
  const status = mic.error ? "failed" : pr >= 1 ? "completed" : pr > 0 ? "processing" : "queued";
  const site = (window.SITES || []).find(s => s.id === mic.siteId);
  return [{
    id: "JOB-" + mic.id.replace("MIC-", "") + ".A", mic: mic.id, sortie: (mic.flights || 0) + " sorties · full AOI",
    site: mic.siteId, siteName: site?.name || mic.siteId, status, stream: "both", progress: pr,
    images: mic.images || 0, thermalImages: Math.round((mic.images || 0) * 0.42), bytes: mic.bytes || 0,
    startedAt: mic.startedAt || "—", eta: status === "processing" ? "≈ 40m" : "—", engine: "GPU-04 · NodeODM",
    sfmPoints: mic.images ? mic.images * 38 : null, densePoints: mic.images ? mic.images * 17500 : null,
    gsd: mic.gsd, area_ha: mic.area_ha, activeStage: status === "completed" ? 8 : Math.min(7, Math.floor(pr * 8)),
    anomaliesDetected: mic.detections || 0, coverage: mic.coverage || 0, error: mic.error,
  }];
}

function ProcessingPage({ go, mic }) {
  const [view, setView] = useStateP0(() => localStorage.getItem("skyops.proc.view") || "ops");
  const stream = "both", setStream = () => {};
  const jobs = React.useMemo(() => procJobsFor(mic), [mic && mic.id]);
  const [selId, setSelId] = useStateP0(jobs[0].id);
  React.useEffect(() => { setSelId(jobs[0].id); }, [mic && mic.id]);

  React.useEffect(() => localStorage.setItem("skyops.proc.view", view), [view]);

  const selJob = jobs.find(j => j.id === selId) || jobs[0];

  return (
    <div className="page page-processing" data-screen-label="Processing">
      <div className="page-hd page-hd-proc">
        <div>
          <div className="page-kicker">
            <span>MIC cycle</span>
            <span className="page-kicker-sep">/</span>
            <button className="page-kicker-crumb" onClick={() => go("site")}>Site</button>
            <span className="page-kicker-sep">/</span>
            <button className="page-kicker-crumb" onClick={() => go("planner")}>Planner</button>
            <span className="page-kicker-sep">/</span>
            <span className="page-kicker-cur">Processing</span>
            <span className="page-kicker-sep">/</span>
            <button className="page-kicker-crumb" onClick={() => go("review")}>Review</button>
          </div>
          <h1 className="page-title">Processing</h1>
          <div className="page-sub">Ingest · SfM · dense reconstruction · thermal register · anomaly inference. Dual stream RGB + LWIR.</div>
        </div>
        <ProcTopbarActions activeView={view} setActiveView={setView} streamFilter={stream} setStreamFilter={setStream}/>
      </div>

      {view === "ops"     && <ViewOps jobs={jobs} selJob={selJob} selJobId={selId} setSelJobId={setSelId} streamFilter={stream}/>}
      {view === "studio"  && <ViewStudio selJob={selJob} streamFilter={stream}/>}
      {view === "compare" && <ViewCompare selJob={selJob} streamFilter={stream}/>}
    </div>
  );
}

window.ProcessingPage = ProcessingPage;