// ── Workouts Screen — Responsive ─────────────────────────────────────────────
const { useState: useStateWk } = React;

const WORKOUT_TYPES = ['Fuerza','Cardio','HIIT','Yoga','Natación','Ciclismo','Otro'];
const WK_ICONS = { Fuerza:'🏋️', Cardio:'🏃', HIIT:'⚡', Yoga:'🧘', Natación:'🏊', Ciclismo:'🚴', Otro:'💪' };

function ScreenWorkouts() {
  const { state, addWorkout, deleteWorkout } = useSalud();
  const [showAdd, setShowAdd] = useStateWk(false);
  const [importKcal, setImportKcal] = useStateWk('');
  const [importOpen, setImportOpen] = useStateWk(false);
  const [form, setForm] = useStateWk({ type:'Fuerza', duration:'', kcal:'', notes:'', date:new Date().toISOString().split('T')[0] });
  const [saving, setSaving] = useStateWk(false);

  const sorted = [...state.workouts].sort((a,b) => b.date.localeCompare(a.date));
  const weekKcal = state.workouts.filter(w => (new Date()-new Date(w.date))/86400000 <= 7).reduce((a,w)=>a+w.kcal,0);
  const totalKcal = state.workouts.reduce((a,w)=>a+w.kcal,0);

  const handleSave = async () => {
    if (!form.duration || !form.kcal) return;
    setSaving(true);
    await addWorkout({ type:form.type, duration:+form.duration, kcal:+form.kcal, notes:form.notes, date:form.date });
    setSaving(false);
    setForm({ type:'Fuerza', duration:'', kcal:'', notes:'', date:new Date().toISOString().split('T')[0] });
    setShowAdd(false);
  };

  const handleImport = async () => {
    if (!importKcal) return;
    await addWorkout({ type:'Cardio', duration:0, kcal:+importKcal, notes:'Apple Watch', date:new Date().toISOString().split('T')[0] });
    setImportKcal(''); setImportOpen(false);
  };

  return (
    <div className="page">
      <div className="page-header"><h1>Entrenos</h1></div>

      {/* Stats */}
      <div className="grid-3" style={{ marginBottom:16 }}>
        <div className="stat-card"><div className="stat-val" style={{ color:'#34C759' }}>{weekKcal}</div><div className="stat-label">kcal esta semana</div></div>
        <div className="stat-card"><div className="stat-val">{state.workouts.length}</div><div className="stat-label">entrenos total</div></div>
        <div className="stat-card"><div className="stat-val" style={{ color:'#FF6B35' }}>{totalKcal}</div><div className="stat-label">kcal totales</div></div>
      </div>

      {/* Apple Watch import */}
      <div className="card" style={{ background:'#F0FDF4', border:'1px solid #BBF7D0' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ fontSize:15, fontWeight:600, color:'#15803D' }}>⌚ Importar Apple Watch</div>
          <button className="btn-ghost" style={{ borderColor:'#BBF7D0', color:'#15803D', fontSize:13 }} onClick={() => setImportOpen(o=>!o)}>
            {importOpen?'Cancelar':'Abrir'}
          </button>
        </div>
        {importOpen && (
          <div style={{ marginTop:12, display:'flex', gap:8 }}>
            <input className="form-input" type="number" placeholder="Kcal activas del Watch (ej: 420)" value={importKcal} onChange={e=>setImportKcal(e.target.value)} />
            <button className="btn-primary" style={{ background:'#16A34A', flexShrink:0 }} onClick={handleImport}>Añadir</button>
          </div>
        )}
        {!importOpen && <div style={{ fontSize:12, color:'#166534', marginTop:4 }}>Registra kcal activas del Apple Watch manualmente</div>}
      </div>

      {/* Add workout */}
      {showAdd ? (
        <div className="card">
          <div className="card-title">Nuevo entreno</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginBottom:16 }}>
            {WORKOUT_TYPES.map(t => (
              <button key={t} className="chip" style={{ background:form.type===t?'#34C759':'#F0F0F0', color:form.type===t?'#fff':'#8E8E93' }}
                onClick={() => setForm(f=>({...f, type:t}))}>
                {WK_ICONS[t]} {t}
              </button>
            ))}
          </div>
          <div className="form-group">
            <label className="form-label">Fecha</label>
            <input className="form-input" type="date" value={form.date} onChange={e=>setForm(f=>({...f,date:e.target.value}))} />
          </div>
          <div className="form-row">
            <div className="form-group">
              <label className="form-label">Duración (min)</label>
              <input className="form-input" type="number" placeholder="60" value={form.duration} onChange={e=>setForm(f=>({...f,duration:e.target.value}))} />
            </div>
            <div className="form-group">
              <label className="form-label">Kcal quemadas</label>
              <input className="form-input" type="number" placeholder="320" value={form.kcal} onChange={e=>setForm(f=>({...f,kcal:e.target.value}))} />
            </div>
          </div>
          <div className="form-group">
            <label className="form-label">Notas</label>
            <input className="form-input" placeholder="Ej: Press banca 4x10, sentadilla 3x8…" value={form.notes} onChange={e=>setForm(f=>({...f,notes:e.target.value}))} />
          </div>
          <div style={{ display:'flex', gap:10 }}>
            <button className="btn-secondary" style={{ flex:1 }} onClick={()=>setShowAdd(false)}>Cancelar</button>
            <button className="btn-primary" style={{ flex:2, background:'linear-gradient(135deg,#34C759,#30D158)' }} onClick={handleSave} disabled={saving}>
              {saving?'Guardando…':'Guardar entreno'}
            </button>
          </div>
        </div>
      ) : (
        <button className="btn-primary" style={{ width:'100%', marginBottom:16, background:'linear-gradient(135deg,#34C759,#30D158)' }} onClick={()=>setShowAdd(true)}>
          + Registrar entreno
        </button>
      )}

      {/* History */}
      <div className="card">
        <div className="card-title">Historial</div>
        {sorted.length === 0 ? (
          <div className="empty"><div className="empty-icon">💪</div><div className="empty-title">Sin entrenos registrados</div></div>
        ) : sorted.map((w,i) => (
          <div key={w.id} className="list-row" style={{ borderBottom:i===sorted.length-1?'none':'1px solid #F2F2F7' }}>
            <div style={{ width:44, height:44, borderRadius:12, background:'#F0F0F0', display:'flex', alignItems:'center', justifyContent:'center', fontSize:22, flexShrink:0 }}>
              {WK_ICONS[w.type]||'💪'}
            </div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontWeight:600, fontSize:15 }}>{w.type}</div>
              <div style={{ fontSize:12, color:'#8E8E93' }}>{new Date(w.date+'T12:00').toLocaleDateString('es-ES',{weekday:'short',day:'numeric',month:'short'})}</div>
              {w.notes && <div style={{ fontSize:12, color:'#AEAEB2', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{w.notes}</div>}
            </div>
            <div style={{ textAlign:'right', flexShrink:0 }}>
              <div style={{ fontWeight:700, fontSize:17, color:'#34C759' }}>{w.kcal}</div>
              <div style={{ fontSize:11, color:'#8E8E93' }}>{w.duration>0?`${w.duration} min`:'kcal'}</div>
            </div>
            <button style={{ background:'none', border:'none', color:'#FF3B30', fontSize:18, cursor:'pointer', padding:'0 6px' }}
              onClick={() => deleteWorkout(w.id)}>×</button>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ScreenWorkouts });