// =============================================================
// App — top-level shell + routing + Supabase boot gate
// =============================================================

const useStored = (key, defaultVal) => {
  const [v, setV] = useState(() => {
    const cached = window.xm.store.get(key, undefined);
    return cached === undefined || cached === null ? defaultVal : cached;
  });
  useEffect(() => {
    return window.xm.store.subscribe(key, (next) => setV(next));
  }, [key]);
  const set = (next) => {
    const value = typeof next === "function" ? next(v) : next;
    setV(value);
    window.xm.store.set(key, value);
  };
  return [v, set];
};

// Loading splash — soft butter screen while we hydrate from Supabase.
const BootSplash = ({ error }) => (
  <div style={{
    position: "fixed", inset: 0,
    background: "radial-gradient(60% 50% at 50% 40%, #FFEFC9 0%, #FFF8DD 70%)",
    display: "flex", alignItems: "center", justifyContent: "center",
    flexDirection: "column", gap: 14, zIndex: 1000,
  }}>
    <img src="../assets/app-icon.svg" style={{ width: 96, height: 96, animation: "xm-pulse-soft 1.6s ease-in-out infinite" }} alt=""/>
    <div style={{ font: "600 16px 'Jiangcheng Yuan', 'PingFang SC', sans-serif", color: "#6B4A2E", letterSpacing: "0.04em" }}>
      {error ? "连不上小宇宙了，刷新看看？" : "正在打开我们的小宇宙……"}
    </div>
    <style>{`@keyframes xm-pulse-soft { 0%,100% { transform: scale(1) } 50% { transform: scale(1.07) } }`}</style>
  </div>
);

const App = () => {
  const [page, setPage] = useState("home");
  const [settings, setSettings] = useStored("settings", { nickname: "宝贝", myName: "我", togetherDate: window.xm.util.ymd(new Date()), keyDates: [] });
  const [photos, setPhotos] = useStored("photos", []);
  const [promises, setPromises] = useStored("promises", []);
  const [stories, setStories] = useStored("stories", []);
  const [showSettings, setShowSettings] = useState(false);
  const [photoOpen, setPhotoOpen] = useState(null);
  const [confettiTrig, setConfettiTrig] = useState(0);
  const [toast, setToast] = useState(null);

  const fireConfetti = (text) => {
    setConfettiTrig(t => t + 1);
    if (text) {
      setToast(text);
      setTimeout(() => setToast(null), 2400);
    }
  };

  const pages = {
    home:     <HomePage settings={settings} photos={photos} promises={promises} stories={stories} onNav={setPage} onPhotoOpen={setPhotoOpen}/>,
    album:    <AlbumPage photos={photos} onChange={setPhotos} settings={settings} onPhotoOpen={setPhotoOpen}/>,
    promises: <PromisesPage promises={promises} onChange={setPromises} onConfetti={() => fireConfetti("已经兑现啦 ✨")}/>,
    stories:  <StoriesPage stories={stories} onChange={setStories} settings={settings}/>,
  };

  return (
    <div style={{ display: "flex", minHeight: "100vh", position: "relative" }}>
      <FloatingMotifs/>
      <Sidebar active={page} onNav={setPage} onSettings={() => setShowSettings(true)} settings={settings}/>
      <main style={{ flex: 1, padding: "32px 40px 80px", maxWidth: 1180, margin: "0 auto", position: "relative", zIndex: 1, minWidth: 0 }}>
        {pages[page]}
      </main>
      <SettingsModal open={showSettings} onClose={() => setShowSettings(false)} settings={settings} onChange={setSettings}/>
      <PhotoDetail photo={photoOpen} photos={photos} onClose={setPhotoOpen} onChange={setPhotos} settings={settings}/>
      <ConfettiBurst trigger={confettiTrig}/>
      {toast && <div style={{ position: "fixed", left: "50%", bottom: 40, transform: "translateX(-50%)", zIndex: 400, animation: "toastIn 280ms cubic-bezier(0.34,1.56,0.64,1)" }}>
        <Toast tone="success">{toast}</Toast>
      </div>}
      <style>{`@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }`}</style>
    </div>
  );
};

// Boot gate: render splash until Supabase has hydrated the cache.
const Root = () => {
  const [ready, setReady] = useState(false);
  const [error, setError] = useState(false);
  useEffect(() => {
    window.xm.ready.then((ok) => { ok ? setReady(true) : setError(true); });
  }, []);
  if (!ready) return <BootSplash error={error}/>;
  return <App/>;
};

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