/* global React, EXERCISES, ROUTINES, GENERAL */
const { useState, useEffect } = React;

// ---------- Progreso de ejercicios (localStorage) ----------
const ENTRENOS_DONE_KEY = 'gymsis:entrenos:done';
function loadEntrenosDone() {
  try { return JSON.parse(localStorage.getItem(ENTRENOS_DONE_KEY)) || {}; } catch (e) { return {}; }
}
function saveEntrenosDone(obj) {
  try { localStorage.setItem(ENTRENOS_DONE_KEY, JSON.stringify(obj)); } catch (e) {}
}
function sessionKey(routineId, dayIdx) { return routineId + ':' + dayIdx; }
function getDoneSet(routineId, dayIdx) {
  return loadEntrenosDone()[sessionKey(routineId, dayIdx)] || {};
}
function isDayComplete(routine, dayIdx) {
  const done = getDoneSet(routine.id, dayIdx);
  const total = routine.days[dayIdx].exercises.length;
  if (!total) return false;
  let c = 0;
  for (let i = 0; i < total; i++) if (done[i]) c++;
  return c === total;
}

const TRACK_STORAGE_KEY = 'op_bikini_tracking_v1';
function markSeguimientoTrained() {
  try {
    const raw = localStorage.getItem(TRACK_STORAGE_KEY);
    if (!raw) return;
    const st = JSON.parse(raw);
    if (!st || !st.startDate) return;
    const start = new Date(st.startDate); const today = new Date();
    start.setHours(0,0,0,0); today.setHours(0,0,0,0);
    let n = Math.floor((today - start) / 86400000) + 1;
    n = Math.max(1, Math.min(84, n));
    st.days = st.days || {};
    st.days[n] = st.days[n] || {};
    if (st.days[n].trained) return;
    st.days[n].trained = true;
    localStorage.setItem(TRACK_STORAGE_KEY, JSON.stringify(st));
  } catch (e) {}
}

// ---------- Ficha de un ejercicio ----------
function ExerciseCard({ row, index, done, onToggle }) {
  const [id, series, reps, rest, rpe, note] = row;
  const ex = EXERCISES[id];
  if (!ex) return null;
  return (
    <div className={"ex-card" + (done ? " ex-done" : "")} onClick={onToggle} title={done ? "Hecho — toca para desmarcar" : "Toca para marcar como hecho"}>
      <div className="ex-photo" onClick={(e) => { e.stopPropagation(); window.__openLightbox && window.__openLightbox(`images/exercises/${id}.png`, ex.name); }}>
        <img
          className="ex-img"
          src={`images/exercises/${id}.png`}
          alt={ex.photo}
          loading="lazy"
          onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }}
        />
        <div className="ph-inner" style={{ display: 'none' }}>
          <div className="ph-tag">FOTO · MOVIMIENTO</div>
          <div className="ph-desc">{ex.photo}</div>
        </div>
        <span className="ex-zoom">⤢</span>
        {done && <span className="ex-done-flag">✓ Hecho</span>}
      </div>
      <div className="ex-body">
        <div className="ex-top">
          <div>
            <div className="ex-name">{ex.name}</div>
            <div className="ex-group">{ex.group} · {ex.equipment}</div>
          </div>
          <div className={"ex-checkbox" + (done ? " on" : "")} aria-hidden="true">{done ? '✓' : ''}</div>
        </div>
        <div className="ex-stats">
          <div className="ex-stat">
            <div className="k">Series</div>
            <div className="v">{series}</div>
          </div>
          <div className="ex-stat">
            <div className="k">Reps</div>
            <div className="v">{reps}</div>
          </div>
          <div className="ex-stat">
            <div className="k">Descanso</div>
            <div className="v">{rest > 0 ? <>{rest}<small>s</small></> : '—'}</div>
          </div>
          <div className="ex-stat">
            <div className="k">RPE</div>
            <div className="v">{rpe}</div>
          </div>
        </div>
        <div className="ex-tips">
          <div className="ex-tip">
            <span className="lbl">Tip clave</span>
            {ex.tip}
          </div>
          <div className="ex-tip err">
            <span className="lbl">Evita</span>
            {ex.error}
          </div>
        </div>
        <div className="ex-alt"><strong>Alternativa:</strong> {ex.alt}</div>
        {note && <div className="ex-note"><strong>Nota:</strong> {note}</div>}
      </div>
    </div>
  );
}

