utils/workout_components.py

"""
utils/workout_components.py — Reusable UI components for workout pages.
Includes: countdown timer, safety cautions, pre/post stretch video embeds.
"""

import streamlit as st
import json, os

# ══════════════════════════════════════════════════════════════════════════════
# SAFETY CAUTIONS
# ══════════════════════════════════════════════════════════════════════════════

PRE_WORKOUT_CAUTIONS = [
    ("🔥", "Always warm up for at least 5 minutes before starting"),
    ("💧", "Drink water before you begin — stay hydrated throughout"),
    ("🩺", "If you have any injury or pain, consult a doctor first"),
    ("👟", "Wear proper footwear and workout on a non-slip surface"),
    ("😴", "Never train on no sleep — rest is part of the programme"),
    ("🧘", "Take deep breaths — controlled breathing improves performance"),
]

DURING_WORKOUT_CAUTIONS = [
    ("✅", "Maintain proper form — quality over quantity always"),
    ("🛑", "Stop immediately if you feel sharp pain or dizziness"),
    ("💧", "Sip water between sets — do not chug large amounts"),
    ("⏱️", "Respect your rest periods — they are part of the programme"),
    ("🔄", "Control the movement in both directions (concentric + eccentric)"),
    ("📏", "Use full range of motion unless instructed otherwise"),
]

POST_WORKOUT_CAUTIONS = [
    ("🧊", "Cool down for 5–10 minutes — never stop suddenly"),
    ("🥗", "Eat a protein + carb meal within 45 minutes of finishing"),
    ("💧", "Rehydrate — drink at least 500ml water post workout"),
    ("😴", "Get 7–9 hours of sleep for muscle recovery"),
    ("📅", "Log your workout — tracking drives progress"),
    ("🚿", "Shower after workout to prevent skin irritation"),
]


def render_safety_cautions(phase="pre"):
    """
    Render safety caution cards.
    phase: 'pre' | 'during' | 'post'
    """
    cautions_map = {
        "pre":    (PRE_WORKOUT_CAUTIONS,    "⚠️ PRE-WORKOUT SAFETY CAUTIONS",    "rgba(251,191,36,0.12)",  "rgba(251,191,36,0.30)"),
        "during": (DURING_WORKOUT_CAUTIONS, "🛡️ DURING WORKOUT — STAY SAFE",      "rgba(239,68,68,0.10)",   "rgba(239,68,68,0.28)"),
        "post":   (POST_WORKOUT_CAUTIONS,   "✅ POST-WORKOUT RECOVERY TIPS",       "rgba(34,197,94,0.10)",   "rgba(34,197,94,0.28)"),
    }

    cautions, title, bg, border = cautions_map.get(phase, cautions_map["pre"])

    items_html = "".join(
        f"""<div style='display:flex;align-items:flex-start;gap:12px;
                        padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.04)'>
              <span style='font-size:1.1rem;flex-shrink:0'>{icon}</span>
              <span style='font-size:0.83rem;color:rgba(255,255,255,0.75);
                           line-height:1.5'>{text}</span>
            </div>"""
        for icon, text in cautions
    )

    st.markdown(f"""
    <div style='background:{bg};border:1px solid {border};
                border-radius:14px;padding:20px 24px;margin:16px 0'>
      <div style='font-size:0.60rem;font-weight:700;letter-spacing:3px;
                  text-transform:uppercase;color:rgba(255,255,255,0.60);
                  margin-bottom:14px'>{title}</div>
      {items_html}
    </div>
    """, unsafe_allow_html=True)


# ══════════════════════════════════════════════════════════════════════════════
# COUNTDOWN TIMER
# ══════════════════════════════════════════════════════════════════════════════

