/* ===== app.jsx — root: router state, toast, theme/tweaks ===== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "progressLayout": "pipeline"
}/*EDITMODE-END*/;

const TOP_TABS = [
  { key: "projects", name: "Projektid", icon: "folder" },
  { key: "progress", name: "Edenemine", icon: "activity" },
  { key: "process",  name: "Protsess",  icon: "layers" },
];

function BottomNav({ active, onNav }) {
  return (
    <div className="bottomnav">
      {TOP_TABS.map((t) => (
        <button key={t.key} className={"navtab" + (active === t.key ? " on" : "")} onClick={() => onNav(t.key)}>
          <Icon name={t.icon} size={21} />
          <span>{t.name}</span>
        </button>
      ))}
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [nav, setNav] = useState({ screen: "login", tab: "projects", project: null, borehole: null });
  const [toast, setToast] = useState("");
  const [ready, setReady] = useState(false);
  const [, setStoreV] = useState(0);
  const toastTimer = useRef(null);

  useEffect(() => {
    let unsub = () => {};
    RPStore.init(window.RP_SEED).then(() => {
      unsub = RPStore.subscribe(() => setStoreV((v) => v + 1));
      if (RPStore.getCurrentUser()) setNav((n) => ({ ...n, screen: "projects", tab: "projects" }));
      setReady(true);
    });
    if ("serviceWorker" in navigator) {
      try { navigator.serviceWorker.register("sw.js").catch(() => {}); } catch (e) { /* preview iframe */ }
    }
    return () => unsub();
  }, []);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.dark ? "dark" : "light");
  }, [t.dark]);

  const flash = (msg) => {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(""), 2200);
  };

  const go = (patch) => setNav((n) => ({ ...n, ...patch }));

  const openProject = (p) => {
    if (p === "new") { flash("Uus projekt — ainult kontoriadmin"); return; }
    go({ screen: "boreholes", project: p });
  };
  const openBorehole = (h) => go({ screen: "form", borehole: h });
  const addBorehole = () => go({ screen: "form", borehole: { id: "", type: "PA", status: "" } });
  const navTab = (tab) => go({ screen: tab, tab });

  const showNav = ["projects", "progress", "process"].includes(nav.screen);

  if (!ready) {
    return (
      <div className="stage">
        <div className="device" id="device">
          <div className="boot"><RPLogo height={56} /><span className="mono">Ühendun pilveandmebaasiga…</span></div>
        </div>
      </div>
    );
  }

  return (
    <div className="stage">
      <div className="device" id="device">
        <StatusBar />

        {nav.screen === "login" && (
          <LoginScreen onLogin={() => go({ screen: "projects", tab: "projects" })} />
        )}

        {nav.screen === "projects" && (
          <ProjectListScreen me={RPStore.getCurrentUser("field")} onOpen={openProject}
            onLogout={() => { RPStore.auth.signOut(); go({ screen: "login" }); }} />
        )}

        {nav.screen === "progress" && (
          <ProgressMapScreen layout={t.progressLayout} onOpenProject={openProject} />
        )}

        {nav.screen === "process" && (
          <ProcessMapScreen />
        )}

        {nav.screen === "boreholes" && nav.project && (
          <BoreholeListScreen
            project={nav.project}
            onBack={() => go({ screen: "projects", tab: "projects" })}
            onOpen={openBorehole}
            onAdd={addBorehole}
          />
        )}

        {nav.screen === "form" && nav.borehole && (
          <BoreholeForm
            borehole={nav.borehole}
            project={nav.project}
            onBack={() => go({ screen: "boreholes" })}
            onSave={(msg) => flash(msg || "Puuraugu logi salvestatud")}
          />
        )}

        {showNav && <BottomNav active={nav.tab} onNav={navTab} />}

        <div className={"toast" + (toast ? " show" : "")}>
          <span className="tk"><Icon name="check" size={16} stroke={3} /></span>{toast}
        </div>

        <TweaksPanel>
          <TweakSection label="Edenemine" />
          <TweakRadio label="Progress paigutus" value={t.progressLayout}
            onChange={(v) => setTweak("progressLayout", v)}
            options={[{ value: "pipeline", label: "Töövoog" }, { value: "dashboard", label: "Ülevaade" }]} />
          <TweakSection label="Välimus" />
          <TweakToggle label="Tume režiim" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        </TweaksPanel>
      </div>
    </div>
  );
}

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