// app.jsx — Rbac46 production shell
const { useState, useEffect, useCallback } = React;

// ── Colour palettes ──────────────────────────────────────────
const PALETTES = {
  "#1f3a8a": {
    bg: "#eeece2", paper: "#faf6e7", ink: "#152043", inkMuted: "#5d6b8a",
    border: "#d9d2b6", accent: "#b8893a", accentDark: "#7e5d20", accentTint: "#f1e1b5",
    sage: "#1f3a8a",
  },
  "#b94a2c": {
    bg: "#f3ede1", paper: "#fbf7ed", ink: "#2a221c", inkMuted: "#7b6f60",
    border: "#e6dccc", accent: "#b94a2c", accentDark: "#7e2f1a", accentTint: "#f3d9cb",
    sage: "#6b7a55",
  },
  "#2f5d3a": {
    bg: "#f1efe5", paper: "#fbfaf2", ink: "#1f2620", inkMuted: "#6e7770",
    border: "#dfdcc8", accent: "#2f5d3a", accentDark: "#1d3a23", accentTint: "#d6e3d6",
    sage: "#9e8b53",
  },
};

function applyPalette(p) {
  const r = document.documentElement;
  r.style.setProperty("--bg",          p.bg);
  r.style.setProperty("--paper",       p.paper);
  r.style.setProperty("--ink",         p.ink);
  r.style.setProperty("--ink-muted",   p.inkMuted);
  r.style.setProperty("--border",      p.border);
  r.style.setProperty("--accent",      p.accent);
  r.style.setProperty("--accent-dark", p.accentDark);
  r.style.setProperty("--accent-tint", p.accentTint);
  r.style.setProperty("--sage",        p.sage);
}

// ── App ──────────────────────────────────────────────────────
function App() {
  const [route, setRoute]   = useState({ screen: "splash", arg: null });
  const [sepia, setSepia]   = useState(false);
  const [thenNow, setThenNow] = useState("now");
  const [palette, setPalette] = useState("#1f3a8a");

  useEffect(() => {
    applyPalette(PALETTES[palette] || PALETTES["#1f3a8a"]);
  }, [palette]);

  useEffect(() => {
    window.__setThenNow = (v) => setThenNow(v);
  }, []);

  const go = useCallback((screen, arg = null) => setRoute({ screen, arg }), []);

  const props = { go, sepia, thenNow };

  const renderScreen = () => {
    switch (route.screen) {
      case "splash":      return <SplashScreen onEnter={() => go("home")}/>;
      case "home":        return <HomeScreen {...props}/>;
      case "directory":   return <DirectoryScreen {...props}/>;
      case "profile":     return <ProfileScreen id={route.arg} {...props}/>;
      case "gallery":     return <GalleryScreen {...props}/>;
      case "me":          return <MeScreen {...props} palette={palette} onPalette={setPalette} sepia={sepia} onSepia={setSepia}/>;
      case "compose":     return <ComposeScreen go={go}/>;
      case "meetups":     return <MeetupsScreen {...props}/>;
      case "meetup":      return <MeetupDetailScreen id={route.arg} {...props}/>;
      case "createMeetup":return <CreateMeetupScreen go={go}/>;
      default:            return <HomeScreen {...props}/>;
    }
  };

  const showNav = !["splash", "compose", "createMeetup"].includes(route.screen);

  return (
    <div style={{
      width: "100%", maxWidth: 430,
      height: "100dvh",
      display: "flex", flexDirection: "column",
      background: "var(--bg)",
      position: "relative", overflow: "hidden",
      boxShadow: "0 0 80px rgba(0,0,0,0.25)",
    }}>
      {/* scrollable content area */}
      <div style={{ flex: 1, overflowY: "auto", overflowX: "hidden", position: "relative", WebkitOverflowScrolling: "touch" }}>
        <div
          key={route.screen + "-" + (route.arg || "")}
          style={{
            minHeight: "100%", display: "flex", flexDirection: "column",
            animation: "screenIn .3s cubic-bezier(.2,.8,.2,1)",
          }}
        >
          {renderScreen()}
        </div>
      </div>

      {/* bottom navigation */}
      {showNav && <BottomNav route={route.screen} go={go}/>}
    </div>
  );
}

// ── Bottom Navigation ─────────────────────────────────────────
function BottomNav({ route, go }) {
  const items = [
    ["home",      "หน้าหลัก", "home"],
    ["directory", "ทำเนียบ",  "book"],
    ["meetups",   "นัดพบ",    "bell"],
    ["gallery",   "คลังภาพ",  "photo"],
    ["me",        "ฉัน",      "user"],
  ];
  return (
    <div style={{
      paddingBottom: "max(var(--safe-b), 8px)",
      padding: "8px 6px max(var(--safe-b), 16px)",
      background: "rgba(var(--paper-rgb, 251,247,237), 0.92)",
      backdropFilter: "blur(18px) saturate(160%)",
      WebkitBackdropFilter: "blur(18px) saturate(160%)",
      borderTop: "1px solid var(--border)",
      display: "flex", justifyContent: "space-around", alignItems: "center",
      flexShrink: 0,
    }}>
      {items.map(([id, label, icon]) => {
        const active = route === id || (id === "directory" && route === "profile");
        return (
          <button key={id} onClick={() => go(id)} style={{
            background: "none", border: 0, cursor: "pointer", padding: "6px 10px",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 3,
            color: active ? "var(--accent)" : "var(--ink-muted)",
            minWidth: 52,
          }}>
            <Icon name={icon} size={22} thick={active ? 2 : 1.5}/>
            <div style={{ fontFamily: "var(--ui)", fontSize: 10, fontWeight: active ? 600 : 400, letterSpacing: 0.3 }}>{label}</div>
          </button>
        );
      })}
    </div>
  );
}

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