/* =========================================================
   APP — orchestrates loading → home → folder → notebook
   Includes a small Tweaks panel for color exploration.
   ========================================================= */
const { createRoot } = ReactDOM;
const APP_TWEAKS_DEFAULT = /*EDITMODE-BEGIN*/{
  "primaryPink": "#ff1f8f",
  "graininess": "med"
}/*EDITMODE-END*/;

function App() {
  const [phase, setPhase] = useState("boot"); // boot | leaving | home
  const [folder, setFolder] = useState(null);
  const [folderClosing, setFolderClosing] = useState(false);
  const [entry, setEntry] = useState(null);

  const [tweaks, setTweaks] = useState(APP_TWEAKS_DEFAULT);
  const [tweaksOpen, setTweaksOpen] = useState(false);

  const playIntro = () => {
    setEntry(null); setFolder(null); setFolderClosing(false);
    setPhase("boot");
    setTimeout(() => setPhase("leaving"), 4000);
    setTimeout(() => setPhase("home"), 4500);
  };
  // expose so anyone can replay the intro (e.g. brandmark click)
  window.__replayIntro = playIntro;

  // boot sequence
  useEffect(() => {
    const t1 = setTimeout(() => setPhase("leaving"), 4000);
    const t2 = setTimeout(() => setPhase("home"), 4500);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  // tweak host wiring
  useEffect(() => {
    const onMsg = (e) => {
      if (!e?.data) return;
      if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", onMsg);
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch {}
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const setTweak = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*"); } catch {}
  };

  // apply css variables for the pink color tweak
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--pink", tweaks.primaryPink);
  }, [tweaks.primaryPink]);

  // folder navigation
  const openFolder = (k) => setFolder(k);
  const closeFolder = () => {
    setFolderClosing(true);
    setTimeout(() => { setFolder(null); setFolderClosing(false); }, 360);
  };
  const pickEntry = (e) => setEntry(e);

  return (
    <>
      {(phase === "boot" || phase === "leaving") && (
        <LoadingScreen leaving={phase === "leaving"} />
      )}

      {phase === "home" && (
        <Home onOpenFolder={openFolder} tweaks={tweaks} />
      )}

      {folder && (
        <FolderList
          folderKey={folder}
          closing={folderClosing}
          onBack={closeFolder}
          onPickEntry={pickEntry}
        />
      )}

      {entry && (
        <Notebook entry={entry} onClose={() => setEntry(null)} />
      )}

      {tweaksOpen && (
        <div className="tweaks">
          <button className="close" onClick={() => {
            setTweaksOpen(false);
            try { window.parent.postMessage({ type: "__edit_mode_dismissed" }, "*"); } catch {}
          }}>×</button>
          <h4>// TWEAKS</h4>
          <div className="row">
            <span>pink</span>
            <div>
              {["#ff1f8f","#ff3aa0","#ff63b8","#e6007a"].map(c => (
                <button key={c}
                  className={"opt " + (tweaks.primaryPink === c ? "on" : "")}
                  style={{ background: c, color: "#fff", borderColor: "#000", width: 22, height: 22, padding: 0, marginRight: 4 }}
                  onClick={() => setTweak({ primaryPink: c })}
                  aria-label={c}
                ></button>
              ))}
            </div>
          </div>
          <div className="row">
            <span>grain</span>
            <div>
              {["low","med","high"].map(g => (
                <button key={g} className={"opt " + (tweaks.graininess === g ? "on" : "")} onClick={() => setTweak({ graininess: g })}>{g}</button>
              ))}
            </div>
          </div>
          <div className="row">
            <span>intro</span>
            <div>
              <button className="opt" onClick={() => window.__replayIntro && window.__replayIntro()}>replay ↻</button>
            </div>
          </div>
          <div style={{ marginTop: 8, fontSize: 10, opacity: .7 }}>tap pink swatches to retheme</div>
        </div>
      )}

      {/* dynamic style overrides for tweaks */}
      <style>{`
        ${tweaks.graininess === "low" ? ".bgphoto-wash, .loading-grain, .folder::after, .listoverlay .panel::after, .book .pages::after { opacity: .25 !important; }" : ""}
        ${tweaks.graininess === "high" ? ".bgphoto-wash { opacity: 1.2 !important; } .loading-grain { opacity: .6 !important; }" : ""}
      `}</style>
    </>
  );
}

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