/* FloorTab — Floor screen: 3 daily pelvic-floor exercises */
(function () {
  const { useMemo } = React;

  function FloorTab({ today, todayKey }) {
    const useStored = window.useStored;
    const ExerciseCard = window.ExerciseCard;
    const PF = window.PulseFloor;

    const [exerciseDone, setExerciseDone] = useStored("pf.exDone", {});
    const todayExDone = exerciseDone[todayKey] || {};

    const rotation = useMemo(() => PF.dailyRotation(today), [todayKey]);

    const toggleEx = (id) => {
      setExerciseDone({
        ...exerciseDone,
        [todayKey]: { ...(exerciseDone[todayKey] || {}), [id]: !todayExDone[id] },
      });
    };

    return (
      <div className="fade-in">
        <div className="section-head">
          <h2>Floor work</h2>
          <span className="meta">no repeats day-to-day</span>
        </div>

        <div className="day-banner">
          <div>
            <div className="d-day">{today.toLocaleDateString("en-US", { weekday: "long" })}</div>
            <div className="d-date">{today.toLocaleDateString("en-US", { month: "short", day: "numeric" })}</div>
          </div>
          <div className="d-rotation">
            Rotation #{((PF.dayIndex(today)) % 999).toString().padStart(3, "0")}
            <b>{rotation.length} moves</b>
          </div>
        </div>

        <div style={{display: "grid", gap: 10}}>
          {rotation.map((ex, i) => (
            <ExerciseCard
              key={ex.id}
              ex={ex}
              num={i + 1}
              done={!!todayExDone[ex.id]}
              onToggle={() => toggleEx(ex.id)}
            />
          ))}
        </div>

        <div style={{marginTop: 16, padding: "14px 16px", background: "var(--surface)", border: "1px dashed var(--border-strong)", borderRadius: "var(--radius)", fontSize: 12, color: "var(--text-dim)", lineHeight: 1.6}}>
          <b style={{color: "var(--text)", display:"block", marginBottom: 4}}>Why this matters</b>
          Pelvic floor strength relies on the surrounding hips, glutes, and deep core. These 3 are picked daily from a pool of <b style={{color: "var(--text)"}}>15 exercises</b>. Nothing repeats more than twice in any 7-day window — so the whole week trains a balanced spread without overloading the same muscle.
        </div>
      </div>
    );
  }

  window.FloorTab = FloorTab;
})();