/* global React, Header, Footer, HomePage, PhilosophyPage, ProductsPage, AndoDetailPage, FukushiDetailPage, ForParentsPage, MapPage, AboutPage, ContactPage, TokushohoPage, PrivacyPage */
const { useState, useEffect } = React;

const ROUTES = {
  "/": "home",
  "/philosophy": "philosophy",
  "/products": "products",
  "/products/ando": "ando",
  "/products/fukushi-area-map": "fukushi-area-map",
  "/products/fukushi-area-lab": "fukushi-area-map", // 旧URLの後方互換
  "/for-parents": "for-parents",
  "/for-providers": "fukushi-area-map", // 事業者向け詳細は既存ページを流用
  "/map": "map",
  "/about": "about",
  "/contact": "contact",
  "/legal/tokushoho": "tokushoho",
  "/legal/privacy": "privacy",
};
const PAGE_TO_ROUTE = {
  "home": "/",
  "philosophy": "/philosophy",
  "products": "/products",
  "ando": "/products/ando",
  "fukushi-area-map": "/products/fukushi-area-map",
  "for-parents": "/for-parents",
  "map": "/map",
  "about": "/about",
  "contact": "/contact",
  "tokushoho": "/legal/tokushoho",
  "privacy": "/legal/privacy",
};

