/* ============================================================
   APP — routing, direction presets, tweaks
   ============================================================ */

// Each "direction" is a complete visual treatment. The slug drives
// the CSS in styles.css ([data-dir="quiet" | "editorial" | "dark"]).
const DIRECTIONS = {
  "Quiet Gallery": { slug: "quiet", indexNumbers: false },
  "Editorial Index": { slug: "editorial", indexNumbers: true },
  "Dark Room": { slug: "dark", indexNumbers: true }
};

const ACCENTS = ["#b0673c", "#9a5b3f", "#7d7a45", "#8a5a6e"];
// Background tones for the light directions (Quiet / Editorial).
const BGS = ["#e3e1db", "#ebe9e3", "#f1eee7", "#d8d4cc"];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "Quiet Gallery",
  "accent": "#b0673c",
  "bg": "#e3e1db",
  "columns": 3,
  "gap": 10,
  "showCaptions": true,
  "name": "Mauricio Chigutti",
  "motto": "Get lost, you will find the way."
}/*EDITMODE-END*/;

function parseHash() {
  const h = (location.hash || "").replace(/^#\/?/, "");
  const parts = h.split("/").filter(Boolean);
  if (parts[0] === "c" && parts[1]) return { page: "gallery", id: parts[1] };
  if (parts[0] === "about") return { page: "about" };
  return { page: "home" };
}
function routeToHash(r) {
  if (r.page === "gallery") return "#/c/" + r.id;
  if (r.page === "about") return "#/about";
  return "#/home";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState(parseHash());
  const [lbIndex, setLbIndex] = useState(null);

  useEffect(() => {
    const onHash = () => { setRoute(parseHash()); setLbIndex(null); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = useCallback((r) => {
    location.hash = routeToHash(r);
    window.scrollTo(0, 0);
  }, []);

  const dirCfg = DIRECTIONS[t.direction] || DIRECTIONS["Quiet Gallery"];
  const slug = dirCfg.slug;
  const tt = { ...t, indexNumbers: dirCfg.indexNumbers };

  const collection =
    route.page === "gallery"
      ? window.SITE.collections.find((c) => c.id === route.id)
      : null;

  const rootStyle = { "--accent": t.accent };
  // The background tweak only applies to the light directions; Dark Room
  // keeps its own deep palette so text stays legible.
  if (slug !== "dark") rootStyle["--bg"] = t.bg;

  return (
    <div
      className="root"
      data-dir={slug}
      style={rootStyle}
    >
      {route.page !== "home" && <Nav dir={slug} route={route} go={go} />}

      <main className="main">
        {route.page === "home" && <Home dir={slug} go={go} t={tt} />}
        {route.page === "about" && <About dir={slug} go={go} t={tt} />}
        {route.page === "gallery" && collection && (
          <GalleryGrid collection={collection} t={tt} onOpen={setLbIndex} />
        )}
        {route.page === "gallery" && !collection && (
          <div className="empty">Collection not found.</div>
        )}
      </main>

      {collection && lbIndex != null && (
        <Lightbox
          collection={collection}
          index={lbIndex}
          setIndex={setLbIndex}
          onClose={() => setLbIndex(null)}
        />
      )}

      <TweaksPanel>
        <TweakSection label="Design direction" />
        <TweakSelect
          label="Direction"
          value={t.direction}
          options={Object.keys(DIRECTIONS)}
          onChange={(v) => setTweak("direction", v)}
        />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENTS}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakColor
          label="Background"
          value={t.bg}
          options={BGS}
          onChange={(v) => setTweak("bg", v)}
        />

        <TweakSection label="Grid" />
        <TweakRadio
          label="Columns"
          value={String(t.columns)}
          options={["2", "3", "4"]}
          onChange={(v) => setTweak("columns", Number(v))}
        />
        <TweakSlider
          label="Gap"
          value={t.gap}
          min={0}
          max={32}
          unit="px"
          onChange={(v) => setTweak("gap", v)}
        />
        <TweakToggle
          label="Hover captions"
          value={t.showCaptions}
          onChange={(v) => setTweak("showCaptions", v)}
        />

        <TweakSection label="Words" />
        <TweakText
          label="Name"
          value={t.name}
          onChange={(v) => setTweak("name", v)}
        />
        <TweakText
          label="Motto"
          value={t.motto}
          onChange={(v) => setTweak("motto", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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