// ── Dieta — importar el Word del entrenador y seguirla día a día ─────────────
const { useState: useStateDiet, useEffect: useEffectDiet, useRef: useRefDiet } = React;

const DIET_ICONS = { Desayuno:'🌅', Almuerzo:'☕', Comida:'🍽', Merienda:'🍎', Cena:'🌙' };
const DIET_TYPES = ['Desayuno','Almuerzo','Comida','Merienda','Cena'];
const DIET_CATS  = ['Proteína','Carbohidrato','Verdura','Fruta','Grasa saludable','Lácteo','Legumbre','Otro'];

function gramsTxt(g) {
  if (!g) return '';
  return g >= 1000 ? (g/1000).toFixed(2)+' kg' : Math.round(g)+' g';
}

function isoHoy() {
  return new Date().toLocaleDateString('sv-SE');
}

function sumaDias(iso, n) {
  const d = new Date(iso + 'T12:00');
  d.setDate(d.getDate() + n);
  return d.toLocaleDateString('sv-SE');
}

function etiquetaFecha(iso) {
  const hoy = isoHoy();
  if (iso === hoy) return 'Hoy';
  if (iso === sumaDias(hoy, -1)) return 'Ayer';
  if (iso === sumaDias(hoy, 1)) return 'Mañana';
  return new Date(iso + 'T12:00').toLocaleDateString('es-ES', { weekday:'long', day:'numeric', month:'long' });
}

// ── Navegador de días ────────────────────────────────────────────────────────
function DietDayNav({ date, onChange }) {
  const hoy = isoHoy();
  const esFuturo = date >= hoy;
  return (
    <div className="card" style={{ padding:'10px 12px', marginBottom:12 }}>
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        <button className="btn-ghost" style={{ padding:'8px 14px' }}
          onClick={() => onChange(sumaDias(date, -1))} title="Día anterior">‹</button>

        <div style={{ flex:1, textAlign:'center', minWidth:0 }}>
          <div style={{ fontWeight:700, fontSize:15, textTransform:'capitalize' }}>{etiquetaFecha(date)}</div>
          <div style={{ fontSize:11, color:'#8E8E93' }}>
            {new Date(date + 'T12:00').toLocaleDateString('es-ES', { day:'numeric', month:'short', year:'numeric' })}
          </div>
        </div>

        <button className="btn-ghost" style={{ padding:'8px 14px', opacity: esFuturo ? .35 : 1 }}
          disabled={esFuturo} onClick={() => onChange(sumaDias(date, 1))} title="Día siguiente">›</button>

        {date !== hoy && (
          <button className="btn-secondary" style={{ padding:'8px 12px', fontSize:13 }}
            onClick={() => onChange(hoy)}>Hoy</button>
        )}
      </div>
    </div>
  );
}

// ── Tira de adherencia ───────────────────────────────────────────────────────
function DietStreak({ history, date, onPick }) {
  if (!history || !history.days?.length) return null;
  const r = history.resumen || {};

  const color = (d) =>
    d.pct >= 100 ? '#34C759' : d.pct >= 60 ? '#FFCC00' : d.pct > 0 ? '#FF9500' : '#E5E5EA';

  return (
    <div className="card">
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:12 }}>
        <div className="card-title" style={{ marginBottom:0 }}>Últimos {history.days.length} días</div>
        <div style={{ fontSize:12, color:'#8E8E93' }}>
          <strong style={{ color:'#FF6B35' }}>{r.diasCompletos || 0}</strong> {(r.diasCompletos || 0) === 1 ? 'completo' : 'completos'} ·
          <strong style={{ color:'#1C1C1E' }}> {r.adherencia || 0}%</strong> de media
        </div>
      </div>

      <div style={{ display:'flex', gap:3, alignItems:'flex-end' }}>
        {history.days.map(d => (
          <button key={d.date} onClick={() => onPick(d.date)} title={`${d.date} · ${d.done}/${d.total} ítems · ${d.cal} kcal`}
            style={{
              flex:1, height: 34, borderRadius:5, border: d.date === date ? '2px solid #1C1C1E' : 'none',
              background: color(d), cursor:'pointer', padding:0, position:'relative',
            }}>
            <span style={{ position:'absolute', bottom:-16, left:0, right:0, fontSize:9, color:'#AEAEB2' }}>
              {new Date(d.date + 'T12:00').getDate()}
            </span>
          </button>
        ))}
      </div>
      <div style={{ height:18 }} />

      <div style={{ display:'flex', gap:12, fontSize:11, color:'#8E8E93', marginTop:6, flexWrap:'wrap' }}>
        <span><span style={{ display:'inline-block', width:9, height:9, borderRadius:2, background:'#34C759', marginRight:4 }} />Completo</span>
        <span><span style={{ display:'inline-block', width:9, height:9, borderRadius:2, background:'#FFCC00', marginRight:4 }} />Casi</span>
        <span><span style={{ display:'inline-block', width:9, height:9, borderRadius:2, background:'#FF9500', marginRight:4 }} />A medias</span>
        <span><span style={{ display:'inline-block', width:9, height:9, borderRadius:2, background:'#E5E5EA', marginRight:4 }} />Sin registrar</span>
        {r.calMedia ? <span style={{ marginLeft:'auto' }}>Media: <strong>{r.calMedia} kcal</strong></span> : null}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PESTAÑA "HOY"
