// Hash-based router. Maps URL hashes to the page components defined
// in prove-pages.jsx + prove-webapp.jsx + prove-landing.jsx.
//
// Routes (no hash → landing):
//   #/login            #/signup           #/forgot           #/forgot-sent
//   #/onboarding/habit #/onboarding/stake
//   #/feed             #/explore          #/leaderboard
//   #/profile          #/profile/:handle  #/proof/:id
//   #/rooms            #/rooms/:id
//   #/post             #/post/preview     #/post/success     #/post/closed
//   #/notifications    #/activity         #/coins            #/pro
//   #/shield           #/settings         #/settings/notifications
//   #/stakes           #/milestone/:day   #/search
//   #/design           ← the original design canvas (all artboards)
//
// Pages take width/height props sized to the viewport.

const { useState: useStateR, useEffect: useEffectR } = React;

function useHashRoute() {
  const [hash, setHash] = useStateR(window.location.hash || "");
  useEffectR(() => {
    const on = () => setHash(window.location.hash || "");
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return hash.replace(/^#/, "");
}

function useViewport() {
  const [vp, setVp] = useStateR({
    w: window.innerWidth,
    h: window.innerHeight,
  });
  useEffectR(() => {
    const on = () => setVp({ w: window.innerWidth, h: window.innerHeight });
    window.addEventListener("resize", on);
    return () => window.removeEventListener("resize", on);
  }, []);
  return vp;
}

// Resolve a hash like "/profile/maya.k" into { path, params }.
function matchRoute(hash) {
  const path = (hash || "/").split("?")[0];
  const seg = path.split("/").filter(Boolean);
  if (seg.length === 0) return { name: "landing" };
  const head = seg[0];
  switch (head) {
    case "login":         return { name: "login" };
    case "signup":        return { name: "signup" };
    case "forgot":        return { name: "forgot" };
    case "forgot-sent":   return { name: "forgot-sent" };
    case "onboarding":    return { name: "onboarding-" + (seg[1] || "habit") };
    case "feed":          return { name: "feed" };
    case "explore":       return { name: "explore" };
    case "leaderboard":   return { name: "leaderboard" };
    case "profile":       return { name: "profile", handle: seg[1] };
    case "proof":         return { name: "proof", id: seg[1] };
    case "rooms":         return seg[1]
                            ? { name: "room-detail", id: seg[1] }
                            : { name: "rooms" };
    case "post":          return { name: "post", step: seg[1] || "upload" };
    case "notifications": return { name: "notifications" };
    case "activity":      return { name: "activity" };
    case "coins":         return { name: "coins" };
    case "pro":           return { name: "pro" };
    case "shield":        return { name: "shield" };
    case "settings":      return { name: seg[1] === "notifications"
                            ? "settings-notifications" : "settings" };
    case "stakes":        return { name: "stakes" };
    case "milestone":     return { name: "milestone", day: Number(seg[1]) || 7 };
    case "search":        return { name: "search" };
    case "design":        return { name: "design" };
    default:              return { name: "landing" };
  }
}

function ProveRouter() {
  const hash = useHashRoute();
  const route = matchRoute(hash);
  const { w, h } = useViewport();

  // Scroll to top on route change (except when staying on landing for #anchors).
  useEffectR(() => {
    if (route.name !== "landing") window.scrollTo(0, 0);
  }, [route.name]);

  // The design canvas lives at /design.html, redirect there.
  useEffectR(() => {
    if (route.name === "design" && window.location.pathname !== "/design.html") {
      window.location.href = "/design.html";
    }
  }, [route.name]);

  switch (route.name) {
    case "landing":
      return <FullLanding heroVariant="stadium"
        headline="Stop lying to yourself."
        sub="Post daily video proof. Your friends stake coins on whether you'll actually follow through." />;

    case "login":         return <LoginPage width={w} height={h} />;
    case "signup":        return <SignupPage width={w} height={h} />;
    case "forgot":        return <ForgotPasswordPage width={w} height={h} state="form" />;
    case "forgot-sent":   return <ForgotPasswordPage width={w} height={h} state="sent" />;
    case "onboarding-habit": return <OnboardingHabitPage width={w} height={h} />;
    case "onboarding-stake": return <OnboardingStakePage width={w} height={h} />;

    case "feed":        return <FeedPage         width={w} height={h} />;
    case "explore":     return <ExplorePage      width={w} height={h} />;
    case "leaderboard": return <LeaderboardPage  width={w} height={h} />;
    case "profile":     return <ProfilePage      width={w} height={Math.max(h, 1500)} handle={route.handle} />;
    case "proof":       return <SingleProofPage  width={w} height={Math.max(h, 1100)} />;

    case "rooms":       return <RoomsPage        width={w} height={Math.max(h, 1100)} />;
    case "room-detail": return <RoomDetailPage   width={w} height={Math.max(h, 1200)} />;

    case "post":        return <PostFlowPage     width={w} height={h} step={route.step} />;
    case "notifications": return <NotificationsPage width={w} height={Math.max(h, 1100)} />;
    case "activity":    return <ActivityPage     width={w} height={Math.max(h, 1100)} />;
    case "coins":       return <CoinsPage        width={w} height={Math.max(h, 1300)} />;
    case "pro":         return <ProPage          width={w} height={Math.max(h, 1100)} />;
    case "shield":      return <StreakShieldPage width={w} height={h} />;
    case "settings":    return <SettingsPage     width={w} height={Math.max(h, 1100)} />;
    case "settings-notifications": return <SettingsNotificationsPage width={w} height={Math.max(h, 1000)} />;
    case "stakes":      return <StakesHistoryPage width={w} height={Math.max(h, 1100)} />;
    case "milestone":   return <MilestonePage    width={w} height={h} day={route.day} />;
    case "search":      return <SearchPage       width={w} height={Math.max(h, 1000)} />;

    default:
      return <FullLanding heroVariant="stadium"
        headline="Stop lying to yourself."
        sub="Post daily video proof. Your friends stake coins on whether you'll actually follow through." />;
  }
}

window.ProveRouter = ProveRouter;