// ---------- Ficha de sesión (día) ----------
function SessionView({ routine, dayIdx, onBack }) {
  const day = routine.days[dayIdx];
  const key = sessionKey(routine.id, dayIdx);
  const [doneMap, setDoneMap] = useState(() => getDoneSet(routine.id, dayIdx));

  const total = day.exercises.length;
  const completed = Object.keys(doneMap).filter(k => doneMap[k]).length;
  const allDone = total > 0 && completed === total;

  const toggle = (i) => {
    setDoneMap(prev => {
      const next = { ...prev };
      if (next[i]) delete next[i]; else next[i] = true;
      const all = loadEntrenosDone();
      all[key] = next;
      saveEntrenosDone(all);
      const c = Object.keys(next).filter(k => next[k]).length;
      if (total > 0 && c === total) markSeguimientoTrained();
      return next;
    });
  };

  return (
    <div>
      <button className="back-btn" onClick={onBack}>← Volver a {routine.name}</button>
      <div className="session-head">
        <div className="left">
          <span className="eyebrow" style={{ color: routine.color }}>{routine.weeks} · {routine.name}</span>
          <h2 className="h2">{day.day} <em style={{ color: 'var(--rose-deep)', fontStyle: 'italic' }}>· {day.theme}</em></h2>
        </div>
        <div className="right">
          <div>{day.exercises.length} ejercicios</div>
          <div style={{ marginTop: 4 }}>~ {estimateMinutes(day)} min</div>
        </div>
      </div>
      <div className={"session-progress" + (allDone ? " done" : "")}>
        <div className="sp-left">
          <span className="sp-count">{completed}<span>/{total}</span></span>
          <span className="sp-label">{allDone ? '¡Sesión completada!' : 'ejercicios hechos'}</span>
        </div>
        <div className="sp-bar"><div className="sp-fill" style={{ width: (total ? (completed/total*100) : 0) + '%' }} /></div>
        <div className="sp-hint">{allDone ? '✓ Marcado como entrenado en Seguimiento' : 'Toca cada ejercicio al terminarlo'}</div>
      </div>
      <div className="warm-box">
        <div className="w-label">Calentamiento<br />específico</div>
        <div className="w-text">{day.warm}</div>
      </div>
      <div className="ex-list">
        {day.exercises.map((row, i) => <ExerciseCard key={i} row={row} index={i} done={!!doneMap[i]} onToggle={() => toggle(i)} />)}
      </div>
      <div className="info-grid">
        <div className="info-card">
          <h4>Enfriamiento · 5–8 min</h4>
          <ul>
            {GENERAL.cooldown.map((s, i) => <li key={i}><span className="n">{String(i+1).padStart(2,'0')}</span>{s}</li>)}
          </ul>
        </div>
        <div className="info-card">
          <h4>Escala RPE · esfuerzo percibido</h4>
          <ul>
            {GENERAL.rpeScale.map(([n, t], i) => <li key={i}><span className="n">{n}</span>{t}</li>)}
          </ul>
        </div>
      </div>
    </div>
  );
}

function estimateMinutes(day) {
  let total = 10; // warmup + cooldown base
  day.exercises.forEach(([, s, reps, rest]) => {
    const setCount = typeof s === 'number' ? s : 3;
    const repTime = typeof reps === 'string' && reps.includes('min') ? parseInt(reps) * 60 : 30;
    total += (setCount * (repTime + (rest || 45))) / 60;
  });
  return Math.round(total);
}

