// Root app & router

function App() {
  const [page, setPage] = useState(() => {
    const h = window.location.hash.replace("#", "");
    return ["dashboard","alerts","team","rules","instructions","tasks","config"].includes(h) ? h : "dashboard";
  });
  const [alerts, setAlerts] = useState(ALERTS);
  const { push: pushToast, node: toastNode } = useToasts();

  const dismissAlert = (id) => {
    setAlerts((a) => a.map(x => x.id === id ? { ...x, status: "dismissed" } : x));
    pushToast("Алерт скрыт", "info");
  };

  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#", "");
      if (["dashboard","alerts","team","rules","instructions","tasks","config"].includes(h)) setPage(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const nav = (p) => {
    setPage(p);
    window.location.hash = p;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const activeAlerts = alerts.filter(a => a.status === "active");
  const criticalCount = activeAlerts.filter(a => a.severity === "critical").length;

  let content;
  switch (page) {
    case "dashboard":    content = <DashboardPage onNav={nav} alerts={alerts} dismissAlert={dismissAlert} />; break;
    case "alerts":       content = <AlertsPage alerts={alerts} dismissAlert={dismissAlert} pushToast={pushToast} />; break;
    case "team":         content = <TeamPage alerts={alerts} pushToast={pushToast} />; break;
    case "rules":        content = <RulesPage pushToast={pushToast} />; break;
    case "instructions": content = <InstructionsPage pushToast={pushToast} />; break;
    case "tasks":        content = <TasksPage />; break;
    case "config":       content = <ConfigPage pushToast={pushToast} />; break;
    default:             content = <DashboardPage onNav={nav} alerts={alerts} dismissAlert={dismissAlert} />;
  }

  return (
    <div className="app-shell">
      <AppHeader
        page={page}
        onNav={nav}
        alertsCount={activeAlerts.length}
        criticalCount={criticalCount}
      />
      {page === "dashboard" && <StatusStrip alerts={alerts} />}
      <main>{content}</main>
      <AppFooter />
      {toastNode}
    </div>
  );
}

// Запуск React теперь в boot.jsx — он сначала fetch'ит данные с backend,
// потом монтирует <App />. Если backend недоступен — остаются mock-данные
// из data.jsx (UI всегда жив). Раньше было:
//   const root = ReactDOM.createRoot(document.getElementById("app"));
//   root.render(<App />);