def render_exercise_timer(exercise_name, seconds, timer_key):
    """
    Render a JavaScript countdown timer for an exercise.

    exercise_name : display name of the exercise
    seconds       : timer duration in seconds
    timer_key     : unique key to avoid conflicts between multiple timers
    """
    mins = seconds // 60
    secs = seconds % 60
    display_time = f"{mins:02d}:{secs:02d}" if mins > 0 else f"{seconds}s"

    st.markdown(f"""
    <div id="timer-container-{timer_key}" style='
        background:rgba(10,6,4,0.70);
        border:1.5px solid rgba(229,9,20,0.35);
        border-radius:16px;padding:24px 20px;
        text-align:center;margin:12px 0;
        backdrop-filter:blur(12px);
        box-shadow:0 0 20px rgba(229,9,20,0.15);
        position:relative;overflow:hidden;'>

      <!-- red top line -->
      <div style='position:absolute;top:0;left:0;right:0;height:2px;
                  background:linear-gradient(90deg,transparent,
                  rgba(229,9,20,0.60),transparent)'></div>

      <!-- Exercise label -->
      <div style='font-size:0.60rem;font-weight:700;letter-spacing:3px;
                  text-transform:uppercase;color:rgba(229,9,20,0.70);
                  margin-bottom:8px'>⏱ TIMER</div>
      <div style='font-size:0.92rem;color:rgba(255,255,255,0.65);
                  margin-bottom:12px;font-weight:500'>{exercise_name}</div>

      <!-- Timer display -->
      <div id="timer-display-{timer_key}" style='
          font-family:Bebas Neue,sans-serif;
          font-size:3.8rem;color:#E50914;
          letter-spacing:4px;line-height:1;
          text-shadow:0 0 30px rgba(229,9,20,0.55);
          margin-bottom:16px;
          transition:color 0.3s;'>{display_time}</div>

      <!-- Progress ring (CSS circle) -->
      <div style='margin:0 auto 16px;width:80px;height:6px;
                  background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden'>
        <div id="timer-bar-{timer_key}" style='width:100%;height:100%;
             background:linear-gradient(90deg,#E50914,#ff4444);
             border-radius:3px;transition:width 0.9s linear'></div>
      </div>

      <!-- Buttons -->
      <div style='display:flex;gap:10px;justify-content:center;flex-wrap:wrap'>
        <button onclick="startTimer_{timer_key}()" id="btn-start-{timer_key}"
          style='background:linear-gradient(135deg,#E50914,#c0000c);
                 border:none;color:white;padding:10px 24px;border-radius:8px;
                 cursor:pointer;font-size:0.85rem;font-weight:700;
                 letter-spacing:1px;text-transform:uppercase;
                 box-shadow:0 0 16px rgba(229,9,20,0.45);
                 transition:all 0.2s'>▶ START</button>
        <button onclick="pauseTimer_{timer_key}()" id="btn-pause-{timer_key}"
          style='background:rgba(255,255,255,0.08);
                 border:1px solid rgba(255,255,255,0.20);
                 color:rgba(255,255,255,0.70);padding:10px 20px;
                 border-radius:8px;cursor:pointer;font-size:0.85rem;
                 font-weight:700;letter-spacing:1px;text-transform:uppercase;
                 transition:all 0.2s'>⏸ PAUSE</button>
        <button onclick="resetTimer_{timer_key}()" id="btn-reset-{timer_key}"
          style='background:rgba(255,255,255,0.05);
                 border:1px solid rgba(255,255,255,0.12);
                 color:rgba(255,255,255,0.50);padding:10px 18px;
                 border-radius:8px;cursor:pointer;font-size:0.85rem;
                 font-weight:700;letter-spacing:1px;text-transform:uppercase'>↺ RESET</button>
      </div>

      <!-- Done message (hidden) -->
      <div id="timer-done-{timer_key}" style='display:none;margin-top:14px;
           font-family:Bebas Neue,sans-serif;font-size:1.6rem;
           letter-spacing:3px;color:#22c55e;
           text-shadow:0 0 20px rgba(34,197,94,0.55)'>
        ✓ TIME'S UP! WELL DONE!
      </div>
    </div>

    <script>
    (function() {{
      const TOTAL_{timer_key} = {seconds};
      let timeLeft_{timer_key} = TOTAL_{timer_key};
      let running_{timer_key} = false;
      let interval_{timer_key} = null;

      function formatTime(s) {{
        const m = Math.floor(s / 60);
        const sec = s % 60;
        if (m > 0) return String(m).padStart(2,'0') + ':' + String(sec).padStart(2,'0');
        return s + 's';
      }}

      function updateDisplay() {{
        const disp = document.getElementById('timer-display-{timer_key}');
        const bar  = document.getElementById('timer-bar-{timer_key}');
        const done = document.getElementById('timer-done-{timer_key}');
        if (!disp) return;

        const pct = (timeLeft_{timer_key} / TOTAL_{timer_key}) * 100;
        disp.textContent = formatTime(timeLeft_{timer_key});
        if (bar) bar.style.width = pct + '%';

        // Change color when low
        if (timeLeft_{timer_key} <= 5) {{
          disp.style.color = '#ef4444';
          disp.style.textShadow = '0 0 40px rgba(239,68,68,0.80)';
        }} else if (timeLeft_{timer_key} <= 10) {{
          disp.style.color = '#fbbf24';
          disp.style.textShadow = '0 0 30px rgba(251,191,36,0.60)';
        }}

        if (timeLeft_{timer_key} <= 0) {{
          clearInterval(interval_{timer_key});
          running_{timer_key} = false;
          disp.textContent = '✓';
          disp.style.color = '#22c55e';
          disp.style.textShadow = '0 0 30px rgba(34,197,94,0.70)';
          if (bar) bar.style.width = '0%';
          if (done) done.style.display = 'block';
          // Play beep if available
          try {{
            const ctx = new (window.AudioContext || window.webkitAudioContext)();
            [880, 1100, 1320].forEach((freq, i) => {{
              const osc = ctx.createOscillator();
              const gain = ctx.createGain();
              osc.connect(gain); gain.connect(ctx.destination);
              osc.frequency.value = freq;
              gain.gain.setValueAtTime(0.3, ctx.currentTime + i*0.18);
              gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + i*0.18 + 0.3);
              osc.start(ctx.currentTime + i*0.18);
              osc.stop(ctx.currentTime + i*0.18 + 0.3);
            }});
          }} catch(e) {{}}
        }}
      }}

      window['startTimer_{timer_key}'] = function() {{
        if (running_{timer_key} || timeLeft_{timer_key} <= 0) return;
        running_{timer_key} = true;
        const done = document.getElementById('timer-done-{timer_key}');
        if (done) done.style.display = 'none';
        interval_{timer_key} = setInterval(() => {{
          timeLeft_{timer_key}--;
          updateDisplay();
        }}, 1000);
      }};

      window['pauseTimer_{timer_key}'] = function() {{
        if (!running_{timer_key}) return;
        clearInterval(interval_{timer_key});
        running_{timer_key} = false;
      }};

      window['resetTimer_{timer_key}'] = function() {{
        clearInterval(interval_{timer_key});
        running_{timer_key} = false;
        timeLeft_{timer_key} = TOTAL_{timer_key};
        const disp = document.getElementById('timer-display-{timer_key}');
        const bar  = document.getElementById('timer-bar-{timer_key}');
        const done = document.getElementById('timer-done-{timer_key}');
        if (disp) {{ disp.textContent = formatTime(TOTAL_{timer_key}); disp.style.color = '#E50914'; disp.style.textShadow = '0 0 30px rgba(229,9,20,0.55)'; }}
        if (bar)  bar.style.width = '100%';
        if (done) done.style.display = 'none';
      }};
    }})();
    </script>
    """, unsafe_allow_html=True)