// ---------- Vista de rutina (bloque) ----------
function RoutineView({ routine, onOpenDay }) {
  return (
    <div>
      <div className="phase-head" style={{ color: routine.color }}>
        <div className="big-dot" style={{ background: routine.color }} />
        <div className="meta">
          <div className="weeks">{routine.weeks}</div>
          <h2 className="h2" style={{ color: 'var(--ink)' }}>{routine.name}</h2>
          <div className="phase">Fase · {routine.phase}</div>
        </div>
      </div>
      <div className="focus-row">
        {routine.focus.map((f, i) => <span key={i} className={"chip " + (i === 0 ? "rose" : "")}>{f}</span>)}
      </div>
      <div className="goal-card">
        <div>
          <div className="label">Objetivo</div>
        </div>
        <div className="text">{routine.goal}</div>
      </div>
      <h3 className="h3" style={{ marginBottom: 8 }}>Sesiones de la semana</h3>
      <p className="body" style={{ marginBottom: 18, maxWidth: '62ch', fontSize: 13.5 }}>
        Por defecto descansas <strong>sábado y domingo</strong>. Si prefieres cortar la semana,
        puedes mover uno de los descansos a <strong>miércoles o jueves</strong>. Lo importante: 2 días de descanso semanales.
      </p>
      <div className="days-grid">
        {routine.days.map((d, i) => {
          const complete = isDayComplete(routine, i);
          return (
            <div key={i} className={"day-card" + (complete ? " day-complete" : "")} onClick={() => onOpenDay(i)}>
              {complete && <span className="day-check">✓</span>}
              <div className="dno">{d.day}</div>
              <div className="dtheme">{d.theme}</div>
              <div className="count">{d.exercises.length} ejercicios</div>
            </div>
          );
        })}
      </div>

      <div className="info-grid">
        <div className="info-card">
          <h4>Cardio · esta fase</h4>
          <p className="body" style={{ fontSize: 13 }}>{routine.cardioNote}</p>
        </div>
        <div className="info-card">
          <h4>Pasos diarios</h4>
          <p className="body" style={{ fontSize: 13 }}>{GENERAL.steps}</p>
        </div>
      </div>
    </div>
  );
}

// ---------- Portada ----------
function Cover({ brand, program }) {
  return (
    <div className="cover">
      <div className="cover-top">
        <div className="cover-badge">{brand}</div>
      </div>
      <span className="eyebrow" style={{ display: 'block', marginBottom: 20 }}>Plan trimestral de entrenamiento</span>
      <h1 className="h1" style={{ fontSize: 92, lineHeight: 0.95 }}>
        {program.split(' ')[0]}<br /><em>{program.split(' ').slice(1).join(' ')}</em>
      </h1>
      <p className="lead" style={{ marginTop: 24, maxWidth: '52ch', fontSize: 17 }}>
        12 semanas divididas en 6 bloques progresivos. Diseñado para mujeres que
        quieren aprender a entrenar de verdad, con foco en glúteo, core y definición
        antes del verano.
      </p>
      <div className="cover-meta">
        <div><div className="k">Duración</div><div className="v">12 semanas</div></div>
        <div><div className="k">Frecuencia</div><div className="v">5 días</div></div>
        <div><div className="k">Lugar</div><div className="v">Gimnasio</div></div>
        <div><div className="k">Nivel</div><div className="v">Principiante +</div></div>
      </div>
    </div>
  );
}

