/* App — top bar, tab router, shared state (sessions + tweaks) */
const { useState, useEffect, useMemo } = React;

function App() {
  const PF = window.PulseFloor;
  const { useStored, TrainerTab, FloorTab, FoodsTab, StatsTab } = window;

  // ---- Tweaks ----
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accentTheme": "cyan-amber",
    "pace": 1,
    "haptics": true,
    "showTimeline": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent theme via CSS vars
  useEffect(() => {
    const root = document.documentElement;
    const palettes = {
      "cyan-amber":   ["oklch(0.78 0.13 200)", "oklch(0.78 0.13 60)"],
      "violet-lime":  ["oklch(0.74 0.16 295)", "oklch(0.84 0.16 130)"],
      "rose-teal":    ["oklch(0.76 0.14 15)",  "oklch(0.78 0.10 185)"],
      "mono":         ["oklch(0.88 0.02 250)", "oklch(0.65 0.02 250)"],
    };
    const [a, b] = palettes[t.accentTheme] || palettes["cyan-amber"];
    root.style.setProperty("--accent", a);
    root.style.setProperty("--accent-2", b);
  }, [t.accentTheme]);

  // ---- Shared state ----
  const today = useMemo(() => new Date(), []);
  const todayKey = useMemo(() => String(PF.dayIndex(today)), [today]);

  const [tab, setTab] = useState("train");
  const [sessions, setSessions] = useStored("pf.sessions", []); // [{day, ts, patternId, dur}]

  // Streak — derived from sessions, shown in topbar + stats
  const streak = useMemo(() => {
    if (sessions.length === 0) return 0;
    const days = new Set(sessions.map((s) => s.day));
    let d = PF.dayIndex(today);
    let count = 0;
    // If they haven't done today yet, start from yesterday so streak doesn't drop mid-day
    if (!days.has(String(d))) d -= 1;
    while (days.has(String(d))) { count++; d -= 1; }
    return count;
  }, [sessions, today]);

  const handleSessionComplete = (p, dur) => {
    setSessions([...sessions, { day: todayKey, ts: Date.now(), patternId: p.id, dur }]);
  };

  return (
    <div className="app">
      <div className="topbar">
        <div className="brand">
          <div className="brand-mark"></div>
          <div className="brand-name">pulsefloor <span>·  daily</span></div>
        </div>
        <div className="streak-pill">
          <span className="dot"></span>
          <span><b>{streak}</b> day streak</span>
        </div>
      </div>

      {tab === "train" && (
        <TrainerTab
          today={today}
          todayKey={todayKey}
          sessions={sessions}
          onSessionComplete={handleSessionComplete}
          pace={t.pace}
          hapticsOn={t.haptics}
        />
      )}

      {tab === "floor" && <FloorTab today={today} todayKey={todayKey} />}

      {tab === "foods" && <FoodsTab today={today} todayKey={todayKey} />}

      {tab === "progress" && (
        <StatsTab
          today={today}
          todayKey={todayKey}
          sessions={sessions}
          setSessions={setSessions}
          streak={streak}
        />
      )}

      <nav className="tabbar">
        <button className={tab === "train" ? "active" : ""} onClick={() => setTab("train")}>Train</button>
        <button className={tab === "floor" ? "active" : ""} onClick={() => setTab("floor")}>Floor</button>
        <button className={tab === "foods" ? "active" : ""} onClick={() => setTab("foods")}>Foods</button>
        <button className={tab === "progress" ? "active" : ""} onClick={() => setTab("progress")}>Stats</button>
      </nav>

      <TweaksPanel>
        <TweakSection title="Look">
          <TweakSelect
            label="Accent palette"
            value={t.accentTheme}
            onChange={(v) => setTweak("accentTheme", v)}
            options={[
              { value: "cyan-amber",  label: "Cyan + Amber" },
              { value: "violet-lime", label: "Violet + Lime" },
              { value: "rose-teal",   label: "Rose + Teal" },
              { value: "mono",        label: "Mono" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Trainer">
          <TweakSlider
            label="Pace"
            min={0.5} max={2} step={0.1}
            value={t.pace}
            onChange={(v) => setTweak("pace", v)}
            format={(v) => `${v.toFixed(1)}×`}
          />
          <TweakToggle
            label="Haptic pulse on phase change"
            checked={t.haptics}
            onChange={(v) => setTweak("haptics", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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