// ── Menu Generator — Responsive ───────────────────────────────────────────────
const { useState: useStateMenu } = React;
const MENU_MEAL_TYPES = ['Desayuno', 'Almuerzo', 'Comida', 'Merienda', 'Cena'];
const MENU_ICONS = { Desayuno:'🌅', Almuerzo:'☕', Comida:'🍽', Merienda:'🍎', Cena:'🌙' };

function generateMenu(foods, days) {
  const proteins = foods.filter(f => f.cat === 'Proteína');
  const carbs    = foods.filter(f => f.cat === 'Carbohidrato');
  const veggies  = foods.filter(f => f.cat === 'Verdura');
  const fruits   = foods.filter(f => f.cat === 'Fruta');
  const dairy    = foods.filter(f => f.cat === 'Lácteo');
  const pick = arr => arr.length ? arr[Math.floor(Math.random()*arr.length)] : null;

  return Array.from({ length: days }, (_, i) => ({
    day: i + 1,
    meals: {
      Desayuno: [{ food: pick([...dairy,...foods.filter(f=>f.cat==='Carbohidrato')]) || pick(foods), grams: 150 }, { food: pick(fruits)||pick(foods), grams: 120 }].filter(x=>x.food),
      Almuerzo: [{ food: pick(proteins)||pick(foods), grams: 30 }].filter(x=>x.food),
      Comida:   [{ food: pick(proteins)||pick(foods), grams: 160 }, { food: pick(carbs)||pick(foods), grams: 120 }, { food: pick(veggies)||pick(foods), grams: 150 }].filter(x=>x.food),
      Merienda: [{ food: pick(fruits)||pick(foods), grams: 150 }].filter(x=>x.food),
      Cena:     [{ food: pick(proteins)||pick(foods), grams: 140 }, { food: pick(veggies)||pick(foods), grams: 180 }].filter(x=>x.food),
    }
  }));
}

function ScreenMenu() {
  const { state, addMeal, addMenu } = useSalud();
  const [days, setDays] = useStateMenu(5);
  const [generated, setGenerated] = useStateMenu(null);
  const [activeDay, setActiveDay] = useStateMenu(0);
  const [menuName, setMenuName] = useStateMenu('');
  const [savedMsg, setSavedMsg] = useStateMenu('');

  const handleGenerate = () => { setGenerated(generateMenu(state.foods, days)); setActiveDay(0); };

  const handleSave = async () => {
    if (!generated) return;
    const name = menuName.trim() || `Menú ${new Date().toLocaleDateString('es-ES',{day:'numeric',month:'short'})}`;
    await addMenu({ name, days: generated });
    setMenuName(''); setGenerated(null);
    setSavedMsg('✓ Menú guardado'); setTimeout(() => setSavedMsg(''), 2500);
  };

  const handleAssignToday = async () => {
    if (!generated) return;
    const today = new Date().toISOString().split('T')[0];
    const dayData = generated[activeDay];
    for (const type of MENU_MEAL_TYPES) {
      const items = (dayData.meals[type]||[]).map(i => ({ foodId: i.food.id, grams: i.grams }));
      if (items.length) await addMeal({ date: today, type, items });
    }
    setSavedMsg('✓ Asignado a hoy'); setTimeout(() => setSavedMsg(''), 2500);
  };

  const dayKcal = (dayData) => MENU_MEAL_TYPES.reduce((sum, t) => sum + (dayData.meals[t]||[]).reduce((s,i) => s + (i.food?.cal||0)*i.grams/100, 0), 0);

  return (
    <div className="page">
      <div className="page-header"><h1>Generador de Menú</h1><p>Menús equilibrados con tus alimentos</p></div>

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

      {/* Config */}
      <div className="card">
        <div className="card-title">Número de días</div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          {[3,5,7,14].map(n => (
            <button key={n} className="chip" style={{ background: days===n?'#FF6B35':'#F0F0F0', color: days===n?'#fff':'#8E8E93' }}
              onClick={() => setDays(n)}>{n} días</button>
          ))}
        </div>
        <p style={{ fontSize: 13, color: '#8E8E93', marginBottom: 16 }}>{state.foods.length} alimentos en tu biblioteca</p>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn-primary" style={{ flex: 1 }} onClick={handleGenerate}>🎲 Generar menú</button>
          {generated && <button className="btn-secondary" onClick={handleGenerate}>🔄 Regenerar</button>}
        </div>
      </div>

      {/* Generated */}
      {generated && (
        <>
          <div className="card">
            <div className="card-title">Menú generado</div>
            {/* Day tabs */}
            <div style={{ display: 'flex', gap: 6, overflowX: 'auto', marginBottom: 20, paddingBottom: 4 }}>
              {generated.map((d,i) => (
                <button key={i} className="chip" style={{ background: activeDay===i?'#FF6B35':'#F0F0F0', color: activeDay===i?'#fff':'#8E8E93', flexShrink: 0 }}
                  onClick={() => setActiveDay(i)}>Día {d.day}</button>
              ))}
            </div>

            {/* Day meals */}
            {MENU_MEAL_TYPES.map(type => {
              const items = generated[activeDay].meals[type]||[];
              if (!items.length) return null;
              return (
                <div key={type} style={{ marginBottom: 16 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#FF6B35', textTransform: 'uppercase', letterSpacing: .5, marginBottom: 8 }}>
                    {MENU_ICONS[type]} {type}
                  </div>
                  {items.map((item,i) => (
                    <div key={i} className="list-row" style={{ padding: '8px 0' }}>
                      <div style={{ flex: 1, fontWeight: 500 }}>{item.food?.name}</div>
                      <div style={{ color: '#8E8E93', fontSize: 13 }}>{item.grams}g</div>
                      <div style={{ fontWeight: 700, color: '#FF6B35', fontSize: 14, marginLeft: 12 }}>{Math.round((item.food?.cal||0)*item.grams/100)} kcal</div>
                    </div>
                  ))}
                </div>
              );
            })}

            {/* Day total */}
            <div style={{ background: '#FFF5F0', borderRadius: 10, padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
              <span style={{ fontWeight: 600 }}>Total día {generated[activeDay].day}</span>
              <span style={{ fontWeight: 700, fontSize: 18, color: '#FF6B35' }}>{Math.round(dayKcal(generated[activeDay]))} kcal</span>
            </div>

            <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
              <button className="btn-ghost" style={{ flex: 1, borderColor: '#34C759', color: '#16A34A' }} onClick={handleAssignToday}>📅 Asignar a hoy</button>
            </div>
          </div>

          {/* Save */}
          <div className="card">
            <div className="card-title">Guardar menú</div>
            <input className="form-input" placeholder="Nombre del menú (opcional)" value={menuName} onChange={e => setMenuName(e.target.value)} style={{ marginBottom: 12 }} />
            <button className="btn-primary" style={{ width: '100%' }} onClick={handleSave}>💾 Guardar</button>
          </div>
        </>
      )}

      {/* Saved menus */}
      {state.menus.length > 0 && (
        <div className="card">
          <div className="card-title">Menús guardados</div>
          {state.menus.map(m => (
            <div key={m.id} className="list-row">
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600 }}>{m.name}</div>
                <div style={{ fontSize: 12, color: '#8E8E93' }}>{new Date(m.created_at).toLocaleDateString('es-ES',{day:'numeric',month:'short',year:'numeric'})}</div>
              </div>
              <span className="badge badge-orange">{m.days?.length||'?'} días</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ScreenMenu });