// ---------- Bienvenida (intro) ----------
function Welcome() {
  return (
    <div style={{ marginTop: 48 }}>
      <span className="eyebrow">Antes de empezar</span>
      <h2 className="h2" style={{ marginTop: 12, marginBottom: 20 }}>Cómo funciona este plan</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 32 }}>
        {[
          ["01", "6 bloques progresivos", "Cada 2 semanas subimos carga, intensidad o volumen. Respeta el orden — cada fase prepara la siguiente."],
          ["02", "5 días a la semana", "3 de glúteo/pierna, 1 de torso, 1 de cardio + abs. Descansa los otros 2 días."],
          ["03", "Rutina paso a paso", "Cada sesión tiene calentamiento, ejercicios con tip clave, enfriamiento y escala de esfuerzo (RPE)."],
        ].map(([n, t, d]) => (
          <div key={n} className="info-card">
            <div className="mono" style={{ color: 'var(--rose-deep)', fontSize: 12, marginBottom: 10 }}>{n}</div>
            <h4>{t}</h4>
            <p className="body" style={{ fontSize: 13, marginTop: 8 }}>{d}</p>
          </div>
        ))}
      </div>

      <h3 className="h3" style={{ marginTop: 48, marginBottom: 16 }}>Calentamiento general</h3>
      <div className="info-card">
        <ul>
          {GENERAL.warmup.map((s, i) => <li key={i}><span className="n">{String(i+1).padStart(2,'0')}</span>{s}</li>)}
        </ul>
      </div>

      <h3 className="h3" style={{ marginTop: 36, marginBottom: 16 }}>Entendiendo el RPE</h3>
      <p className="body" style={{ marginBottom: 16 }}>Cada ejercicio lleva un <strong>RPE</strong> (esfuerzo percibido del 1 al 10). Es tu referencia para saber cuánto peso poner:</p>
      <div className="info-card">
        <ul>
          {GENERAL.rpeScale.map(([n, t], i) => <li key={i}><span className="n">{n}</span>{t}</li>)}
        </ul>
      </div>
    </div>
  );
}

// ---------- Vista de Descanso activo ----------
function RestDayView() {
  return (
    <div>
      <span className="eyebrow">{GENERAL.restDay.title}</span>
      <h2 className="h1" style={{ fontSize: 56, marginTop: 12, marginBottom: 20 }}>
        Muévete, <em>pero disfruta</em>
      </h2>
      <p className="lead" style={{ maxWidth: '62ch' }}>{GENERAL.restDay.intro}</p>

      <div className="rest-block" style={{ marginTop: 40 }}>
        <div className="rest-head">
          <span className="eyebrow">Ideas low-cost</span>
          <h3 className="h2" style={{ marginTop: 8, marginBottom: 12 }}>8 planes que suman pasos</h3>
          <p className="body" style={{ maxWidth: '58ch' }}>
            Cualquiera de estos te hace llegar a los 12.000 pasos sin que parezca ejercicio.
            Llévate el móvil: son contenido para tus redes.
          </p>
        </div>
        <ol className="activities-list">
          {GENERAL.restDay.activities.map(([t, d, img], i) => (
            <li key={i} className="act-card">
              <div
                className="act-photo"
                onClick={() => img && window.__openLightbox && window.__openLightbox(`images/descanso/${img}.png`, t)}
              >
                {img && <img
                  className="act-img"
                  src={`images/descanso/${img}.png`}
                  alt={t}
                  loading="lazy"
                  onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }}
                />}
                <div className="ph-inner" style={{ display: img ? 'none' : 'flex' }}>
                  <div className="ph-tag">FOTO · PLAN</div>
                  <div className="ph-desc">{t}</div>
                </div>
                {img && <span className="ex-zoom">⤢</span>}
              </div>
              <div className="act-body">
                <div className="act-top">
                  <h5 className="act-title">{t}</h5>
                  <span className="act-num">{String(i+1).padStart(2,'0')}</span>
                </div>
                <p className="act-desc-full">{d}</p>
              </div>
            </li>
          ))}
        </ol>
        <div className="recovery-card">
          <div className="rec-label">Recuperación en casa</div>
          <ul className="rec-list">
            {GENERAL.restDay.recovery.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ExerciseCard, SessionView, RoutineView, Cover, Welcome, RestDayView });