/* SkyOps — App root */

function App() {
  const { tweaks, update, editMode } = useTweaks();
  const [session, setSession] = useState(() => window.lgSession ? window.lgSession() : true);
  React.useEffect(() => { const h = () => setSession(window.lgSession()); window.addEventListener("skyops:session", h); return () => window.removeEventListener("skyops:session", h); }, []);
  const [route, setRoute] = useState(() => localStorage.getItem("skyops_route") || "portfolio");
  React.useEffect(() => { const h = (e) => setRoute(e.detail); window.addEventListener("skyops:go", h); return () => window.removeEventListener("skyops:go", h); }, []);
  const [activeSite, setActiveSite] = useState(() => localStorage.getItem("skyops_site") || "pt-ev-03");
  const [activeMic, setActiveMic] = useState(() => localStorage.getItem("skyops_mic") || "MIC-2026-04-033");
  const [wsStage, setWsStage] = useState(() => localStorage.getItem("skyops_ws_stage") || "review");
  const [siteTab, setSiteTab] = useState(() => localStorage.getItem("skyops_site_tab") || "twin");
  const [cmpPair, setCmpPair] = useState(null);
  const openCompare = (a, b) => { setCmpPair({ a, b }); setRoute("compare"); };

  useEffect(() => { localStorage.setItem("skyops_route", route); }, [route]);
  useEffect(() => { localStorage.setItem("skyops_site", activeSite); }, [activeSite]);
  useEffect(() => { localStorage.setItem("skyops_mic", activeMic); }, [activeMic]);
  useEffect(() => { localStorage.setItem("skyops_ws_stage", wsStage); }, [wsStage]);
  useEffect(() => { localStorage.setItem("skyops_site_tab", siteTab); }, [siteTab]);

  useEffect(() => {
    const cur = (window.INSPECTIONS || []).find(i => i.id === activeMic);
    if (!cur || cur.siteId !== activeSite) {
      const match = (window.INSPECTIONS || []).filter(i => i.siteId === activeSite)
        .sort((a, b) => (b.startedAt || b.plannedFor || "").localeCompare(a.startedAt || a.plannedFor || ""))[0];
      if (match) setActiveMic(match.id);
    }
  }, [activeSite]);

  // Legacy routes → collapse to workspace with stage
  useEffect(() => {
    if (route === "ops" || route === "insights" || route === "financial") { const t = { ops: "ops", insights: "production", financial: "financial" }[route]; localStorage.setItem("skyops_ph_jump", t); window.dispatchEvent(new CustomEvent("skyops:phtab-set", { detail: t })); setRoute("portfolio"); return; }
    const legacy = { planner: "plan", flight: "fly", processing: "process", review: "review", reports: "report" };
    if (legacy[route]) { setWsStage(legacy[route]); setRoute("workspace"); }
  }, [route]);

  const personaName = PERSONA_LABEL[tweaks.persona] || "User";
  window.__personaName = personaName;

  const crumbs = useMemo(() => {
    const site = SITES.find(s => s.id === activeSite);
    switch (route) {
      case "portfolio":   return ["Portfolio", ({ ops: "Operations", production: "Production & losses", financial: "Financial impact" })[window.__phTab] || "Operations"];
      case "ops":         return ["Portfolio", "Operations"];
      case "sites":       return ["Sites"];
      case "inspections": return ["Inspections"];
      case "workorders":  return ["Work orders"];
      case "fleet":       return ["Fleet & crew"];
      case "warranty":    return ["Warranty claims"];
      case "alerts":      return ["Alerts"];
      case "field":       return ["Field app"];
      case "siteconfig":  return ["Sites", "Edit site"];
      case "core":        return ["Argus"];
      case "commercial":  return ["Commercial"];
      case "newsite":     return ["Sites", "New site"];
      case "insights":    return ["Insights"];
      case "calendar":    return ["Calendar"];
      case "site":        return ["Sites", site?.name || "Site"];
      case "workspace":   return ["Sites", site?.name || "Site", "Inspection"];
      case "admin":       return ["Admin", "Users"];
      case "compare":     return ["Sites", site?.name || "Site", "Compare"];
      case "zonereport":  return ["Reports"];
      case "settings":    return ["Settings"];
      case "profile":     return ["My profile"];
      default: return [route];
    }
  }, [route, activeSite]);

  if (!session) return <><window.LoginScreen onSignedIn={(p) => { update({ persona: p }); setSession(window.lgSession()); }}/><TweaksPanel tweaks={tweaks} update={update} visible={editMode}/></>;
  return (
    <div className="app">
      <Sidebar route={route} go={setRoute} />
      <Topbar crumbs={crumbs} personaName={personaName} ctx={{ route, activeSite, activeMic, stage: wsStage }} nav={{ go: setRoute, setActiveSite, setActiveMic, setWsStage }}/>
      <main className="main">
        {route === "portfolio" && <PortfolioHub go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {route === "sites" && <SitesIndexPage go={setRoute} setActiveSite={setActiveSite}/>}
        {route === "inspections" && <InspectionsIndexPage go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        
        {route === "calendar" && <window.PortfolioCalendarPage go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {route === "site" && <SitePage siteId={activeSite} go={setRoute} setActiveMic={setActiveMic} openCompare={openCompare} tab={siteTab} setTab={setSiteTab} setWsStage={setWsStage}/>}
        {route === "workspace" && <InspectionWorkspace
          activeSite={activeSite} activeMic={activeMic} stage={wsStage} setStage={setWsStage}
          setActiveMic={setActiveMic} setActiveSite={setActiveSite} go={setRoute} openCompare={openCompare}/>}
        {route === "admin" && <AdminPage/>}
        {route === "compare" && <TemporalIntel siteId={activeSite} go={setRoute}/>}
        {route === "newsite" && <NewSitePage go={setRoute} setActiveSite={setActiveSite}/>}
        {route === "settings" && <SettingsPage/>}
        {route === "profile" && <window.ProfilePage persona={tweaks.persona} personaName={personaName} go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {route === "core" && <CorePage go={setRoute} setActiveSite={setActiveSite}/>}
        {route === "siteconfig" && <SiteConfigPage go={setRoute} site={(window.SITES || []).find(s => s.id === activeSite)}/>}
        {route === "field" && <FieldPage go={setRoute}/>}
        {route === "alerts" && <AlertsPage go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {route === "warranty" && <WarrantyPage go={setRoute} setActiveSite={setActiveSite}/>}
        {route === "commercial" && <CommercialPage go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {route === "fleet" && <FleetPage go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {route === "workorders" && <WorkOrdersPage go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {route === "zonereport" && <ReportsIndexPage go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {!["profile","ops","core","siteconfig","field","alerts","warranty","commercial","settings","newsite","fleet","workorders","zonereport","portfolio","sites","inspections","insights","calendar","site","workspace","admin","compare","planner","flight","review","processing","reports"].includes(route) && (
          <div className="page">
            <div className="card" style={{ padding: 60, textAlign: "center", color: "var(--fg-muted)" }}>
              Feature scheduled for a later phase. <a onClick={() => setRoute("portfolio")} href="#" style={{ color: "var(--accent-primary)" }}>Back to portfolio</a>.
            </div>
          </div>
        )}
      </main>
      <TweaksPanel tweaks={tweaks} update={update} visible={editMode}/>
      <GlobalModals go={setRoute} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>
      <IntelligenceLayer ctx={{ route, activeSite, activeMic, stage: wsStage }} nav={{ go: setRoute, setActiveSite, setActiveMic, setWsStage }}/>
    </div>
  );
}

/* ── Portfolio hub: one entry, three lenses ───── */
const PH_TABS = [
  ["ops", "Operations", "Health, alerts, activity across sites"],
  ["production", "Production", "Energy, losses, where the MWh went"],
  ["financial", "Financial", "Revenue at risk, benchmarks, forecast"],
];
function PortfolioHub({ go, setActiveSite, setActiveMic, setWsStage }) {
  const [tab, setTab] = useState(() => localStorage.getItem("skyops_ph_tab") || "ops");
  useEffect(() => { localStorage.setItem("skyops_ph_tab", tab); window.__phTab = tab; window.dispatchEvent(new Event("skyops:phtab")); }, [tab]);
  useEffect(() => { const h = (e) => { setTab(e.detail); localStorage.removeItem("skyops_ph_jump"); }; window.addEventListener("skyops:phtab-set", h); return () => { window.removeEventListener("skyops:phtab-set", h); window.__phTab = null; window.dispatchEvent(new Event("skyops:phtab")); }; }, []);
  useEffect(() => {
    const t = localStorage.getItem("skyops_ph_jump");
    if (t) { setTab(t); localStorage.removeItem("skyops_ph_jump"); }
  }, []);
  return (
    <div className="ph">
      <div className="ph-bar">
        <div className="ph-title">Portfolio</div>
        <div className="ph-tabs" role="tablist">
          {PH_TABS.map(([k, l, d]) => (
            <button key={k} role="tab" aria-selected={tab === k} className={tab === k ? "on" : ""} onClick={() => setTab(k)} title={d}>
              <span>{l}</span><em>{d}</em>
            </button>
          ))}
        </div>
      </div>
      <div className="ph-body">
        {tab === "ops" && <PortfolioPage go={go} setActiveSite={setActiveSite}/>}
        {tab === "production" && <ProductionCockpit go={go} setActiveSite={setActiveSite} setActiveMic={setActiveMic} setWsStage={setWsStage}/>}
        {tab === "financial" && <AssetManagerPage go={go} setActiveSite={setActiveSite}/>}
      </div>
    </div>
  );
}

/* ── Sites index ────────────────────────────────── */
function SitesIndexPage({ go, setActiveSite }) {
  return (
    <div className="page">
      <div className="page-head">
        <div className="title">
          <div className="kicker">Operate</div>
          <h1 style={{ display: "flex", alignItems: "center", gap: 12 }}>Sites<button className="btn btn-primary btn-xs" onClick={() => go("newsite")}><Icon name="plus" size={11}/>New site</button></h1>
          <div className="sub">Physical assets under management. Each site has inspections, a calendar, and a digital twin.</div>
        </div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Site</th><th>Type</th><th>Country</th><th>Capacity</th><th>Health</th><th>Last inspection</th><th></th></tr></thead>
          <tbody>
            {(window.SITES || []).map(s => (
              <tr key={s.id} onClick={() => { setActiveSite(s.id); go("site"); }} style={{ cursor: "pointer" }}>
                <td><div style={{ display:"flex", alignItems:"center", gap:10 }}><div style={{ width:8, height:8, borderRadius:99, background: s.health >= 90 ? "var(--sev-low)" : s.health >= 75 ? "var(--sev-med)" : "var(--sev-high)" }}/><b>{s.name}</b></div></td>
                <td className="sec">{s.type}</td>
                <td className="sec">{s.country}</td>
                <td className="mono num">{s.capacity_mw} MW</td>
                <td><div className="sh-cell"><b className="mono" style={{ color: s.health >= 90 ? "var(--sev-low)" : s.health >= 75 ? "var(--sev-medium)" : "var(--sev-high)" }}>{s.health}</b><span className="sh-bar"><i style={{ width: s.health + "%", background: s.health >= 90 ? "var(--sev-low)" : s.health >= 75 ? "var(--sev-medium)" : "var(--sev-high)" }}/></span></div></td>
                <td className="mono sec">{s.lastInsp || "—"}</td>
                <td style={{ textAlign: "right" }}><Icon name="arrow_right" size={12} style={{ color: "var(--fg-muted)" }}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ── Global inspections index ─────────────────── */
function InspectionsIndexPage({ go, setActiveSite, setActiveMic, setWsStage }) {
  const all = (window.INSPECTIONS || []).slice().sort((a,b) => (b.startedAt || b.plannedFor || "").localeCompare(a.startedAt || a.plannedFor || ""));
  return (
    <div className="page">
      <div className="page-head">
        <div className="title">
          <div className="kicker">Operate</div>
          <h1 style={{ display: "flex", alignItems: "center", gap: 12 }}>Inspections<button className="btn btn-primary btn-xs" onClick={() => window.dispatchEvent(new CustomEvent("skyops:new-insp", { detail: {} }))}><Icon name="plus" size={11}/>New inspection</button></h1>
          <div className="sub">All inspections across the portfolio. Each inspection has an 8-stage lifecycle.</div>
        </div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>MIC</th><th>Site</th><th>Cycle</th><th>Stage</th><th>Status</th><th>Detections</th><th>Date</th><th></th></tr></thead>
          <tbody>
            {all.map(i => {
              const site = (window.SITES || []).find(s => s.id === i.siteId);
              const stage = i.status === "draft" || i.status === "scheduled" ? "plan"
                : i.status === "flying" ? "capture"
                : i.status === "processing" ? "process"
                : i.status === "review" ? "review"
                : i.status === "reported" ? "report" : "archive";
              return (
                <tr key={i.id} onClick={() => { setActiveSite(i.siteId); setActiveMic(i.id); setWsStage(stage); go("workspace"); }} style={{ cursor: "pointer" }}>
                  <td className="mono"><b>{i.id}</b></td>
                  <td>{site?.name || "—"}</td>
                  <td className="sec">{i.cycle}</td>
                  <td><span className="pill"><span className="dot"/>{stage}</span></td>
                  <td><span className={`mic-rail-status mic-rail-status-${i.status}`}><span className="mic-rail-dot"/>{i.status}</span></td>
                  <td className="mono num">{i.detections || 0}</td>
                  <td className="mono sec">{i.startedAt || i.plannedFor}</td>
                  <td style={{ textAlign: "right" }}><Icon name="arrow_right" size={12} style={{ color: "var(--fg-muted)" }}/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}


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