// ── Library Screen — Responsive ───────────────────────────────────────────────
const { useState: useStateLib } = React;

const CAT_COLORS = {
  'Proteína': '#FF6B35', 'Carbohidrato': '#FF9500', 'Verdura': '#34C759',
  'Fruta': '#FF2D55', 'Grasa saludable': '#FFD60A', 'Lácteo': '#007AFF',
  'Legumbre': '#AF52DE', 'Otro': '#8E8E93'
};

function FoodForm({ food, onClose, onSave, onDelete }) {
  const blank = { name: '', cal: '', prot: '', carbs: '', fat: '', cat: 'Proteína' };
  const [form, setForm] = useStateLib(food ? { ...food, cal: food.cal||'', prot: food.prot||'', carbs: food.carbs||'', fat: food.fat||'' } : blank);
  const isNew = !food;
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="modal-handle" />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <div className="modal-title" style={{ marginBottom: 0 }}>{isNew ? 'Nuevo alimento' : 'Editar alimento'}</div>
          <button className="btn-ghost" onClick={onClose}>✕</button>
        </div>

        <div className="form-group">
          <label className="form-label">Nombre</label>
          <input className="form-input" value={form.name} onChange={set('name')} placeholder="Ej: Pechuga de pollo" autoFocus />
        </div>
        <div className="form-group">
          <label className="form-label">Calorías por 100g</label>
          <input className="form-input" type="number" value={form.cal} onChange={set('cal')} placeholder="kcal" />
        </div>
        <label className="form-label">Macros por 100g</label>
        <div className="form-row">
          <div className="form-group"><input className="form-input" type="number" placeholder="Proteína g" value={form.prot} onChange={set('prot')} /></div>
          <div className="form-group"><input className="form-input" type="number" placeholder="Carbos g" value={form.carbs} onChange={set('carbs')} /></div>
          <div className="form-group"><input className="form-input" type="number" placeholder="Grasa g" value={form.fat} onChange={set('fat')} /></div>
        </div>
        <div className="form-group">
          <label className="form-label">Categoría</label>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {Object.keys(CAT_COLORS).map(c => (
              <button key={c} className="chip" style={{ background: form.cat === c ? CAT_COLORS[c] : '#F0F0F0', color: form.cat === c ? '#fff' : '#8E8E93' }}
                onClick={() => setForm(f => ({ ...f, cat: c }))}>
                {c}
              </button>
            ))}
          </div>
        </div>

        <button className="btn-primary" style={{ width: '100%', marginTop: 8 }} onClick={() => {
          if (!form.name || !form.cal) return;
          onSave({ ...form, cal: +form.cal, prot: +form.prot||0, carbs: +form.carbs||0, fat: +form.fat||0 });
          onClose();
        }}>
          {isNew ? '+ Añadir alimento' : '✓ Guardar cambios'}
        </button>
        {!isNew && (
          <button className="btn-danger" style={{ width: '100%', marginTop: 8 }} onClick={() => { onDelete(food.id); onClose(); }}>
            🗑 Eliminar alimento
          </button>
        )}
      </div>
    </div>
  );
}

function ScreenLibrary() {
  const { state, addFood, updateFood, deleteFood } = useSalud();
  const [search, setSearch] = useStateLib('');
  const [catFilter, setCatFilter] = useStateLib('Todos');
  const [editFood, setEditFood] = useStateLib(null);
  const [sortBy, setSortBy] = useStateLib('name');

  const foodUsage = {};
  state.meals.forEach(m => (m.items||[]).forEach(i => {
    const fid = i.food_id || i.foodId;
    foodUsage[fid] = (foodUsage[fid]||0) + 1;
  }));

  const cats = ['Todos', ...Object.keys(CAT_COLORS)];
  const filtered = state.foods
    .filter(f => (catFilter === 'Todos' || f.cat === catFilter) && f.name.toLowerCase().includes(search.toLowerCase()))
    .sort((a, b) => sortBy === 'cal' ? b.cal - a.cal : sortBy === 'prot' ? b.prot - a.prot : a.name.localeCompare(b.name));

  return (
    <div className="page">
      {editFood !== null && (
        <FoodForm
          food={editFood === false ? null : editFood}
          onClose={() => setEditFood(null)}
          onSave={food => editFood === false ? addFood(food) : updateFood({ ...editFood, ...food })}
          onDelete={id => deleteFood(id)}
        />
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
        <div className="page-header" style={{ marginBottom: 0 }}>
          <h1>Biblioteca</h1>
          <p>{filtered.length} alimentos</p>
        </div>
        <button className="btn-primary" onClick={() => setEditFood(false)}>+ Nuevo</button>
      </div>

      {/* Search + sort */}
      <div className="card" style={{ padding: '14px 16px' }}>
        <div className="search-wrap" style={{ marginBottom: 12 }}>
          <span className="search-icon">🔍</span>
          <input className="search-input" placeholder="Buscar alimento…" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {cats.map(c => (
            <button key={c} className="chip" style={{ background: catFilter === c ? '#FF6B35' : '#F0F0F0', color: catFilter === c ? '#fff' : '#8E8E93', fontSize: 12, padding: '5px 10px' }}
              onClick={() => setCatFilter(c)}>{c}</button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 10, alignItems: 'center' }}>
          <span style={{ fontSize: 12, color: '#8E8E93' }}>Ordenar:</span>
          {[['name','Nombre'],['cal','Kcal'],['prot','Proteína']].map(([k,l]) => (
            <button key={k} style={{ padding: '4px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, border: 'none', cursor: 'pointer', background: sortBy === k ? '#FF6B35' : '#F0F0F0', color: sortBy === k ? '#fff' : '#8E8E93' }}
              onClick={() => setSortBy(k)}>{l}</button>
          ))}
        </div>
      </div>

      {/* Food list */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        {filtered.length === 0 ? (
          <div className="empty"><div className="empty-icon">🥦</div><div className="empty-title">Sin resultados</div></div>
        ) : filtered.map((food, i) => (
          <div key={food.id} className="list-row" style={{ padding: '12px 20px', cursor: 'pointer', borderBottom: i === filtered.length-1 ? 'none' : '1px solid #F2F2F7' }}
            onClick={() => setEditFood(food)}>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: CAT_COLORS[food.cat]||'#8E8E93', flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{food.name}</div>
              <div style={{ fontSize: 12, color: '#8E8E93' }}>
                {food.cat}{foodUsage[food.id] ? ` · usado ${foodUsage[food.id]}x` : ''}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 16, textAlign: 'center', flexShrink: 0 }}>
              {[['kcal', food.cal, '#FF6B35'], ['prot', food.prot+'g', '#1C1C1E'], ['carbs', food.carbs+'g', '#8E8E93']].map(([l,v,c]) => (
                <div key={l}>
                  <div style={{ fontWeight: 700, fontSize: 13, color: c }}>{v}</div>
                  <div style={{ fontSize: 10, color: '#AEAEB2' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ScreenLibrary, CAT_COLORS });