# ══════════════════════════════════════════════════════════════════════════════
# STRETCH VIDEO EMBEDS
# ══════════════════════════════════════════════════════════════════════════════

def _load_stretch_videos():
    """Load stretch video data from JSON file."""
    paths = [
        "data/stretch_videos.json",
        os.path.join(os.path.dirname(__file__), "..", "data", "stretch_videos.json"),
    ]
    for p in paths:
        if os.path.exists(p):
            try:
                return json.load(open(p))
            except Exception:
                pass
    # Fallback defaults
    return {
        "pre_workout": [
            {"name": "Full Body Warm-Up", "duration": "5 min",
             "url": "https://www.youtube.com/embed/HDiHMHBpHBQ"},
        ],
        "post_workout": [
            {"name": "Full Body Cool Down", "duration": "5 min",
             "url": "https://www.youtube.com/embed/qULTwquOuT4"},
        ]
    }


def render_stretch_videos(phase="pre"):
    """
    Render embedded YouTube stretch/warm-up videos.
    phase: 'pre' | 'post'
    """
    data = _load_stretch_videos()
    key  = "pre_workout" if phase == "pre" else "post_workout"
    videos = data.get(key, [])

    if not videos:
        return

    title = "🔥 PRE-WORKOUT WARM-UP VIDEOS" if phase == "pre" else "🧊 POST-WORKOUT COOL-DOWN VIDEOS"
    border_color = "rgba(251,191,36,0.30)" if phase == "pre" else "rgba(34,197,94,0.28)"
    header_color = "#fbbf24" if phase == "pre" else "#22c55e"

    st.markdown(f"""
    <div style='border-top:1px solid {border_color};padding-top:20px;margin-top:20px'>
      <div style='font-size:0.60rem;font-weight:700;letter-spacing:3px;
                  text-transform:uppercase;color:{header_color};
                  margin-bottom:16px;display:flex;align-items:center;gap:8px'>
        <span style='display:block;width:18px;height:1.5px;
                     background:{header_color};border-radius:1px'></span>
        {title}
      </div>
    </div>
    """, unsafe_allow_html=True)

    cols = st.columns(min(len(videos), 3))
    for col, video in zip(cols, videos):
        with col:
            st.markdown(f"""
            <div style='background:rgba(10,6,4,0.60);
                        border:1px solid rgba(255,255,255,0.08);
                        border-radius:12px;overflow:hidden;margin-bottom:12px'>
              <div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden'>
                <iframe src="{video['url']}"
                  style='position:absolute;top:0;left:0;width:100%;height:100%;border:none'
                  allow="accelerometer;autoplay;clipboard-write;encrypted-media;
                         gyroscope;picture-in-picture"
                  allowfullscreen></iframe>
              </div>
              <div style='padding:10px 14px'>
                <div style='font-size:0.82rem;font-weight:600;color:#fff;
                             margin-bottom:4px'>{video['name']}</div>
                <div style='font-size:0.70rem;color:rgba(255,255,255,0.40)'>
                  ⏱ {video['duration']}
                </div>
              </div>
            </div>
            """, unsafe_allow_html=True)


