// ============================================================
// HausMatch App · Interactive Demo
// Full click-through: Quiz? → Upload → Match → Results → Detail.
// Mounts the real flow at root (no design-canvas wrapper) so /try
// feels like a real app, not a screen grid.
// ============================================================

// Babel-standalone scope-isolates each <script type="text/babel">; cross-file
// component references must come off window (each module Object.assigns).
const {
  ScreenQuiz, ScreenUpload, ScreenMatching, ScreenResults, ScreenDetail,
  MobileUpload, MobileResults, MobileDetail,
} = window;

// Viewport hook: returns true when the window is phone-sized.
// Mobile breakpoint matches the landing site (<=640px).
function useIsMobile(bp = 640) {
  const [m, setM] = React.useState(() =>
    typeof window !== "undefined" ? window.innerWidth <= bp : false
  );
  React.useEffect(() => {
    const onR = () => setM(window.innerWidth <= bp);
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, [bp]);
  return m;
}

function InteractiveFlow() {
  // Start at upload; quiz is accessible via the "Use my style quiz" tab on Upload.
  const [step, setStep] = React.useState("upload");
  const [listing, setListing] = React.useState(null);
  const isMobile = useIsMobile();

  // Expose a global nav handler so every AppBar in the tree can route without
  // threading an onNav prop through every screen. Map nav IDs to flow steps.
  React.useEffect(() => {
    window.__hmNav = (id) => {
      if (id === "upload") setStep("upload");
      else if (id === "quiz") setStep("quiz");
      else if (id === "matches") setStep("results");
    };
    return () => { delete window.__hmNav; };
  }, []);

  // Mobile variants exist for Upload, Results, Detail. Quiz + Matching fall
  // back to the desktop components, which get responsive CSS treatment.
  if (step === "quiz") return (
    <ScreenQuiz
      onContinue={() => setStep("upload")}
      onFindMatches={() => setStep("matching")}
    />
  );
  if (step === "upload") {
    if (isMobile) return (
      <MobileUpload
        onMatch={() => setStep("matching")}
        onQuiz={() => setStep("quiz")}
      />
    );
    return <ScreenUpload onMatch={() => setStep("matching")} onQuiz={() => setStep("quiz")} />;
  }
  if (step === "matching") return <ScreenMatching onDone={() => setStep("results")} />;
  if (step === "results") {
    if (isMobile) return (
      <MobileResults
        onOpenListing={(l) => { setListing(l); setStep("detail"); }}
        onRefine={() => setStep("upload")}
      />
    );
    return (
      <ScreenResults
        onOpenListing={(l) => { setListing(l); setStep("detail"); }}
        onRefine={() => setStep("upload")}
      />
    );
  }
  if (step === "detail") {
    if (isMobile) return (
      <MobileDetail
        listing={listing}
        onBack={() => setStep("results")}
        onMoreLikeThis={() => setStep("results")}
      />
    );
    return (
      <ScreenDetail
        listing={listing}
        onBack={() => setStep("results")}
        onMoreLikeThis={() => setStep("results")}
      />
    );
  }
  return null;
}

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