/* Maho Mockup — hash router + root app */

const { useState, useEffect } = React;

function parseHash() {
  const raw = (location.hash || "#/hub").replace(/^#/, "") || "/hub";
  const path = raw.startsWith("/") ? raw : `/${raw}`;
  const parts = path.split("/").filter(Boolean);
  return { path, parts };
}

function pushHash(path) {
  const next = path.startsWith("#") ? path : `#${path.startsWith("/") ? path : `/${path}`}`;
  if (location.hash !== next) location.hash = next;
  else window.dispatchEvent(new HashChangeEvent("hashchange"));
}

function isTabRoot(path) {
  return ["/home", "/records", "/library", "/me"].includes(path);
}

function tabIdFromPath(path) {
  if (path.startsWith("/home")) return "home";
  if (path.startsWith("/records") || path.startsWith("/analysis")) return "records";
  if (path.startsWith("/library") || path.startsWith("/gojuuon") || path.startsWith("/sentence-books") || path.startsWith("/vocab-books")) return "library";
  if (path.startsWith("/me") || path.startsWith("/settings") || path.startsWith("/topup") || path.startsWith("/usage")) return "me";
  return "home";
}

function App() {
  const [route, setRoute] = useState(() => parseHash());
  const [historyStack, setHistoryStack] = useState(["/hub"]);
  const [tweaks, setTweaks] = useState({
    loggedIn: true,
    showRecent: true,
    recordsEmpty: false,
  });

  useEffect(() => {
    const onHash = () => {
      const next = parseHash();
      setRoute(next);
      setHistoryStack((h) => {
        if (h[h.length - 1] === next.path) return h;
        return [...h, next.path].slice(-40);
      });
    };
    window.addEventListener("hashchange", onHash);
    if (!location.hash) pushHash("/hub");
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (path) => {
    if (path === -1) {
      goBack();
      return;
    }
    pushHash(path);
  };

  const goBack = () => {
    setHistoryStack((h) => {
      if (h.length <= 1) {
        pushHash("/home");
        return h;
      }
      const next = h.slice(0, -1);
      const target = next[next.length - 1];
      // avoid double-push from hashchange appending again incorrectly
      setTimeout(() => {
        location.hash = `#${target}`;
      }, 0);
      return next;
    });
  };

  const path = route.path;
  const parts = route.parts;
  const showPhone = path !== "/hub";
  const showTabBar = isTabRoot(path);
  const activeTab = tabIdFromPath(path);

  const onTabChange = (tabId) => {
    const tab = TABS.find((t) => t.id === tabId);
    if (tab) navigate(tab.route);
  };

  let page = null;
  if (parts[0] === "hub" || parts.length === 0) {
    page = <HubPage navigate={navigate} />;
  } else if (parts[0] === "home") {
    page = <HomePage navigate={navigate} tweaks={tweaks} />;
  } else if (parts[0] === "records") {
    page = <RecordsPage navigate={navigate} tweaks={tweaks} />;
  } else if (parts[0] === "library") {
    page = <LibraryPage navigate={navigate} />;
  } else if (parts[0] === "me") {
    page = <MePage navigate={navigate} tweaks={tweaks} />;
  } else if (parts[0] === "analysis" && parts[2] === "sentence") {
    page = (
      <SentenceDetailPage
        analysisId={parts[1]}
        sentenceId={parts[3]}
        navigate={navigate}
        onBack={goBack}
      />
    );
  } else if (parts[0] === "analysis" && parts[2] === "deep-dive") {
    page = (
      <WordDeepDivePage
        term={parts[3]}
        navigate={navigate}
        onBack={goBack}
      />
    );
  } else if (parts[0] === "analysis") {
    page = (
      <AnalysisResultPage
        analysisId={parts[1]}
        navigate={navigate}
        onBack={goBack}
      />
    );
  } else if (parts[0] === "gojuuon") {
    page = <GojuuonPage navigate={navigate} onBack={goBack} />;
  } else if (parts[0] === "settings") {
    page = <SettingsPage navigate={navigate} onBack={goBack} />;
  } else if (parts[0] === "topup") {
    page = <TopUpPage navigate={navigate} onBack={goBack} />;
  } else if (parts[0] === "usage") {
    page = <UsagePage navigate={navigate} onBack={goBack} />;
  } else if (parts[0] === "sentence-books") {
    page = <SentenceBooksPage bookId={parts[1]} navigate={navigate} onBack={goBack} />;
  } else if (parts[0] === "vocab-books") {
    page = <VocabBooksPage bookId={parts[1]} navigate={navigate} onBack={goBack} />;
  } else {
    page = (
      <div className="zen-page">
        <PageHeader title="尚未實作" onBack={goBack} />
        <div className="zen-content">
          <div className="content-wrapper">
            <ZenCard>
              <p>找不到路由：{path}</p>
              <ZenButton variant="primary" onClick={() => navigate("/hub")}>回 Hub</ZenButton>
            </ZenCard>
          </div>
        </div>
      </div>
    );
  }

  if (!showPhone) {
    return (
      <div className="studio">
        <div className="studio__stage" style={{ alignItems: "flex-start", paddingTop: 12 }}>
          {page}
        </div>
      </div>
    );
  }

  return (
    <div className="studio">
      <div className="studio__side">
        <SideCatalog route={path} navigate={navigate} />
        <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />
      </div>
      <div className="studio__stage">
        <PhoneFrame
          showTabBar={showTabBar}
          activeTab={activeTab}
          onTabChange={onTabChange}
        >
          {page}
        </PhoneFrame>
      </div>
    </div>
  );
}

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