function pageFromHash() {
  const h = (window.location.hash || "#/").replace(/^#/, "");
  return ROUTES[h] || "home";
}

// pathname優先（クリーンURL）、なければhash（旧URL/ブクマ後方互換）にフォールバック
function pageFromUrl() {
  const path = window.location.pathname || "/";
  // 末尾スラッシュは正規化（/philosophy/ も /philosophy として解決）
  const normalized = path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
  if (ROUTES[normalized]) return ROUTES[normalized];
  // pathname が match しなければ hash を見る（旧 #/philosophy 形式の URL 後方互換）
  const hashPage = pageFromHash();
  if (hashPage !== "home") return hashPage;
  return ROUTES[normalized] || "home";
}

const PAGE_META = {
  "home": {
    title: "YORIAI — 認知の違いで失われた機会を、環境を変えて取り戻す。",
    description: "人を変えない、環境を変える。福祉エリアマップとAndoで、認知の凸凹を強みに変えるプロジェクトです。",
  },
  "philosophy": {
    title: "思想 | YORIAI",
    description: "認知の違いで失われた機会を、環境を変えて取り戻す。人を変えず環境を整えるYORIAIの4つの思想。",
  },
  "products": {
    title: "プロダクト | YORIAI",
    description: "福祉エリアマップとAndo — YORIAIが開発する2つのプロダクト。",
  },
  "ando": {
    title: "Ando — 個人向け実行支援アプリ | YORIAI",
    description: "認知特性を持つ方の実行支援アプリ。思考の断片をキャプチャして整理し、行動につなげる。",
  },
  "fukushi-area-map": {
    title: "福祉エリアマップ — 放課後等デイサービス開設判断支援 | YORIAI",
    description: "放課後等デイサービス・児童発達支援の開設候補地を、競合密度・送迎圏・学校・ハザードの地図分析で比較するサービス。",
  },
  "for-parents": {
    title: "ご家族の方へ — 放課後等デイサービスを地図で探す | YORIAI",
    description: "放課後等デイサービス・児童発達支援を、送迎15分圏・通える範囲から地図で見渡す。お子さんの通所先を探しているご家族へ。",
  },
  "map": {
    title: "分析マップ | YORIAI",
    description: "候補地の競合・需要・安全性・交通を地図で確認できる無料ツール。住所を入れるだけで一次判断ができます。",
  },
  "about": {
    title: "このサイトについて | YORIAI",
    description: "YORIAIについて、発足の背景、運営形態、プロジェクト情報。",
  },
  "contact": {
    title: "お問い合わせ | YORIAI",
    description: "YORIAIへのお問い合わせ・相談はこちら。福祉エリアマップやAndoについてご質問ください。",
  },
  "tokushoho": {
    title: "特定商取引法に基づく表記 | YORIAI",
    description: "YORIAIの特定商取引法に基づく表記。",
  },
  "privacy": {
    title: "プライバシーポリシー | YORIAI",
    description: "YORIAIのプライバシーポリシー。個人情報の取り扱いについて。",
  },
};

function updateMeta(page) {
  const meta = PAGE_META[page] || PAGE_META["home"];
  const route = PAGE_TO_ROUTE[page] || "/";
  // すべての URL は cleanURL（hash不使用）に統一
  const canonicalUrl = "https://www.yoriai.life" + route;
  document.title = meta.title;
  const setAttr = (sel, attr, val) => { const el = document.querySelector(sel); if (el) el.setAttribute(attr, val); };
  setAttr('meta[name="description"]', "content", meta.description);
  setAttr('meta[property="og:title"]', "content", meta.title);
  setAttr('meta[property="og:description"]', "content", meta.description);
  setAttr('meta[property="og:url"]', "content", canonicalUrl);
  setAttr('meta[name="twitter:title"]', "content", meta.title);
  setAttr('meta[name="twitter:description"]', "content", meta.description);
  // canonical は常にクリーンURLを指す
  const canonicalEl = document.querySelector('link[rel="canonical"]');
  if (canonicalEl) canonicalEl.setAttribute('href', canonicalUrl);
}

function App() {
  const [page, setPage] = useState(() => {
    // 優先順位: 静的シェルから注入された __INITIAL_PAGE__ > pathname > hash > localStorage > home
    if (window.__INITIAL_PAGE__) return window.__INITIAL_PAGE__;
    const fromUrl = pageFromUrl();
    if (fromUrl !== "home" || window.location.pathname === "/") return fromUrl;
    const saved = localStorage.getItem("yoriai_page");
    return saved || "home";
  });

  useEffect(() => {
    const onPop = () => setPage(pageFromUrl());
    // クリーンURLのブラウザ戻る/進む
    window.addEventListener("popstate", onPop);
    // 旧 hashURL 後方互換
    window.addEventListener("hashchange", onPop);
    return () => {
      window.removeEventListener("popstate", onPop);
      window.removeEventListener("hashchange", onPop);
    };
  }, []);

  useEffect(() => {
    localStorage.setItem("yoriai_page", page);
    const route = PAGE_TO_ROUTE[page] || "/";
    // 現在のpathが目的routeでなければ pushState で履歴に積む（クリーンURL）
    const currentPath = window.location.pathname.replace(/\/$/, "") || "/";
    const targetPath = route.replace(/\/$/, "") || "/";
    if (currentPath !== targetPath) {
      window.history.pushState(null, "", route);
    }
    // hash が残っていたら除去（旧URLからの遷移時のクリーンアップ）
    if (window.location.hash) {
      window.history.replaceState(null, "", route);
    }
    updateMeta(page);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  const headerCurrent = (
    page === "ando" ? "ando" :
    page === "fukushi-area-map" ? "fukushi-area-map" :
    page === "for-parents" ? "fukushi-area-map" :
    page === "products" ? "ando" :
    page === "contact" ? "about" :
    page
  );

  return (
    <>
      <Header current={headerCurrent} onNav={setPage} />
      <main>
        {page === "home" && <HomePage onNav={setPage} />}
        {page === "philosophy" && <PhilosophyPage onNav={setPage} />}
        {page === "products" && <ProductsPage onNav={setPage} />}
        {page === "ando" && <AndoDetailPage onNav={setPage} />}
        {page === "fukushi-area-map" && <FukushiDetailPage onNav={setPage} />}
        {page === "for-parents" && <ForParentsPage onNav={setPage} />}
        {page === "map" && <MapPage onNav={setPage} />}
        {page === "about" && <AboutPage onNav={setPage} />}
        {page === "contact" && <ContactPage onNav={setPage} />}
        {page === "tokushoho" && <TokushohoPage onNav={setPage} />}
        {page === "privacy" && <PrivacyPage onNav={setPage} />}
      </main>
      <Footer onNav={setPage} />
    </>
  );
}

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