# ══════════════════════════════════════════════════════════════════════════════
# COMBINED WORKOUT DAY SECTION (pre-caution + timer per exercise + post-caution)
# ══════════════════════════════════════════════════════════════════════════════

def render_full_workout_day(day_data, day_num):
    """
    Render a complete workout day with:
    1. Pre-workout cautions
    2. Pre-workout stretch videos
    3. Exercise cards with individual timers
    4. During-workout cautions
    5. Post-workout stretch videos
    6. Post-workout cautions
    """
    exercises   = day_data.get("workout", [])
    pre_stretch = day_data.get("pre_stretch", [])
    post_stretch= day_data.get("post_stretch", [])
    muscle_grp  = day_data.get("muscle_group", "Full Body")

    # ── Day header ────────────────────────────────────────────────────────
    st.markdown(f"""
    <div style='display:flex;align-items:center;gap:12px;margin-bottom:20px'>
      <div style='font-family:Barlow Condensed,sans-serif;font-size:2.2rem;
                  font-weight:900;text-transform:uppercase;color:#fff'>
        Day {day_num}
        <span style='color:#E50914'>— {muscle_grp}</span>
      </div>
    </div>
    """, unsafe_allow_html=True)

    # ── 1. PRE-WORKOUT CAUTIONS ───────────────────────────────────────────
    with st.expander("⚠️ Pre-Workout Safety Cautions — Read Before Starting", expanded=False):
        render_safety_cautions("pre")

    # ── 2. PRE-WORKOUT STRETCH VIDEOS ────────────────────────────────────
    with st.expander("🔥 Warm-Up Videos — Watch Before Starting", expanded=False):
        if pre_stretch:
            # Use day-specific stretch videos if model provided them
            for stretch in pre_stretch:
                st.markdown(f"""
                <div style='display:flex;align-items:center;gap:12px;
                            padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05)'>
                  <span style='color:#fbbf24;font-size:1.1rem'>🔥</span>
                  <div>
                    <div style='font-size:0.88rem;color:#fff;font-weight:600'>
                      {stretch.get('name','Stretch')}</div>
                    <div style='font-size:0.72rem;color:rgba(255,255,255,0.42)'>
                      ⏱ {stretch.get('duration','30s')}</div>
                  </div>
                </div>
                """, unsafe_allow_html=True)
        render_stretch_videos("pre")

    st.markdown("<div style='height:8px'></div>", unsafe_allow_html=True)

    # ── 3. EXERCISES WITH TIMERS ──────────────────────────────────────────
    st.markdown("""
    <div style='font-size:0.62rem;font-weight:700;letter-spacing:3px;
                text-transform:uppercase;color:rgba(229,9,20,0.75);
                margin-bottom:16px;display:flex;align-items:center;gap:8px'>
      <span style='display:block;width:18px;height:1.5px;
                   background:#E50914;border-radius:1px'></span>
      💪 MAIN WORKOUT
    </div>
    """, unsafe_allow_html=True)

    EX_ICONS = ["🏋️","💪","🔄","⬆️","🦵","🤸","🏃","🚴","🧗","🥊","🏊","🤼"]

    for idx, ex in enumerate(exercises):
        name  = ex.get("name",  f"Exercise {idx+1}")
        sets  = ex.get("sets",  3)
        reps  = ex.get("reps",  "12")
        rest  = ex.get("rest",  "60s")
        timer = ex.get("timer", 60)
        notes = ex.get("notes", "Maintain proper form throughout")
        icon  = EX_ICONS[idx % len(EX_ICONS)]

        with st.expander(f"{icon} {name} — {sets} sets × {reps} reps", expanded=False):
            col_info, col_timer = st.columns([1.4, 1])

            with col_info:
                st.markdown(f"""
                <div style='background:rgba(10,6,4,0.55);
                            border:1px solid rgba(229,9,20,0.18);
                            border-radius:12px;padding:18px 20px;height:100%'>
                  <div style='font-size:0.60rem;font-weight:700;letter-spacing:2.5px;
                               text-transform:uppercase;
                               color:rgba(229,9,20,0.70);margin-bottom:12px'>
                    EXERCISE DETAILS
                  </div>
                  <div style='display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap'>
                    <div style='background:rgba(100,160,255,0.13);
                                border:1px solid rgba(100,160,255,0.24);
                                border-radius:8px;padding:8px 14px;text-align:center'>
                      <div style='font-size:1.3rem;font-weight:800;color:#93c5fd'>{sets}</div>
                      <div style='font-size:0.50rem;letter-spacing:1.5px;
                                  color:rgba(255,255,255,0.45)'>SETS</div>
                    </div>
                    <div style='background:rgba(100,230,180,0.11);
                                border:1px solid rgba(100,230,180,0.21);
                                border-radius:8px;padding:8px 14px;text-align:center'>
                      <div style='font-size:1.3rem;font-weight:800;color:#6ee7b7'>{reps}</div>
                      <div style='font-size:0.50rem;letter-spacing:1.5px;
                                  color:rgba(255,255,255,0.45)'>REPS</div>
                    </div>
                    <div style='background:rgba(255,180,80,0.11);
                                border:1px solid rgba(255,180,80,0.21);
                                border-radius:8px;padding:8px 14px;text-align:center'>
                      <div style='font-size:1.3rem;font-weight:800;color:#fdba74'>{rest}</div>
                      <div style='font-size:0.50rem;letter-spacing:1.5px;
                                  color:rgba(255,255,255,0.45)'>REST</div>
                    </div>
                  </div>
                  <div style='font-size:0.75rem;color:rgba(255,255,255,0.60);
                               line-height:1.6;border-top:1px solid rgba(255,255,255,0.07);
                               padding-top:10px'>
                    <span style='color:rgba(229,9,20,0.70);font-weight:700'>Form tip: </span>
                    {notes}
                  </div>
                </div>
                """, unsafe_allow_html=True)

            with col_timer:
                render_exercise_timer(name, timer, f"d{day_num}_ex{idx}")

    # ── 4. DURING-WORKOUT CAUTIONS ────────────────────────────────────────
    with st.expander("🛡️ During Workout — Safety Reminders", expanded=False):
        render_safety_cautions("during")

    st.markdown("<div style='height:8px'></div>", unsafe_allow_html=True)

    # ── 5. POST-WORKOUT STRETCH VIDEOS ───────────────────────────────────
    with st.expander("🧊 Cool-Down Videos — Do These After Workout", expanded=False):
        if post_stretch:
            for stretch in post_stretch:
                st.markdown(f"""
                <div style='display:flex;align-items:center;gap:12px;
                            padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05)'>
                  <span style='color:#22c55e;font-size:1.1rem'>🧊</span>
                  <div>
                    <div style='font-size:0.88rem;color:#fff;font-weight:600'>
                      {stretch.get('name','Cool-down')}</div>
                    <div style='font-size:0.72rem;color:rgba(255,255,255,0.42)'>
                      ⏱ {stretch.get('duration','30s')}</div>
                  </div>
                </div>
                """, unsafe_allow_html=True)
        render_stretch_videos("post")

    # ── 6. POST-WORKOUT CAUTIONS ──────────────────────────────────────────
    with st.expander("✅ Post-Workout Recovery Tips", expanded=False):
        render_safety_cautions("post")