// ─────────────────────────────────────────────────────────────────────────────
function DietTodayCard({ meal, onToggleItem, onToggleMeal, onChoose, isNow }) {
  const foods = meal.items.filter(i => i.kind === 'food');
  const frees = meal.items.filter(i => i.kind === 'free');
  const supps = meal.items.filter(i => i.kind === 'supplement');

  return (
    <div className="card" style={{
      border: isNow ? '2px solid #FF6B35' : '2px solid transparent',
      opacity: meal.complete ? .65 : 1,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
        <div style={{ fontSize:22 }}>{DIET_ICONS[meal.type] || '🍴'}</div>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontWeight:700, fontSize:16 }}>
            {meal.label}
            {isNow && <span style={{ fontSize:10, color:'#fff', background:'#FF6B35', padding:'2px 8px', borderRadius:8, marginLeft:8, fontWeight:700 }}>AHORA</span>}
          </div>
          <div style={{ fontSize:12, color:'#8E8E93' }}>
            {meal.time && <span>{meal.time} · </span>}
            {meal.kcal} kcal · {meal.done}/{meal.total} hechos
          </div>
        </div>
        <button className={meal.complete ? 'btn-secondary' : 'btn-primary'}
          style={{ padding:'8px 14px', fontSize:13 }}
          onClick={() => onToggleMeal(meal, !meal.complete)}>
          {meal.complete ? '↩︎ Deshacer' : '✓ Hecho'}
        </button>
      </div>

      {foods.map(it => {
        const chosen = it.chosen || it.options[0];
        return (
          <div key={it.id} className="list-row" style={{ alignItems:'flex-start' }}>
            <button onClick={() => onToggleItem(it, !it.done)}
              style={{
                width:24, height:24, borderRadius:12, flexShrink:0, marginTop:2,
                border: it.done ? 'none' : '2px solid #D1D1D6',
                background: it.done ? '#34C759' : 'transparent',
                color:'#fff', fontSize:13, lineHeight:'20px', padding:0,
              }}>{it.done ? '✓' : ''}</button>

            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontWeight:600, fontSize:15, textDecoration: it.done ? 'line-through' : 'none' }}>
                <span style={{ color:'#FF6B35' }}>{gramsTxt(chosen?.grams)}</span> {chosen?.label || it.name}
              </div>
              {it.note && <div style={{ fontSize:12, color:'#8E8E93', marginTop:2 }}>({it.note})</div>}

              {it.options.length > 1 && (
                <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginTop:6 }}>
                  {it.options.map(o => (
                    <button key={o.id} className="chip"
                      style={{
                        fontSize:12, padding:'4px 10px',
                        background: o.id === chosen?.id ? '#FF6B35' : '#F0F0F0',
                        color: o.id === chosen?.id ? '#fff' : '#8E8E93',
                      }}
                      onClick={() => onChoose(it, o)}>
                      {o.label} · {gramsTxt(o.grams)}
                    </button>
                  ))}
                </div>
              )}
            </div>

            {chosen?.kcal ? (
              <div style={{ textAlign:'right', flexShrink:0 }}>
                <div style={{ fontWeight:700, fontSize:13, color:'#FF6B35' }}>{chosen.kcal}</div>
                <div style={{ fontSize:10, color:'#AEAEB2' }}>kcal</div>
              </div>
            ) : null}
          </div>
        );
      })}

      {frees.map(it => (
        <div key={it.id} className="list-row">
          <button onClick={() => onToggleItem(it, !it.done)}
            style={{
              width:24, height:24, borderRadius:12, flexShrink:0,
              border: it.done ? 'none' : '2px solid #D1D1D6',
              background: it.done ? '#34C759' : 'transparent',
              color:'#fff', fontSize:13, lineHeight:'20px', padding:0,
            }}>{it.done ? '✓' : ''}</button>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontWeight:600, fontSize:15, textDecoration: it.done ? 'line-through' : 'none' }}>{it.name}</div>
            <div style={{ fontSize:12, color:'#34C759', fontWeight:600 }}>
              Cantidad libre{it.note ? ` · ${it.note}` : ''}
            </div>
          </div>
        </div>
      ))}

      {supps.length > 0 && (
        <div style={{ background:'#F5F0FF', borderRadius:12, padding:'12px 14px', marginTop:12 }}>
          <div style={{ fontSize:11, fontWeight:700, color:'#7C3AED', textTransform:'uppercase', letterSpacing:.5, marginBottom:8 }}>
            💊 Suplementos
          </div>
          {supps.map(it => (
            <div key={it.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'4px 0' }}>
              <button onClick={() => onToggleItem(it, !it.done)}
                style={{
                  width:22, height:22, borderRadius:11, flexShrink:0,
                  border: it.done ? 'none' : '2px solid #C4B5FD',
                  background: it.done ? '#7C3AED' : 'transparent',
                  color:'#fff', fontSize:12, lineHeight:'18px', padding:0,
                }}>{it.done ? '✓' : ''}</button>
              <span style={{ fontSize:14, fontWeight:600, textDecoration: it.done ? 'line-through' : 'none' }}>{it.name}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function DietTodayTab({ day, busy, onToggleItem, onToggleMeal, onChoose, nowMealId, date, onDate, history }) {
  const [showNotes, setShowNotes] = useStateDiet(false);
  if (!day) return null;
  const esHoy = date === isoHoy();

  const obj  = day.diet.totals || {};
  const con  = day.consumed || {};
  const pct  = obj.cal ? Math.min(100, Math.round(con.cal / obj.cal * 100)) : 0;
  const hechas = day.meals.filter(m => m.complete).length;

  return (
    <div style={{ opacity: busy ? .6 : 1, pointerEvents: busy ? 'none' : 'auto' }}>
      <DietDayNav date={date} onChange={onDate} />
      <DietStreak history={history} date={date} onPick={onDate} />

      {!esHoy && (
        <div style={{ background:'#EFF6FF', color:'#2563EB', borderRadius:12, padding:'10px 14px',
                      fontSize:13, fontWeight:600, marginBottom:12 }}>
          📅 Estás viendo otro día. Puedes marcar o corregir lo que comiste.
        </div>
      )}

      <div className="card">
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:6 }}>
          <div>
            <div className="card-title" style={{ marginBottom:2 }}>Dieta activa</div>
            <div style={{ fontWeight:700, fontSize:17 }}>{day.diet.name}</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontWeight:700, fontSize:22, color:'#FF6B35' }}>{con.cal || 0}</div>
            <div style={{ fontSize:11, color:'#8E8E93' }}>de {obj.cal || 0} kcal</div>
          </div>
        </div>
        <div className="prog-bar"><div className="prog-fill" style={{ width: pct+'%', background:'linear-gradient(90deg,#FF6B35,#FF3B30)' }} /></div>
        <div style={{ display:'flex', justifyContent:'space-between', marginTop:12, fontSize:12, color:'#8E8E93' }}>
          <span>🍗 {con.prot || 0} / {obj.prot || 0} g</span>
          <span>🍚 {con.carbs || 0} / {obj.carbs || 0} g</span>
          <span>🥑 {con.fat || 0} / {obj.fat || 0} g</span>
        </div>
        <div style={{ marginTop:10, fontSize:13, color: hechas === day.meals.length ? '#16A34A' : '#8E8E93', fontWeight:600 }}>
          {hechas === day.meals.length ? '🎉 Dieta completada' : `${hechas} de ${day.meals.length} comidas hechas`}
        </div>
      </div>

      {day.meals.map(m => (
        <DietTodayCard key={m.id} meal={m} isNow={esHoy && m.id === nowMealId}
          onToggleItem={onToggleItem} onToggleMeal={onToggleMeal} onChoose={onChoose} />
      ))}

      {day.diet.notes?.length > 0 && (
        <div className="card">
          <button className="btn-ghost" style={{ width:'100%' }} onClick={() => setShowNotes(s => !s)}>
            📋 Consideraciones del entrenador {showNotes ? '▲' : '▼'}
          </button>
          {showNotes && (
            <div style={{ marginTop:12 }}>
              {day.diet.notes.map((n, i) => (
                <div key={i} style={{ fontSize:13, color:'#3A3A3C', padding:'8px 0', borderBottom:'1px solid #F2F2F7', lineHeight:1.5 }}>{n}</div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PESTAÑA "IMPORTAR"
// ─────────────────────────────────────────────────────────────────────────────
function DietReviewItem({ item, onChange, onDelete }) {
  const needsMacros = item.kind !== 'supplement' && (item.options || []).some(o => !o.food);

  const setOption = (idx, patch) => {
    const options = item.options.map((o, i) => i === idx ? { ...o, ...patch } : o);
    onChange({ ...item, options });
  };
  const setFood = (idx, patch) => {
    const options = item.options.map((o, i) =>
      i === idx ? { ...o, food: { ...(o.food || { name: o.label, cat:'Otro', cal:0, prot:0, carbs:0, fat:0 }), ...patch } } : o);
    onChange({ ...item, options });
  };

  return (
    <div style={{
      padding:'10px 12px', borderRadius:12, marginBottom:8,
      background: needsMacros ? '#FFFBEB' : '#FAFAFA',
      border: needsMacros ? '1px solid #FCD34D' : '1px solid #F0F0F0',
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        <span style={{ fontSize:16 }}>
          {item.kind === 'supplement' ? '💊' : item.kind === 'free' ? '∞' : '•'}
        </span>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontWeight:600, fontSize:14 }}>
            {item.kind === 'supplement' ? item.name
              : item.kind === 'free' ? `${item.name} (cantidad libre)`
              : (item.options || []).map(o => `${gramsTxt(o.grams)} ${o.label}`).join('  o  ')}
          </div>
          <div style={{ fontSize:11, color:'#AEAEB2', marginTop:2 }}>
            {item.raw}{item.note ? ` · (${item.note})` : ''}
          </div>
        </div>
        <button className="btn-ghost" style={{ padding:'4px 9px', fontSize:12 }} onClick={onDelete}>✕</button>
      </div>

      {item.kind === 'food' && (item.options || []).map((o, i) => (
        <div key={i} style={{ marginTop:8, paddingLeft:24 }}>
          <div style={{ display:'flex', gap:8, alignItems:'center' }}>
            <input className="form-input" style={{ flex:2, padding:'7px 10px', fontSize:13 }}
              value={o.label} onChange={e => setOption(i, { label: e.target.value })} />
            <input className="form-input" type="number" style={{ width:82, padding:'7px 10px', fontSize:13 }}
              value={o.grams} onChange={e => setOption(i, { grams: +e.target.value })} />
            <span style={{ fontSize:12, color:'#8E8E93' }}>g</span>
          </div>
          {!o.food ? (
            <div style={{ marginTop:6 }}>
              <div style={{ fontSize:11, color:'#B45309', fontWeight:600, marginBottom:4 }}>
                ⚠️ No tengo los macros — rellénalos (por 100 g)
              </div>
              <div style={{ display:'flex', gap:6 }}>
                {[['cal','kcal'],['prot','P'],['carbs','HC'],['fat','G']].map(([k, lbl]) => (
                  <div key={k} style={{ flex:1 }}>
                    <div style={{ fontSize:10, color:'#8E8E93', marginBottom:2 }}>{lbl}</div>
                    <input className="form-input" type="number" style={{ padding:'6px 8px', fontSize:13 }}
                      value={(o.food && o.food[k]) || ''} onChange={e => setFood(i, { [k]: +e.target.value })} />
                  </div>
                ))}
                <div style={{ flex:1.4 }}>
                  <div style={{ fontSize:10, color:'#8E8E93', marginBottom:2 }}>Categoría</div>
                  <select className="form-input" style={{ padding:'6px 8px', fontSize:13 }}
                    value={(o.food && o.food.cat) || 'Otro'} onChange={e => setFood(i, { cat: e.target.value })}>
                    {DIET_CATS.map(c => <option key={c} value={c}>{c}</option>)}
                  </select>
                </div>
              </div>
            </div>
          ) : (
            <div style={{ fontSize:11, color:'#8E8E93', marginTop:4 }}>
              {o.food.name} · {o.food.cal} kcal/100 g · P {o.food.prot} · HC {o.food.carbs} · G {o.food.fat}
              <span style={{ marginLeft:6, color: o.source === 'library' ? '#16A34A' : o.source === 'ai' ? '#7C3AED' : '#2563EB' }}>
                {o.source === 'library' ? '· tu biblioteca' : o.source === 'ai' ? '· estimado con IA' : '· tabla nutricional'}
              </span>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function DietImportTab({ onSaved }) {
  const [file, setFile]       = useStateDiet(null);
  const [loading, setLoading] = useStateDiet(false);
  const [error, setError]     = useStateDiet('');
  const [preview, setPreview] = useStateDiet(null);
  const [name, setName]       = useStateDiet('');
  const [start, setStart]     = useStateDiet(new Date().toISOString().split('T')[0]);
  const [saving, setSaving]   = useStateDiet(false);
  const inputRef = useRefDiet(null);

  const handleFile = async (f) => {
    if (!f) return;
    setFile(f); setError(''); setLoading(true); setPreview(null);
    try {
      const data = await api.importDiet(f);
      setPreview(data);
      setName(data.suggestedName || '');
      setStart(data.suggestedStart || new Date().toISOString().split('T')[0]);
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  const updateMeal = (mi, patch) =>
    setPreview(p => ({ ...p, meals: p.meals.map((m, i) => i === mi ? { ...m, ...patch } : m) }));

  const updateItem = (mi, ii, item) =>
    updateMeal(mi, { items: preview.meals[mi].items.map((it, i) => i === ii ? item : it) });

  const deleteItem = (mi, ii) =>
    updateMeal(mi, { items: preview.meals[mi].items.filter((_, i) => i !== ii) });

  const totalsLive = () => {
    if (!preview) return { cal:0, prot:0, carbs:0, fat:0 };
    const t = { cal:0, prot:0, carbs:0, fat:0 };
    preview.meals.forEach(m => m.items.forEach(it => {
      if (it.kind !== 'food') return;
      const o = (it.options || [])[0];
      if (!o || !o.food) return;
      const f = (o.grams || 0) / 100;
      t.cal += (o.food.cal||0)*f; t.prot += (o.food.prot||0)*f;
      t.carbs += (o.food.carbs||0)*f; t.fat += (o.food.fat||0)*f;
    }));
    return { cal:Math.round(t.cal), prot:Math.round(t.prot*10)/10, carbs:Math.round(t.carbs*10)/10, fat:Math.round(t.fat*10)/10 };
  };

  const pendientes = preview
    ? preview.meals.flatMap(m => m.items).filter(it => it.kind === 'food' && (it.options||[]).some(o => !o.food)).length
    : 0;

  const handleSave = async () => {
    if (!preview) return;
    setSaving(true); setError('');
    try {
      await api.saveDiet({
        name: name.trim() || 'Dieta importada',
        startDate: start,
        sourceFile: preview.sourceFile || (file && file.name) || '',
        notes: preview.notes || [],
        meals: preview.meals,
        activate: true,
      });
      setPreview(null); setFile(null);
      if (inputRef.current) inputRef.current.value = '';
      onSaved();
    } catch (e) {
      setError(e.message);
    } finally {
      setSaving(false);
    }
  };

  const live = totalsLive();

  return (
    <div>
      <div className="card">
        <div className="card-title">Importar dieta desde Word</div>
        <p style={{ fontSize:13, color:'#8E8E93', marginBottom:14, lineHeight:1.5 }}>
          Sube el .docx que te pasa tu entrenador. Detecto las comidas, los gramajes,
          las alternativas ("merluza o bacalao") y los suplementos. Después podrás revisarlo todo antes de guardar.
        </p>
        <input ref={inputRef} type="file" accept=".docx" style={{ display:'none' }}
          onChange={e => handleFile(e.target.files[0])} />
        <button className="btn-primary" style={{ width:'100%' }} disabled={loading}
          onClick={() => inputRef.current && inputRef.current.click()}>
          {loading ? 'Analizando el documento…' : '📄 Elegir fichero .docx'}
        </button>
        {file && !loading && <div style={{ fontSize:12, color:'#8E8E93', marginTop:8, textAlign:'center' }}>{file.name}</div>}
        {error && <div className="msg-err">{error}</div>}
      </div>

      {preview && (
        <>
          <div className="card">
            <div className="form-group">
              <label className="form-label">Nombre de la dieta</label>
              <input className="form-input" value={name} onChange={e => setName(e.target.value)} />
            </div>
            <div className="form-group">
              <label className="form-label">Fecha de inicio</label>
              <input className="form-input" type="date" value={start} onChange={e => setStart(e.target.value)} />
            </div>
            <div className="grid-4" style={{ marginTop:4 }}>
              {[['kcal',live.cal],['Proteína',live.prot+' g'],['Hidratos',live.carbs+' g'],['Grasa',live.fat+' g']].map(([l,v]) => (
                <div key={l} className="stat-card" style={{ padding:12 }}>
                  <div className="stat-val" style={{ fontSize:20 }}>{v}</div>
                  <div className="stat-label">{l}</div>
                </div>
              ))}
            </div>
            {preview.ai && !preview.ai.available && pendientes > 0 && (
              <div style={{ marginTop:12, fontSize:12, color:'#B45309', background:'#FFFBEB', padding:'10px 12px', borderRadius:10 }}>
                Hay <strong>{pendientes}</strong> alimento(s) sin macros. Rellénalos abajo, o añade
                <code style={{ margin:'0 4px' }}>OPENAI_API_KEY</code> al .env para que se estimen solos.
              </div>
            )}
          </div>

          {preview.meals.map((m, mi) => (
            <div key={mi} className="card">
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:12 }}>
                <span style={{ fontSize:20 }}>{DIET_ICONS[m.type] || '🍴'}</span>
                <input className="form-input" style={{ flex:1, fontWeight:700 }}
                  value={m.label} onChange={e => updateMeal(mi, { label: e.target.value })} />
                <select className="form-input" style={{ width:130 }}
                  value={m.type} onChange={e => updateMeal(mi, { type: e.target.value })}>
                  {DIET_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
                </select>
                <input className="form-input" type="time" style={{ width:110 }}
                  value={m.time || ''} onChange={e => updateMeal(mi, { time: e.target.value })} />
              </div>
              {m.items.map((it, ii) => (
                <DietReviewItem key={ii} item={it}
                  onChange={item => updateItem(mi, ii, item)}
                  onDelete={() => deleteItem(mi, ii)} />
              ))}
              {!m.items.length && <div style={{ fontSize:13, color:'#AEAEB2' }}>Sin alimentos</div>}
            </div>
          ))}

          <div className="card" style={{ position:'sticky', bottom:0 }}>
            <div style={{ display:'flex', gap:10 }}>
              <button className="btn-secondary" style={{ flex:1 }} onClick={() => { setPreview(null); setFile(null); }}>
                Cancelar
              </button>
              <button className="btn-primary" style={{ flex:2 }} onClick={handleSave} disabled={saving}>
                {saving ? 'Guardando…' : '✓ Guardar y activar'}
              </button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PESTAÑA "MIS DIETAS"
// ─────────────────────────────────────────────────────────────────────────────
function DietListTab({ diets, onChanged, onMsg }) {
  const [busy, setBusy] = useStateDiet(null);
  const [assign, setAssign] = useStateDiet(null);
  const [assignDate, setAssignDate] = useStateDiet(new Date().toISOString().split('T')[0]);
  const [assignDays, setAssignDays] = useStateDiet(7);

  const act = async (id, fn, msg) => {
    setBusy(id);
    try { const r = await fn(); onMsg(typeof msg === 'function' ? msg(r) : msg); await onChanged(); }
    catch (e) { onMsg('⚠️ ' + e.message); }
    finally { setBusy(null); }
  };

  if (!diets.length) {
    return (
      <div className="empty">
        <div className="empty-icon">📄</div>
        <div className="empty-title">Todavía no has importado ninguna dieta</div>
        <div className="empty-sub">Ve a la pestaña "Importar" y sube el Word de tu entrenador.</div>
      </div>
    );
  }

  return (
    <div>
      {assign && (
        <div className="modal-overlay" onClick={e => e.target === e.currentTarget && setAssign(null)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-handle" />
            <div style={{ padding:'12px 20px 20px' }}>
              <div className="modal-title" style={{ marginBottom:16 }}>Volcar al calendario de comidas</div>
              <div className="form-group">
                <label className="form-label">Desde</label>
                <input className="form-input" type="date" value={assignDate} onChange={e => setAssignDate(e.target.value)} />
              </div>
              <div style={{ background:'#FFFBEB', color:'#B45309', borderRadius:10, padding:'10px 12px',
                            fontSize:12, marginBottom:14, lineHeight:1.5 }}>
                Se crearán las comidas en el calendario como si te lo hubieras comido todo.
                <strong> Si esas fechas ya tenían comidas registradas, se sustituyen.</strong>
              </div>
              <div className="form-group">
                <label className="form-label">Cuántos días</label>
                <div style={{ display:'flex', gap:6 }}>
                  {[1,3,7,14,30].map(n => (
                    <button key={n} className="chip"
                      style={{ background: assignDays===n ? '#FF6B35' : '#F0F0F0', color: assignDays===n ? '#fff' : '#8E8E93' }}
                      onClick={() => setAssignDays(n)}>{n}d</button>
                  ))}
                </div>
              </div>
              <div style={{ display:'flex', gap:10, marginTop:8 }}>
                <button className="btn-secondary" style={{ flex:1 }} onClick={() => setAssign(null)}>Cancelar</button>
                <button className="btn-primary" style={{ flex:2 }}
                  onClick={() => { const id = assign.id; setAssign(null);
                    act(id, () => api.assignDiet(id, { startDate: assignDate, days: assignDays }),
                        (r) => `✓ ${assignDays} días volcados · ${r.created} comidas` +
                               (r.replaced ? ` (${r.replaced} sustituidas)` : '')); }}>
                  📅 Volcar {assignDays} días
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {diets.map(d => (
        <div key={d.id} className="card" style={{ border: d.active ? '2px solid #FF6B35' : '2px solid transparent' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:12 }}>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontWeight:700, fontSize:16 }}>
                {d.name} {d.active === 1 && <span className="badge badge-orange" style={{ marginLeft:6 }}>ACTIVA</span>}
              </div>
              <div style={{ fontSize:12, color:'#8E8E93', marginTop:2 }}>
                {d.meals} comidas · {d.totals?.cal || 0} kcal · P {d.totals?.prot || 0} · HC {d.totals?.carbs || 0} · G {d.totals?.fat || 0}
                {d.start_date && ` · desde ${new Date(d.start_date+'T12:00').toLocaleDateString('es-ES',{day:'numeric',month:'short'})}`}
              </div>
            </div>
          </div>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            {!d.active && (
              <button className="btn-primary" style={{ padding:'8px 14px', fontSize:13 }} disabled={busy===d.id}
                onClick={() => act(d.id, () => api.activateDiet(d.id), `✓ "${d.name}" activada`)}>
                ✓ Activar
              </button>
            )}
            <button className="btn-secondary" style={{ fontSize:13 }} disabled={busy===d.id}
              onClick={() => act(d.id, () => api.dietToMenu(d.id, { days: 7 }), '✓ Menú de 7 días creado (pestaña Menú)')}>
              🍽 Generar menú 7 días
            </button>
            <button className="btn-secondary" style={{ fontSize:13 }} disabled={busy===d.id}
              onClick={() => setAssign(d)}>
              📅 Volcar al calendario
            </button>
            <button className="btn-danger" style={{ fontSize:13 }} disabled={busy===d.id}
              onClick={() => { if (confirm(`¿Borrar "${d.name}"?`)) act(d.id, () => api.deleteDiet(d.id), '✓ Dieta borrada'); }}>
              Borrar
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PANTALLA PRINCIPAL
// ─────────────────────────────────────────────────────────────────────────────
function ScreenDiet() {
  const [tab, setTab]     = useStateDiet('hoy');
  const [date, setDate]   = useStateDiet(isoHoy());
  const [day, setDay]     = useStateDiet(null);
  const [now, setNow]     = useStateDiet(null);
  const [history, setHistory] = useStateDiet(null);
  const [diets, setDiets] = useStateDiet([]);
  const [loading, setLoading] = useStateDiet(true);
  const [busy, setBusy]   = useStateDiet(false);
  const [msg, setMsg]     = useStateDiet('');

  const flash = (m) => { setMsg(m); setTimeout(() => setMsg(''), 3000); };

  /** Recarga el histórico (barra de adherencia) */
  const reloadHistory = async () => {
    const h = await api.getDietHistory(14).catch(() => null);
    setHistory(h && h.diet ? h : null);
  };

  /** Carga el día indicado */
  const loadDay = async (d) => {
    const data = await api.getDietToday(d).catch(() => null);
    setDay(data);
    if (d === isoHoy()) setNow(data?.now || null);
  };

  const reload = async () => {
    try {
      const [, list] = await Promise.all([
        loadDay(date),
        api.getDiets().catch(() => []).then(l => { setDiets(l || []); return l; }),
      ]);
      await reloadHistory();
    } finally {
      setLoading(false);
    }
  };

  useEffectDiet(() => { reload(); }, []);

  const cambiarDia = async (nueva) => {
    if (nueva > isoHoy()) return;
    setDate(nueva);
    setBusy(true);
    try { await loadDay(nueva); }
    finally { setBusy(false); }
  };

  const toggleItem = async (item, done) => {
    setBusy(true);
    try {
      const d = await api.logDietItem({ itemId: item.id, optionId: item.chosen_option_id, done, date });
      setDay(d);
      reloadHistory();
    } catch (e) { flash('⚠️ ' + e.message); }
    finally { setBusy(false); }
  };

  const toggleMeal = async (meal, done) => {
    setBusy(true);
    try {
      const d = await api.logDietMeal({ mealId: meal.id, done, date });
      setDay(d);
      reloadHistory();
    } catch (e) { flash('⚠️ ' + e.message); }
    finally { setBusy(false); }
  };

  const choose = async (item, option) => {
    setBusy(true);
    try {
      const d = await api.chooseDietOption({ itemId: item.id, optionId: option.id, date });
      setDay(d);
    } catch (e) { flash('⚠️ ' + e.message); }
    finally { setBusy(false); }
  };

  const TABS_DIET = [['hoy','Hoy'], ['importar','Importar'], ['dietas','Mis dietas']];

  return (
    <div className="page">
      <div className="page-header">
        <h1>Dieta</h1>
        <p>La pauta de tu entrenador, importada desde Word</p>
      </div>

      {msg && (
        <div className="card" style={{ background:'#F0FDF4', color:'#16A34A', fontWeight:700, textAlign:'center', padding:14 }}>
          {msg}
        </div>
      )}

      <div className="tabs">
        {TABS_DIET.map(([id, label]) => (
          <button key={id} className={`tab-btn${tab===id ? ' active' : ''}`} onClick={() => setTab(id)}>{label}</button>
        ))}
      </div>

      {loading ? (
        <div className="empty"><div className="empty-icon">⏳</div><div className="empty-title">Cargando…</div></div>
      ) : tab === 'hoy' ? (
        day ? (
          <DietTodayTab day={day} busy={busy} nowMealId={now?.current?.id}
            date={date} onDate={cambiarDia} history={history}
            onToggleItem={toggleItem} onToggleMeal={toggleMeal} onChoose={choose} />
        ) : (
          <div className="empty">
            <div className="empty-icon">🥗</div>
            <div className="empty-title">No tienes ninguna dieta activa</div>
            <div className="empty-sub">Importa el Word de tu entrenador para empezar.</div>
            <button className="btn-primary" style={{ marginTop:16 }} onClick={() => setTab('importar')}>📄 Importar dieta</button>
          </div>
        )
      ) : tab === 'importar' ? (
        <DietImportTab onSaved={async () => { flash('✓ Dieta guardada y activada'); setDate(isoHoy()); await reload(); setTab('hoy'); }} />
      ) : (
        <DietListTab diets={diets} onChanged={reload} onMsg={flash} />
      )}
    </div>
  );
}

Object.assign(window, { ScreenDiet });