/* TrainerTab — Train screen: orb timer + pattern picker */
(function () {
  const { useEffect, useMemo } = React;

  function TrainerTab({ today, todayKey, sessions, onSessionComplete, pace, hapticsOn }) {
    const useStored = window.useStored;
    const Trainer = window.Trainer;
    const PatternRow = window.PatternRow;
    const PF = window.PulseFloor;

    const todaySessionsCount = useMemo(
      () => sessions.filter((s) => s.day === todayKey).length,
      [sessions, todayKey]
    );

    const [selectedId, setSelectedId] = useStored("pf.selectedPattern", "steady");
    const [randomSeed, setRandomSeed] = useStored(
      "pf.randomSeed",
      { day: todayKey, seed: Math.floor(Math.random() * 1e9) }
    );

    useEffect(() => {
      if (randomSeed.day !== todayKey) {
        setRandomSeed({ day: todayKey, seed: Math.floor(Math.random() * 1e9) });
      }
    }, [todayKey]);

    const randomPattern = useMemo(
      () => PF.generateRandomPattern(randomSeed.seed),
      [randomSeed.seed]
    );

    const allPatterns = useMemo(() => [...PF.PRESETS, randomPattern], [randomPattern]);
    const pattern = useMemo(
      () => allPatterns.find((p) => p.id === selectedId) || allPatterns[0],
      [allPatterns, selectedId]
    );

    const regenerateRandom = () => {
      setRandomSeed({ day: todayKey, seed: Math.floor(Math.random() * 1e9) });
    };

    return (
      <div className="fade-in">
        <div className="section-head">
          <h2>Today's session</h2>
          <span className="meta">{todaySessionsCount} done today</span>
        </div>
        <Trainer
          pattern={pattern}
          onSessionComplete={onSessionComplete}
          pace={pace}
          hapticsOn={hapticsOn}
        />

        <div style={{height: 22}}></div>
        <div className="section-head">
          <h2 style={{fontSize: 18}}>Patterns</h2>
          <span className="meta">{PF.PRESETS.length} presets + random</span>
        </div>
        <div className="pattern-list">
          {PF.PRESETS.map((p) => (
            <PatternRow
              key={p.id}
              p={p}
              selected={selectedId === p.id}
              onSelect={() => setSelectedId(p.id)}
            />
          ))}
          <PatternRow
            p={randomPattern}
            selected={selectedId === "random"}
            onSelect={() => setSelectedId("random")}
          />
          <button
            className="btn ghost"
            style={{padding: "12px", fontSize: 13, justifyContent: "center", color: "var(--accent)"}}
            onClick={regenerateRandom}
          >
            ↻ Regenerate today's random pattern
          </button>
        </div>
      </div>
    );
  }

  window.TrainerTab = TrainerTab;
})();