// Root app — Nexus Home
const { useState: useStateApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B7553A",
  "syncMode": "auto"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const today = new Date("2026-05-20T14:32:18-07:00");
  const [selected, setSelected] = useStateApp(today);

  // Apply accent live
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    // Recompute slightly darker ink variant for the accent
    const lighten = (hex, amt) => {
      const n = parseInt(hex.slice(1), 16);
      let r = (n >> 16) + amt, g = ((n >> 8) & 0xff) + amt, b = (n & 0xff) + amt;
      r = Math.max(0, Math.min(255, r));
      g = Math.max(0, Math.min(255, g));
      b = Math.max(0, Math.min(255, b));
      return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
    };
    document.documentElement.style.setProperty("--accent-ink", lighten(t.accent, -36));
  }, [t.accent]);

  return (
    <div className="app">
      <Sidebar active="home"/>
      <div className="main">
        <Topbar syncMode={t.syncMode}/>
        <div className="content">

          <div className="cal-block">
            <div>
              <Calendar today={today} selected={selected} onSelect={setSelected}/>
            </div>
            <DayPanel date={selected}/>
          </div>

          <RecentUpdates/>

        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Look">
          <TweakColor
            label="Accent"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#B7553A", "#1F3D5C", "#2D6B3D", "#6B4FA8", "#14171C"]}
          />
        </TweakSection>
        <TweakSection title="Sync state">
          <TweakRadio
            label="Mode"
            value={t.syncMode}
            options={[
              { label: "Auto", value: "auto" },
              { label: "Live", value: "live" },
              { label: "Off-hours", value: "off" },
            ]}
            onChange={(v) => setTweak("syncMode", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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